feat(community): Detailseite, Melden, Admin-Aktionen, Vorlage
Detailseite /community/<id>: große Karte, Titel, Herausgeber, „von …“, Datum, Tags, Herunterladen (aircard-<slug>.png), „Als Vorlage gestalten“ und Melden-Dialog (fünf Gründe, Dank-, Doppelt- und Drosselungs-Text). Autor: Zurückziehen; Admin: Ausblenden/Einblenden, Löschen, Meldungszahl und Gründe. Fehlende oder ausgeblendete Karten zeigen Besuchern „nicht (mehr) verfügbar“, Autor und Admin sehen sie mit dem Hinweis „Ausgeblendet“. Editor: /gestalten?vorlage=<id> übernimmt das Galerie-Vollbild als „Nur Bild“, setzt saved, savedConfig und cardName zurück, ersetzt die Adresse durch /gestalten und fragt vorher bei ungespeicherter Arbeit. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed
1 parent
c4a66f674f
commit
3cec7151a6
8 files changed
+2221
-15
No files matched your search
@@ -475,9 +475,319 @@
|
||||
background: #b42318;
|
||||
}
|
||||
|
||||
/* Detailseite /community/<id> */
|
||||
|
||||
.detail-page {
|
||||
--card-radius: 3.711% / 5.882%;
|
||||
}
|
||||
|
||||
.detail-back {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.detail-back a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 36px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.detail-back a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.detail-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
|
||||
align-items: start;
|
||||
gap: 24px 36px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
position: relative;
|
||||
aspect-ratio: 1536 / 969;
|
||||
overflow: hidden;
|
||||
border-radius: var(--card-radius);
|
||||
background: var(--panel-2);
|
||||
box-shadow: var(--shadow-card), 0 0 0 1px rgb(255 255 255 / 0.06);
|
||||
}
|
||||
|
||||
.detail-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-card-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detail-card-empty p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#app-root .detail-title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.detail-issuer {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.detail-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.detail-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 2px 13px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: var(--panel-2);
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.detail-tag:hover {
|
||||
border-color: var(--sel-line);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.detail-notice-slot:empty,
|
||||
.detail-admin-slot:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.detail-hidden {
|
||||
margin: 0;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 12px;
|
||||
background: rgb(229 72 77 / 0.12);
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.detail-btn-danger {
|
||||
border-color: var(--danger);
|
||||
color: var(--danger-text);
|
||||
}
|
||||
|
||||
.detail-btn-danger:hover:not(:disabled) {
|
||||
border-color: var(--danger);
|
||||
background: rgb(229 72 77 / 0.16);
|
||||
}
|
||||
|
||||
.detail-msg {
|
||||
margin: 0;
|
||||
color: var(--ok-text);
|
||||
}
|
||||
|
||||
.detail-msg.is-error {
|
||||
color: var(--danger-text);
|
||||
}
|
||||
|
||||
.detail-msg:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.detail-admin {
|
||||
margin-top: 8px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.detail-admin-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.detail-reports-count {
|
||||
margin: 0 0 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.detail-reasons {
|
||||
margin: 0 0 12px;
|
||||
padding-left: 20px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-admin-note {
|
||||
margin: 0 0 12px;
|
||||
color: var(--warn-text);
|
||||
}
|
||||
|
||||
.detail-admin-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-unavailable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
max-width: 560px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.detail-load-error,
|
||||
.detail-status {
|
||||
margin: 24px 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-load-error {
|
||||
margin: 0;
|
||||
color: var(--danger-text);
|
||||
}
|
||||
|
||||
/* Melden-Dialog (Knöpfe und Meldungen kommen aus account.css) */
|
||||
|
||||
.report-dialog {
|
||||
width: min(420px, calc(100vw - 32px));
|
||||
max-height: calc(100dvh - 32px);
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 20px;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.report-dialog::backdrop {
|
||||
background: var(--backdrop);
|
||||
}
|
||||
|
||||
.report-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.report-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.report-text {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.report-reasons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.report-legend {
|
||||
margin-bottom: 4px;
|
||||
padding: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.report-reason {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 44px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.report-reason:hover {
|
||||
border-color: var(--sel-line);
|
||||
}
|
||||
|
||||
.report-reason:has(input:checked) {
|
||||
border-color: var(--sel-line);
|
||||
background: var(--sel-bg);
|
||||
}
|
||||
|
||||
.report-reason input {
|
||||
flex: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
accent-color: var(--sel-line);
|
||||
}
|
||||
|
||||
.report-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Tablet und Handy: eine Spalte, der Hero bleibt niedrig */
|
||||
|
||||
@media (max-width: 899px) {
|
||||
.detail-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
--hero-card-max: 400px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
@@ -491,6 +801,10 @@
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.detail-actions .home-btn {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
--hero-card-max: 250px;
|
||||
gap: 8px;
|
||||
|
||||
Reference in new issue
Block a user