Verwaltung neu gestaltet: ein Rahmen statt sieben Kopfzeilen
Jede Verwaltungsseite trug bisher ihre eigene Kopfzeile und ihre eigene, unvollständige Liste von Links auf die anderen Seiten - die Seitenübersicht verlinkte sieben Bereiche, das Menü fünf, die Fassungen drei. Wo man war, stand nirgends. Jetzt gibt es einen Rahmen für alle: eine feste Seitenleiste mit der Navigation, der aktive Eintrag über aria-current markiert, und eine Kopfzeile mit Titel, einem Satz Erklärung und Platz für die Hauptaktion. Jede Seite füllt nur noch heading, lead, actions und content. Auf schmalen Fenstern wird die Seitenleiste zu einer scrollbaren Leiste, ohne JavaScript. Die Seitenübersicht zeigt je Seite eine Zeile mit dem Alltäglichen und einem Aufklappfeld "Einstellungen", das darunter an seinem Platz öffnet - vorher waren es sechs Aufklappfelder, deren Inhalt als absolut positionierter Kasten über den Rand der Karte hinausragte. Tabellen scrollen seitlich, statt die Karte aus dem Fenster zu schieben. Das Stylesheet ist geteilt: die Editorregeln stehen in editor.css, das nur Editor und Mediathek laden; admin.css ist neu geschrieben und lesbar. Der Editor behält seinen Aufbau und übernimmt die neue Gestaltung - Systemschrift, gleiche Radien, gleiche Schaltflächen, und ein paar Panelgrößen, die zum Lesen zu klein waren. Beim Zerlegen des Stylesheets schnitt mein Skript am Ende jedes @media-Blocks alle schließenden Klammern ab statt nur einer. editor.css war damit ab dem ersten Medienblock ungültig: der Browser behielt 29 von 202 Regeln. Gefunden hat das der Browsertest, an einer Vorschaubreite von 1236 statt 1240 Pixeln - vier Pixel als einziges Anzeichen dafür, dass dreiviertel des Stylesheets fehlte. 201 PHP-Tests / 716 Assertions unter PHP 8.2.12 und 8.4.22, Playwright- Editortest mit axe ohne Verstöße auf Anmeldung, Seitenübersicht und Editor, öffentliche Browserprüfung grün. Zwei Testselektoren zeigten auf umbenannte Klassen und prüfen dieselbe Sache nun über den neuen Namen. Nicht geprüft: kein Screenreader, und die Bildschirme Menüs, Formulare, Bereiche, Design, Einstellungen und Fassungen sind nur von Hand bedient, nicht automatisiert geprüft. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
kantarciandClaude Opus 5 committed
1 parent
a22a7f7fd7
commit
4841bf65bc
18 files changed
+1468
-790
No files matched your search
@@ -347,3 +347,29 @@ Umut wollte an jedem Element eigenes CSS **und** eigenes Skript setzen können.
|
||||
- **In der Editorvorschau wird nichts ausgeführt.** Die Vorschau soll das Layout zeigen, nicht Code laufen lassen, der die Seite unter den Händen des Bearbeiters verändert.
|
||||
|
||||
Zwei echte Löcher kamen beim Testen heraus. `& .block-text` wurde zu `#id.block-text`, weil das führende Leerzeichen wegtrimmt wurde – aus dem Nachfahren wurde derselbe Knoten, die Regel traf das falsche Element. Und `url(//fremd.example/x.png)` kam durch, weil die Prüfung jedes `/` erlaubte: eine protokollrelative Adresse hätte über das Schema der Seite von Dritten geladen. Beides ist behoben und durch Tests abgedeckt.
|
||||
|
||||
## ADR 029 – Verwaltung: ein Rahmen statt sieben Kopfzeilen (12.09.2026)
|
||||
|
||||
Umuts Auftrag war „backend komplett neugestalten, einfacher schöner Bedienbarkeit komplett einfach“, mit ausdrücklicher Gestaltungsfreiheit. Das Problem war weniger die Optik als die Orientierung: jede Verwaltungsseite trug ihre eigene Kopfzeile und ihre eigene, unvollständige Liste von Links auf die anderen Seiten – die Seitenübersicht verlinkte sieben Bereiche, das Menü fünf, die Fassungen drei. Wo man war, stand nirgends.
|
||||
|
||||
**Ein Rahmen für alle.** `templates/admin/shell.html.twig` trägt die Navigation, die Flash-Meldungen und die Kopfzeile mit Titel, einem Satz Erklärung und Platz für die Hauptaktion. Jede Verwaltungsseite füllt nur noch `heading`, `lead`, `actions` und `content`. Die Navigationsliste steht einmal da; die aktive Seite ist über `aria-current="page"` markiert, also auch ohne Farbe erkennbar. Auf schmalen Fenstern wird die Seitenleiste zu einer waagerecht scrollbaren Leiste – ohne JavaScript, weil die Verwaltung sonst nichts davon braucht.
|
||||
|
||||
**Eine Zeile je Seite statt einer überladenen Karte.** Vorher hing an jeder Seite eine Reihe von sechs Aufklappfeldern, die als absolut positionierte Kästen über den Rand der Karte hinausragten. Jetzt zeigt die Zeile, was man täglich braucht – Titel, Adresse, Zustand, „Bearbeiten“, „Fassungen“ – und ein einziges Aufklappfeld „Einstellungen“ öffnet darunter, an seinem Platz, die Abschnitte Seitendaten, Adresse, Planung und Entfernen. Nichts wird mehr abgeschnitten, und man sieht alles zu einer Seite auf einmal.
|
||||
|
||||
**Das Stylesheet ist geteilt.** `admin.css` war ein gewachsener Block, in dem Grundelemente, Verwaltungsseiten und die Editormaschine in denselben Zeilen standen. Die Editorregeln stehen jetzt in `editor.css`, das nur der Editor und die Mediathek laden; `admin.css` ist neu geschrieben und lesbar. Beim Zerlegen ist mir ein Fehler unterlaufen, den erst der Browsertest gefunden hat: mein Skript hat am Ende jedes `@media`-Blocks **alle** schließenden Klammern abgeschnitten statt nur einer. Die Datei war damit ab dem ersten Medienblock ungültig, der Browser hat 173 Regeln verworfen und nur 29 behalten – auffällig wurde das an der Vorschaubreite, die um vier Pixel abwich, weil der Standardrahmen des iframe nicht mehr entfernt wurde. Vier Pixel, hinter denen dreiviertel des Editor-Stylesheets fehlte.
|
||||
|
||||
**Systemschrift statt Arial**, und eine dunkle Seitenleiste als ruhiger Anker. Für die Verwaltung wird nichts nachgeladen; Google Fonts bleiben der Website vorbehalten, wo Umut sie auswählt.
|
||||
|
||||
## ADR 029 – Verwaltung: ein Rahmen statt sieben Kopfzeilen (12.09.2026)
|
||||
|
||||
Umuts Auftrag war „backend komplett neugestalten, einfacher schöner Bedienbarkeit komplett einfach“, mit ausdrücklicher Gestaltungsfreiheit. Das Problem war weniger die Optik als die Orientierung: jede Verwaltungsseite trug ihre eigene Kopfzeile und ihre eigene, unvollständige Liste von Links auf die anderen Seiten – die Seitenübersicht verlinkte sieben Bereiche, das Menü fünf, die Fassungen drei. Wo man war, stand nirgends.
|
||||
|
||||
**Ein Rahmen für alle.** `templates/admin/shell.html.twig` trägt die Navigation, die Meldungen und die Kopfzeile mit Titel, einem Satz Erklärung und Platz für die Hauptaktion. Jede Verwaltungsseite füllt nur noch `heading`, `lead`, `actions` und `content`. Die Navigation steht einmal da; die aktive Seite ist über `aria-current="page"` markiert, also nicht nur an der Farbe erkennbar. Auf schmalen Fenstern wird die Seitenleiste zu einer waagerecht scrollbaren Leiste – ohne JavaScript, weil die Verwaltung sonst keines braucht.
|
||||
|
||||
**Eine Zeile je Seite statt einer überladenen Karte.** Vorher hing an jeder Seite eine Reihe von sechs Aufklappfeldern, deren Inhalt als absolut positionierter Kasten über den Rand der Karte hinausragte. Jetzt zeigt die Zeile, was man täglich braucht – Titel, Adresse, Zustand, „Bearbeiten“, „Fassungen“ – und ein einziges Aufklappfeld „Einstellungen“ öffnet darunter, an seinem Platz, mit den Abschnitten Seitendaten, Adresse, Planung und Entfernen. Nichts wird mehr abgeschnitten, und man sieht alles zu einer Seite auf einmal. Tabellen scrollen seitlich, statt die Karte aus dem Fenster zu schieben.
|
||||
|
||||
**Das Stylesheet ist geteilt.** `admin.css` war ein gewachsener Block, in dem Grundelemente, Verwaltungsseiten und die Editormaschine in denselben Zeilen standen. Die Editorregeln stehen jetzt in `editor.css`, das nur Editor und Mediathek laden; `admin.css` ist neu geschrieben und lesbar. Der Editor behält seinen Aufbau – drei Spalten, Vorschau in der Mitte – und übernimmt die neue Gestaltung: Systemschrift, gleiche Radien, gleiche Schaltflächen, und ein paar Größen im Panel, die zum Lesen zu klein waren.
|
||||
|
||||
Beim Zerlegen ist mir ein Fehler unterlaufen, den erst der Browsertest gefunden hat: mein Skript schnitt am Ende jedes `@media`-Blocks **alle** schließenden Klammern ab statt nur einer. Die Datei war damit ab dem ersten Medienblock ungültig, der Browser behielt 29 von 202 Regeln. Symptom war eine Vorschaubreite von 1236 statt 1240 Pixeln, weil der Standardrahmen des iframe nicht mehr entfernt wurde – vier Pixel als einziges Anzeichen dafür, dass dreiviertel des Editor-Stylesheets fehlte.
|
||||
|
||||
**Systemschrift statt Arial**, und eine dunkle Seitenleiste als ruhiger Anker. Für die Verwaltung wird nichts nachgeladen; Google Fonts bleiben der Website vorbehalten, wo Umut sie auswählt.
|
||||
+1
-1
@@ -129,7 +129,7 @@ Umut hat den Umfang von G erweitert. Vier Punkte, in dieser Reihenfolge:
|
||||
1. ~~**Kopf- und Fußbereich frei aus Elementen bauen**~~ — **erledigt am 12.09.2026** (ADR 026). Ursprünglicher Wortlaut: **Kopf- und Fußbereich frei aus Elementen bauen**, genau wie eine Sektion – keine feste Marke, keine feste Navigation im Template. Dazu wiederverwendbare Sektionen, die *verknüpft* und nicht kopiert werden: eine Änderung erreicht jede Seite, die sie nutzt.
|
||||
2. ~~**Rich Text in Textelementen**~~ — **erledigt am 12.09.2026** (ADR 027). Umgesetzt für Textblöcke mit Werkzeugleiste und HTML-Ansicht; gefiltert wird auf dem Server beim Speichern. Überschrift, Button und Zitat bleiben bewusst Klartext.
|
||||
3. ~~**Eigenes CSS und eigenes Skript je Element.**~~ — **erledigt am 12.09.2026** (ADR 028). Ursprünglicher Wortlaut: **Eigenes CSS und eigenes Skript je Element.** Eigenes CSS ist unkritisch und für alle mit Editorrolle nutzbar. **Eigenes Skript ist es nicht:** es ist gespeichertes, ausführbares JavaScript auf der Website. Wer es setzen darf, kann Code im Browser jedes Administrators ausführen. Deshalb: nur für Administratoren, Ausgabe über eine seiteneigene Skriptdatei statt inline, keine Ausführung in der Editorvorschau, und `script-src 'self'` nur auf Seiten, die tatsächlich ein Skript tragen. Der Preis steht in der Oberfläche.
|
||||
4. **Verwaltung neu gestalten** – einfacher, schöner, ohne Nachdenken bedienbar. Gestaltungsfreiheit ausdrücklich bei mir; der bisherige Stil ist nicht bindend. Das betrifft Navigation zwischen den Bereichen, die Seitenliste, die Panels im Editor und die Formularseiten, die derzeit alle als lange Formulartabellen gebaut sind.
|
||||
4. ~~**Verwaltung neu gestalten**~~ — **erledigt am 12.09.2026** (ADR 029). Der Editor behält seinen Aufbau und übernimmt die neue Gestaltung; neu gebaut sind der Rahmen, die Navigation, die Seitenliste und die Formularseiten. Ursprünglicher Wortlaut: **Verwaltung neu gestalten** – einfacher, schöner, ohne Nachdenken bedienbar. Gestaltungsfreiheit ausdrücklich bei mir; der bisherige Stil ist nicht bindend. Das betrifft Navigation zwischen den Bereichen, die Seitenliste, die Panels im Editor und die Formularseiten, die derzeit alle als lange Formulartabellen gebaut sind.
|
||||
|
||||
Abnahme: Kopf- und Fußbereich sind im Editor gestaltbar und öffentlich sichtbar. Eine verknüpfte Sektion auf zwei Seiten ändert sich an beiden Stellen gleichzeitig. Ein Textelement lässt sich formatiert und als HTML bearbeiten, und keine Auszeichnung außerhalb der Positivliste übersteht das Speichern. Eigenes CSS wirkt, eigenes Skript wirkt nur für Administratoren gesetzt und nur auf der veröffentlichten Seite. Die Verwaltung ist ohne Anleitung bedienbar.
|
||||
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
# Qualitätsbericht – erster ausführbarer Prototyp
|
||||
|
||||
## Ergänzung: Verwaltung neu gestaltet, 12.09.2026
|
||||
|
||||
- **201 PHP-Tests / 716 Assertions** grün, Playwright-Editortest mit axe ohne Verstöße auf **Anmeldung, Seitenübersicht und Editor** (Desktop und Mobil), öffentliche Browserprüfung unverändert grün.
|
||||
- Zwei Testselektoren zeigten auf Klassen, die die Umgestaltung umbenannt hat; sie prüfen jetzt dieselbe Sache über den neuen Namen. Die Klasse, an der die Rechteprüfung für das endgültige Löschen hängt, ist absichtlich geblieben.
|
||||
- **Der Browsertest hat einen Fehler gefunden, den ich selbst eingebaut hatte.** Beim Zerlegen des Stylesheets schnitt mein Skript am Ende jedes `@media`-Blocks alle schließenden Klammern ab statt nur einer. Damit war `editor.css` ab dem ersten Medienblock ungültig: der Browser behielt 29 von 202 Regeln. Aufgefallen ist es an einer Vorschaubreite von 1236 statt 1240 Pixeln, weil der Standardrahmen des iframe nicht mehr entfernt wurde – vier Pixel als einziges Symptom dafür, dass dreiviertel des Editor-Stylesheets fehlte. Behoben, und die Datei wird jetzt auf ausgeglichene Klammern geprüft.
|
||||
- **Nicht geprüft:** kein Screenreader. Die Bildschirme Menüs, Formulare, Bereiche, Design, Einstellungen und Fassungen habe ich im Browser angesehen und ihre Tabellen und Formulare bedient, aber die automatische Barrierefreiheitsprüfung deckt sie nicht ab – sie prüft Anmeldung, Seitenübersicht und Editor.
|
||||
- Der Editor selbst behält seinen Aufbau. Er übernimmt die neuen Farben, Schaltflächen und die Systemschrift, ist aber nicht neu gestaltet worden.
|
||||
|
||||
## Ergänzung: Verwaltung neu gestaltet, 12.09.2026
|
||||
|
||||
- **201 PHP-Tests / 716 Assertions** grün, Playwright-Editortest mit axe ohne Verstöße auf **Anmeldung, Seitenübersicht und Editor** (Desktop und Mobil), öffentliche Browserprüfung unverändert grün.
|
||||
- Zwei Testselektoren zeigten auf Klassen, welche die Umgestaltung umbenannt hat; sie prüfen jetzt dieselbe Sache über den neuen Namen. Die Klasse, an der die Rechteprüfung für das endgültige Löschen hängt, ist absichtlich geblieben.
|
||||
- **Der Browsertest hat einen Fehler gefunden, den ich selbst eingebaut hatte.** Beim Zerlegen des Stylesheets schnitt mein Skript am Ende jedes `@media`-Blocks alle schließenden Klammern ab statt nur einer. Damit war `editor.css` ab dem ersten Medienblock ungültig: der Browser behielt 29 von 202 Regeln. Aufgefallen ist es an einer Vorschaubreite von 1236 statt 1240 Pixeln, weil der Standardrahmen des iframe nicht mehr entfernt wurde – vier Pixel als einziges Anzeichen dafür, dass dreiviertel des Editor-Stylesheets fehlte. Behoben und mit ausgeglichenen Klammern nachgerechnet.
|
||||
- Von Hand bedient: Seitenübersicht mit Aufklappfeld, Menüs, Formulare, Bereiche, Design, Einstellungen, Mediathek und der Editor in allen drei Vorschaugrößen.
|
||||
- **Nicht geprüft:** kein Screenreader. Die automatische Barrierefreiheitsprüfung deckt Anmeldung, Seitenübersicht und Editor ab, nicht die übrigen Verwaltungsbildschirme.
|
||||
|
||||
## Ergänzung: eigenes CSS und eigenes Skript, 12.09.2026
|
||||
|
||||
- **201 PHP-Tests / 716 Assertions** unter PHP 8.2.12 und PHP 8.4.22, **15 JavaScript-Modelltests**, der vollständige Playwright-Editortest mit axe (null Verstöße) und die öffentliche Browserprüfung.
|
||||
|
||||
+6
-2
@@ -1,6 +1,6 @@
|
||||
# Projektstatus
|
||||
|
||||
Stand: 12.09.2026. Arbeitstitel Kant CMS. **Eigenes CSS je Element für alle, eigenes Skript nur für Administratoren und nur als eigene Datei. Formatierter Text mit Werkzeugleiste und HTML-Ansicht, serverseitig gegen eine Positivliste gefiltert. Kopf- und Fußbereich sind frei gestaltbare Blockdokumente, dazu verknüpfte wiederverwendbare Sektionen (Arbeitspaket G, Teil 1). Frei wählbare Startseite; `/sitemap.xml` und Geschwister waren lokal nie erreichbar und sind es jetzt. Seiten verschieben mit automatischen Weiterleitungen, Papierkorb, Fassungsverlauf und geplante Veröffentlichung (Arbeitspaket F). Browsertests wiederhergestellt und erweitert; dabei drei echte Fehler gefunden und behoben, darunter die in der Vorschau wirkungslose Gestaltung. Direktbearbeitung in der Vorschau, Kontrastwarnung, Gestaltungsvorlagen und Bildauswahl für Hintergrundbilder. Der Editor gestaltet frei statt über feste Auswahllisten: eigene Farbpalette, Schriften, und jede Eigenschaft je Block, je Gerät und für den Hover-Zustand frei einstellbar (Dokumentschema v10). SEO-Grundlage mit Sitemap, robots.txt, Weiterleitungen und strukturierten Daten (Arbeitspaket E). Formulare mit serverseitiger Validierung, Einwilligung, E-Mail-Versand und Spamschutz (Arbeitspaket D). Tabs als fortschreitende Verbesserung mit JavaScript (Dokumentschema v7). Zehn neue Blöcke für die Abschnitte der Pilotstartseite (Arbeitspaket C). Beiträge mit Datum, Autor, Auszug, Beitragsbild, Kategorien, Schlagwörtern, Archiven, einbettbarer Beitragsliste und RSS (Arbeitspaket B). Menüs mit Seiten-, Anker- und externen Zielen ersetzen die fest verdrahtete Navigation (Arbeitspaket A). Seiten und Beiträge lassen sich im Browser anlegen und löschen, mit Adresshierarchie bis vier Ebenen.** Die vollständige Phase-1-Abnahme bleibt wegen des fehlenden UX-Builder-Referenzabgleichs offen.
|
||||
Stand: 12.09.2026. Arbeitstitel Kant CMS. **Die Verwaltung hat einen gemeinsamen Rahmen mit einer Navigation, die zeigt, wo man ist. Eigenes CSS je Element für alle, eigenes Skript nur für Administratoren und nur als eigene Datei. Formatierter Text mit Werkzeugleiste und HTML-Ansicht, serverseitig gegen eine Positivliste gefiltert. Kopf- und Fußbereich sind frei gestaltbare Blockdokumente, dazu verknüpfte wiederverwendbare Sektionen (Arbeitspaket G, Teil 1). Frei wählbare Startseite; `/sitemap.xml` und Geschwister waren lokal nie erreichbar und sind es jetzt. Seiten verschieben mit automatischen Weiterleitungen, Papierkorb, Fassungsverlauf und geplante Veröffentlichung (Arbeitspaket F). Browsertests wiederhergestellt und erweitert; dabei drei echte Fehler gefunden und behoben, darunter die in der Vorschau wirkungslose Gestaltung. Direktbearbeitung in der Vorschau, Kontrastwarnung, Gestaltungsvorlagen und Bildauswahl für Hintergrundbilder. Der Editor gestaltet frei statt über feste Auswahllisten: eigene Farbpalette, Schriften, und jede Eigenschaft je Block, je Gerät und für den Hover-Zustand frei einstellbar (Dokumentschema v10). SEO-Grundlage mit Sitemap, robots.txt, Weiterleitungen und strukturierten Daten (Arbeitspaket E). Formulare mit serverseitiger Validierung, Einwilligung, E-Mail-Versand und Spamschutz (Arbeitspaket D). Tabs als fortschreitende Verbesserung mit JavaScript (Dokumentschema v7). Zehn neue Blöcke für die Abschnitte der Pilotstartseite (Arbeitspaket C). Beiträge mit Datum, Autor, Auszug, Beitragsbild, Kategorien, Schlagwörtern, Archiven, einbettbarer Beitragsliste und RSS (Arbeitspaket B). Menüs mit Seiten-, Anker- und externen Zielen ersetzen die fest verdrahtete Navigation (Arbeitspaket A). Seiten und Beiträge lassen sich im Browser anlegen und löschen, mit Adresshierarchie bis vier Ebenen.** Die vollständige Phase-1-Abnahme bleibt wegen des fehlenden UX-Builder-Referenzabgleichs offen.
|
||||
|
||||
Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt. Noch kein Remote und kein Push.
|
||||
|
||||
@@ -25,6 +25,8 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
|
||||
- Auf ausdrücklichen Nutzerwunsch lokalen Administrator `umut` mit zufälligem Passwort angelegt und im In-App-Browser erfolgreich angemeldet. Das Passwort steht in keiner Projektdatei; nur der Hash in der lokalen Datenbank. Keine Browser-Passwortspeicherung ausgelöst.
|
||||
- Seitenerstellung und -löschung im Browser: `POST /admin/pages` (ab `ROLE_EDITOR`) legt Seite oder Beitrag mit gültigem Startdokument als privaten Entwurf an; `POST /admin/pages/{id}/delete` (nur `ROLE_ADMIN`) entfernt eine Seite mit allen Revisionen. Beide mit CSRF-Token, Fehlermeldungen als Flash und ohne JavaScript bedienbar.
|
||||
- Adresshierarchie: neue Spalten `path`, `parent_id`, `type`, `created_at` über Migration `20260912000400`; websiteweit eindeutiger Pfad statt eindeutigem Slug, Tiefe bis vier Ebenen, Beiträge ohne Unterseiten, reservierte Adressen und Adressableitung aus dem Titel. Öffentliche Route bedient verschachtelte Pfade wie `/leistungen/webdesign`; ein Lookahead hält `/admin`, `/media` und `/assets` aus dem Auffangmuster.
|
||||
- **Verwaltung neu gestaltet** (ADR 029): ein Rahmen für alle Bildschirme mit fester Seitenleiste, aktivem Eintrag über `aria-current`, Titel, einem Satz Erklärung und Platz für die Hauptaktion. Vorher trug jede Seite ihre eigene Kopfzeile und eine eigene, unvollständige Linkliste. Je Seite eine Zeile mit dem Alltäglichen und **einem** Aufklappfeld „Einstellungen“, das an seinem Platz öffnet, statt sechs Kästen, die über den Rand hinausragten. Tabellen scrollen seitlich, statt die Karte aus dem Fenster zu schieben. Die Editorregeln stehen jetzt in `editor.css`, das nur Editor und Mediathek laden.
|
||||
- **Verwaltung neu gestaltet** (ADR 029): ein Rahmen für alle Bildschirme mit fester Seitenleiste, aktivem Eintrag über `aria-current`, Titel, einem Satz Erklärung und Platz für die Hauptaktion. Vorher trug jede Seite ihre eigene Kopfzeile und eine eigene, unvollständige Linkliste. Je Seite eine Zeile mit dem Alltäglichen und **einem** Aufklappfeld „Einstellungen“, das an seinem Platz öffnet, statt sechs Kästen, die über den Rand hinausragten. Tabellen scrollen seitlich. Der Editor behält seinen Aufbau und übernimmt die neue Gestaltung; seine Regeln stehen jetzt in `editor.css`, das nur Editor und Mediathek laden.
|
||||
- **Eigenes CSS je Element** (Dokumentschema v13) im neuen Reiter „Erweitert“: Eigenschaften für das Element und verschachtelte Regeln mit `&`. Der Selektor wird vom Server gesetzt, die Ausgabe neu serialisiert – eine überzählige `}` kann den Block nicht verlassen. Abgewiesen: @-Regeln, Backslash-Escapes, `expression()`, fremde Selektoren und jede Adresse außer einem einzelnen `/` oder `https://`. Für jeden mit Editorrolle.
|
||||
- **Eigenes Skript je Element nur für Administratoren.** Durchgesetzt beim Schreiben durch Vergleich mit dem gespeicherten Stand – ein Editor kann eine Seite mit Skript weiter bearbeiten, das Skript aber nicht anfassen, auch nicht über eine eigene Anfrage. Ausgeliefert als `/assets/seite/{id}.js` nur für **veröffentlichte** Seiten, jedes Skript in einer eigenen Closure mit `element` und `try`/`catch`. **Nur eine Seite mit eigenem Skript sendet `script-src 'self'`**, jede andere behält `script-src 'none'`; inline ist nirgends erlaubt. In der Editorvorschau wird nichts ausgeführt.
|
||||
- **Formatierter Text in Textblöcken** (Dokumentschema v12): fett, kursiv, unterstrichen, durchgestrichen, Code, hervorgehoben, hoch-/tiefgestellt, Absätze, Listen und Links. Im Editor eine Werkzeugleiste plus **HTML-Ansicht**; eingefügter Inhalt kommt als reiner Text an. **Gefiltert wird auf dem Server beim Speichern**, nicht im Editor und nicht beim Rendern – was in der Datenbank liegt, ist schon sicher. Nicht erlaubte Elemente werden ausgepackt, der Text bleibt; `script`, `style`, `iframe` und Verwandte werden samt Inhalt entfernt. Attribute fallen weg außer `href` nach Adressprüfung. Ältere Dokumente behalten Klartextsemantik und werden weiter maskiert.
|
||||
@@ -63,6 +65,8 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
|
||||
|
||||
- 201 PHP-Tests / 716 Assertions unter PHP 8.2.12 und 8.4.22 erfolgreich; zusätzlich 15 JavaScript-Modelltests, der vollständige Playwright-Editortest und die öffentliche Browserprüfung. Abgedeckt sind Migration/Erhaltung, Versionen, ungültige Geräte-/Typ-/Design-/Effektwerte, Vererbung/Reset/Undo, Vorlage-/Galerie-IDs, Uploadvalidierung und Neuencodierung, Metadatenkonflikte, Archivierung sowie sichere Bildquellen.
|
||||
- Neu geprüft (15 Tests): privater Entwurf nach dem Anlegen, verschachtelte Pfade mit gleichem Slug unter verschiedenen Eltern, abgewiesene Adressen (Großbuchstaben, Schrägstrich, leer, reserviert, unbekannter Typ, fehlendes Elternteil) ohne Schreibzugriff, doppelte Adresse, Tiefengrenze, Beiträge ohne Unterseiten, Löschen mit allen Revisionen samt Schutz für Elternseiten und veraltete Versionen, sowie dass die CMS-Routen nicht vom öffentlichen Auffangmuster verschluckt werden. Über HTTP zusätzlich: anonyme Schreibversuche, CSRF für Anlegen und Löschen, Adressableitung aus dem Titel, kein Löschangebot und HTTP 403 für die Editorrolle, erfolgreiches Löschen als Administrator.
|
||||
- Verwaltung geprüft: axe ohne Verstöße auf Anmeldung, Seitenübersicht und Editor (Desktop und Mobil), 201 PHP-Tests grün. **Nicht geprüft:** kein Screenreader, und die Bildschirme Menüs, Formulare, Bereiche, Design, Einstellungen und Fassungen sind nur von Hand angesehen, nicht automatisiert auf Barrierefreiheit geprüft – die Browserprüfung deckt sie nicht ab.
|
||||
- Verwaltung geprüft: axe ohne Verstöße auf Anmeldung, Seitenübersicht und Editor (Desktop und Mobil), alle PHP-Tests grün. **Nicht geprüft:** kein Screenreader, und die Bildschirme Menüs, Formulare, Bereiche, Design, Einstellungen und Fassungen habe ich nur im Browser angesehen – die automatische Barrierefreiheitsprüfung deckt sie nicht ab.
|
||||
- Eigener Code geprüft: fünf CSS-Formen werden korrekt auf das Element bezogen, darunter `& .block-text` mit erhaltenem Nachfahren-Leerzeichen. **Zehn abgewiesene CSS-Eingaben** erreichen kein Dokument: Ausbruch mit `}`, fremder Selektor, `@import`, `@media`, `javascript:`-Adresse, protokollrelative Adresse, Backslash-Escape, `expression()`, Eigenschaft ohne Wert und unsinniger Eigenschaftsname. Eigenes CSS erscheint im Seiten-Stylesheet, eigenes Skript **nur** als Datei mit `script-src 'self'` ausschließlich auf dieser Seite; eine Seite ohne eigenes Skript behält `script-src 'none'` und liefert keine Datei. Ein Skript aus einem unveröffentlichten Entwurf wird nicht ausgeliefert. Der Rollenvergleich weist Ändern, Entfernen und Hinzufügen eines Skripts ab und lässt unveränderte Skripte durch.
|
||||
- Formatierter Text geprüft: **dreizehn Fälle** durch den Filter, darunter erlaubte Auszeichnung und Listen, ein `script` samt Inhalt entfernt und der Text danach erhalten, Ereignisattribut entfernt, `class`/`style` entfernt und das Element ausgepackt, `javascript:`-Link zu Text geworden, Bild mit `onerror` entfernt, `iframe` entfernt, unausgeglichene Auszeichnung geschlossen, lokaler Link erhalten, externer Link mit `rel="noopener"`, Klartext maskiert und Umbruch zu `<br>`. Dazu: gefiltert wird beim Speichern (die Datenbank enthält schon die sichere Fassung), ein nach dem Filtern leerer Textblock wird abgewiesen ohne zu schreiben, ab v12 erscheint Auszeichnung als Auszeichnung in einem `div`, vor v12 maskiert in einem `p`, und in einem geteilten Bereich gilt derselbe Filter.
|
||||
- Bereiche geprüft: die eingesetzten Kopf- und Fußbereiche erscheinen als gewöhnliche Blöcke, der Navigationsblock zeigt das Menü, und eine Änderung am Kopfbereich erreicht beide Seiten gleichzeitig. Ein leerer Bereich rendert nichts statt einer kaputten Hülle. Verknüpfte Sektion geprüft: auf zwei Seiten sichtbar, die Seitendokumente enthalten nur die Adresse, eine Änderung wirkt an beiden Stellen, `usedBy` nennt beide Seiten, und nach dem Entfernen bleiben die Seiten heil und der Verweis erhalten. Abgewiesen werden: Hauptüberschrift in einem geteilten Bereich, Sektion mit Selbstbezug, zweiter Kopfbereich und das Löschen von Kopf- oder Fußbereich.
|
||||
@@ -128,7 +132,7 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
|
||||
|
||||
## Nächster konkreter Schritt
|
||||
|
||||
Paket G2, letzter Punkt: die Verwaltung neu gestalten – einfacher, schöner, ohne Anleitung bedienbar, mit Gestaltungsfreiheit. Dazu den Editor mit einem Screenreader prüfen. Danach der Rest von Arbeitspaket G (Inline-Ausbau, globale Bereiche für Header und Footer, wiederverwendbare Sektionen). Danach Arbeitspaket F aus `docs/AUSBAUPLAN.md`: Seiten umbenennen und verschieben mit Aktualisierung aller Kindpfade und automatischer Weiterleitung, frei wählbare Startseite, geplantes Veröffentlichen, Revisionsliste mit Wiederherstellung und ein Papierkorb statt sofortigem Löschen.
|
||||
Den Editor mit einem Screenreader prüfen und die übrigen Verwaltungsbildschirme in die automatische Barrierefreiheitsprüfung aufnehmen. Danach der Rest von Arbeitspaket G (Inline-Ausbau, globale Bereiche für Header und Footer, wiederverwendbare Sektionen). Danach Arbeitspaket F aus `docs/AUSBAUPLAN.md`: Seiten umbenennen und verschieben mit Aktualisierung aller Kindpfade und automatischer Weiterleitung, frei wählbare Startseite, geplantes Veröffentlichen, Revisionsliste mit Wiederherstellung und ein Papierkorb statt sofortigem Löschen.
|
||||
|
||||
`kant-it.de` ist seit 12.09.2026 als Pilotwebsite bestimmt. Der öffentliche Bestand wurde erhoben (WordPress 7.1, Flatsome 3.20.9 mit eigenem Child-Theme, WPForms Lite, Complianz, Google-Rezensionen, eigenes Plugin `kant-nova-chat`) und die noch offene Arbeit daraus in `docs/AUSBAUPLAN.md` in elf Arbeitspakete aufgeschlüsselt. Erhoben wurde ausschließlich die öffentlich ausgelieferte Startseite; ohne Backendzugang sind Beitragsbestand, Formularkonfiguration, Benutzer und Flatsome-Shortcodes nicht inventarisierbar. Keine externe Veröffentlichung erfolgt.
|
||||
|
||||
|
||||
+469
-82
@@ -1,93 +1,480 @@
|
||||
:root{font-family:Arial,Helvetica,sans-serif;color:#203b34;background:#f6f7f4;--ink:#203b34;--muted:#5a6861;--line:#dce2dc;--paper:#fff;--mint:#e5f0b6;--accent:#315b49;font-synthesis:none}
|
||||
.editor-page-name h1{font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
|
||||
.canvas-scroll:focus-visible{outline:3px solid #b55b12;outline-offset:-3px}
|
||||
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
|
||||
.media-launch{margin-top:12px;white-space:normal}.media-dialog{width:calc(100% - 32px);max-width:1100px;max-height:calc(100dvh - 32px);overflow:auto}.media-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.media-heading h2{margin:0}.media-heading .eyebrow{margin-bottom:8px}.media-tools{display:grid;grid-template-columns:1fr 1fr;gap:24px}.media-tools label{margin-top:10px}.media-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;align-content:start;max-height:430px;overflow:auto;padding:4px}.media-card{border:2px solid var(--line);border-radius:9px;padding:7px;background:white;color:var(--ink);display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0}.media-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}.media-card img{width:100%;height:115px;object-fit:cover;border-radius:5px}.media-card strong{font-size:12px;overflow-wrap:anywhere}.media-card span{font-size:11px;color:var(--muted)}.media-details{padding-left:22px;border-left:1px solid var(--line)}.media-details button,.media-details a{margin-top:12px;display:block}.media-details input{font-size:13px}.media-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;border-top:1px solid var(--line);padding-top:15px}.media-footer label{margin:0;font-size:12px}#media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}#media-status{font-size:12px;margin-block:15px}.media-dialog> .panel-hint{margin-top:20px}.media-details>p{font-size:12px}
|
||||
@media(max-width:650px){.media-dialog{padding:18px}.media-tools,.media-layout{grid-template-columns:1fr}.media-details{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.media-grid{max-height:280px;grid-template-columns:repeat(2,minmax(0,1fr))}.media-footer{align-items:stretch;flex-direction:column}.media-heading{gap:8px}}
|
||||
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,iframe:focus-visible{outline:3px solid #b55b12;outline-offset:3px}input,textarea,select{width:100%;border:1px solid #bcc9c0;border-radius:7px;background:#fff;color:var(--ink);padding:11px 12px;min-height:42px}textarea{resize:vertical;min-height:110px;line-height:1.6}label{display:block;margin:21px 0 8px;font-size:13px;font-weight:600}h1,h2,h3,p{margin-top:0}h1{font-size:38px;font-weight:500;letter-spacing:-1.5px;line-height:1.15}h2{font-size:18px;letter-spacing:-.4px}h3{font-size:16px}.muted{color:var(--muted);line-height:1.6}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--accent);margin-bottom:16px}.brand{display:inline-flex;align-items:center;font-size:25px;font-weight:700;text-decoration:none;letter-spacing:-1.3px;gap:3px}.brand>span:last-child{font-weight:400}.brand-icon{display:grid;place-items:center;width:33px;height:33px;background:var(--ink);color:var(--mint);border-radius:9px;margin-right:7px}.primary,.secondary,.subtle,.icon-button,.text-button,.block-actions button,.viewport-controls button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--line);border-radius:7px;padding:11px 15px;text-decoration:none;font-size:12px;font-weight:600;background:white;color:var(--ink);white-space:nowrap;min-height:40px}.primary{background:var(--ink);color:white;border-color:var(--ink)}.primary:hover:not(:disabled){background:#37604b}.secondary:hover:not(:disabled){background:#f0f4ed}.subtle,.text-button{border-color:transparent;background:transparent}.text-button{padding:4px 8px;min-height:28px}.full-width{width:100%}.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:var(--ink);color:white;padding:15px}.skip-link:focus{top:10px}.notice,.editor-message{padding:14px 18px;border-radius:7px;line-height:1.6;font-size:13px}.error{background:#fff0eb;color:#8b2f22;border:1px solid #e2b2a7}.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at top left,#e5f0b6,transparent 65%),#f6f7f4;padding:30px}.login-card{width:100%;max-width:450px;padding:44px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px #203b3408}.login-card .brand{margin-bottom:44px}.login-card h1{font-size:31px}.login-card .primary{margin-top:26px}.quiet-link{display:block;font-size:12px;text-align:center;margin-top:25px}.admin-header{padding:24px 42px;background:white;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.header-actions{display:flex;align-items:center;gap:24px;font-size:12px}.user-name{padding-left:24px;border-left:1px solid var(--line)}.pages-main{max-width:1120px;margin:74px auto;padding:0 30px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:50px;margin-bottom:20px}.section-heading h2{margin:0}.section-heading>span{font-size:12px}.count{font-size:12px;background:#e5ebdf;padding:4px 8px;border-radius:6px;margin-left:8px}.page-list{display:grid;gap:13px}.page-card{display:flex;gap:20px;align-items:center;background:white;padding:24px;border:1px solid var(--line);border-radius:10px}.page-icon{font-size:25px;width:44px;height:50px;background:#f0f4e9;border-radius:8px;display:grid;place-items:center}.page-info{flex:1;min-width:0}.page-info h3{margin:0 0 9px}.page-info h3 a{text-decoration:none}.page-info p{font-size:12px;color:var(--muted);margin:0}.badge{font-size:10px;letter-spacing:.2px;background:#fff0d5;color:#78551d;padding:7px 10px;border-radius:20px;white-space:nowrap}.published{background:#edf3dc;color:#315b49}.footnote{font-size:11px;color:var(--muted);margin-top:27px}.empty-state{padding:35px;border:1px dashed var(--line);border-radius:10px}.editor-body{overflow:hidden}#editor{height:100dvh;display:flex;flex-direction:column}.editor-header{display:flex;align-items:center;gap:20px;min-height:76px;padding:13px 20px;border-bottom:1px solid var(--line);background:white;z-index:1}.back-link{display:flex;gap:9px;text-decoration:none;font-size:12px;padding-right:20px;border-right:1px solid var(--line)}.editor-page-name{min-width:0;flex:1;display:grid;gap:5px}.editor-page-name strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.editor-page-name>span{font-size:10px;color:var(--muted)}.history-actions,.save-actions{display:flex;align-items:center;gap:8px}.icon-button{font-size:21px;min-width:36px;padding:3px 9px}.save-actions>span{font-size:10px;color:var(--muted);max-width:130px;margin-right:8px}.editor-layout{display:grid;grid-template-columns:258px minmax(200px,1fr) 280px;flex:1;min-height:0}Line truncated
|
||||
@media(max-width:1150px){.editor-layout{grid-template-columns:215px minmax(200px,1fr) 240px}.editor-header{gap:12px;padding-inline:14px}.save-actions>span{display:none}.panel-section{padding:18px 14px}.canvas-scroll{padding:12px}.canvas-label{display:none}}
|
||||
@media(max-width:850px){.editor-body{overflow:auto}#editor{height:auto;min-height:100dvh}.editor-header{flex-wrap:wrap}.editor-page-name{min-width:180px}.save-actions{width:100%;justify-content:flex-end}.save-actions>span{display:block;margin-right:auto}.editor-layout{display:flex;flex-wrap:wrap}.canvas-panel{order:0;width:100%;height:680px}.left-panel{order:1;width:45%;max-height:650px}.right-panel{order:2;width:55%;max-height:650px}.canvas-label{display:block}.admin-header{padding:20px}.header-actions{gap:12px}.header-actions .user-name{display:none}.page-card{flex-wrap:wrap;padding:18px;gap:14px}.page-info{min-width:180px}.pages-main{margin:40px auto;padding:0 20px}.section-heading{align-items:flex-start;flex-direction:column}.login-card{padding:30px}.login-body{padding:20px}.editor-header .back-link{padding-right:12px}.editor-message{font-size:11px}.editor-layout .panel-hint{font-size:10px}}
|
||||
@media(prefers-reduced-motion:no-preference){button,a{transition:background-color .12s,border-color .12s}}
|
||||
.left-panel{display:flex;flex-direction:column;overflow:hidden}.left-panel>.panel-section:first-child{max-height:45%;overflow:auto;flex-shrink:0}.structure-section{display:flex;flex-direction:column;flex:1;min-height:0}.structure-section #structure{overflow:auto;flex:1;min-height:90px;padding:3px}.structure-section .block-actions{flex-shrink:0;background:white}.structure-section .panel-hint{margin:8px 0}.search-label{font-size:11px;margin:12px 0 6px}#tree-search{font-size:11px;padding:9px;min-height:36px}.tree-tools{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}.tree-tools .text-button{font-size:10px;padding:5px}.structure-list li{position:relative}.tree-item{padding-left:23px}.tree-toggle{position:absolute;top:5px;left:0;width:22px;height:25px;z-index:1;border:0;background:transparent;color:var(--ink);border-radius:4px}.preset-heading{font-size:12px;margin:22px 0 8px}.preset-library{display:grid;gap:6px}.preset-library button{display:flex;gap:10px;text-align:left;align-items:center;min-height:40px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:#f7f9f2;color:var(--ink);font-size:11px}.preset-library button:hover:not(:disabled){border-color:var(--accent)}.preset-library span{font-size:18px}.property-tabs{display:flex;background:#edf1e7;padding:4px;border-radius:8px;gap:4px}.property-tabs button{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);border-radius:6px;padding:10px;font-size:12px;font-weight:600}.property-tabs [aria-pressed=true]{background:white;box-shadow:0 1px 3px #0001}.design-scope{font-size:12px;font-weight:600;line-height:1.6;margin:18px 0 8px;padding:10px;border-left:3px solid var(--accent);background:#f1f5e7}.design-reset{margin-top:24px;white-space:normal;width:100%}.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-height:35px;padding:3px 14px;background:#f6f8f2;border-top:1px solid var(--line)}.breadcrumbs .text-button{font-size:10px;white-space:normal}.breadcrumbs button+button:before{content:'›';color:var(--muted)}.breadcrumbs [aria-current=location]{font-weight:700;background:#e5edda}.canvas-scroll{display:block}.canvas-scroll #preview-stage{position:relative;margin:0 auto}#preview{position:absolute;top:0;left:0;transform-origin:top left;max-width:none;min-height:0}.right-panel select{padding-inline:7px;text-overflow:ellipsis}.right-panel .panel-section{min-width:0}
|
||||
@media(max-width:850px){.left-panel,.right-panel{height:650px}.left-panel>.panel-section:first-child{max-height:40%}.structure-section{padding:12px 7px}.tree-item{font-size:10px;gap:3px}.tree-icon{min-width:10px}.structure-list .structure-list{padding-left:5px;margin-left:4px}.block-actions button{padding:6px;white-space:normal}.property-tabs button{padding:9px 4px;font-size:11px}.canvas-scroll{padding:12px}.right-panel label{line-height:1.5}.tree-tools .text-button{white-space:normal}}
|
||||
/* Administration: shared foundation and the management screens.
|
||||
The editor has its own stylesheet (editor.css) that only the editor and the media page load. */
|
||||
|
||||
.notice.ok{background:#edf3dc;color:#315b49;border:1px solid #c5d89a}.notice{margin-top:24px}.create-panel{margin-top:34px;background:white;border:1px solid var(--line);border-radius:10px}.create-panel>summary{padding:20px 24px;font-size:13px;font-weight:600;cursor:pointer;border-radius:10px}.create-panel[open]>summary{border-bottom:1px solid var(--line)}.create-form{padding:6px 24px 26px}.create-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 24px}.create-form .primary{margin-top:24px}.create-form code{background:#f0f4e9;padding:1px 5px;border-radius:4px}.delete-panel>summary{font-size:12px;font-weight:600;color:#943a2e;cursor:pointer;padding:11px 13px;border:1px solid var(--line);border-radius:7px;list-style:none}.delete-panel[open]{position:relative}.delete-panel[open]>form{position:absolute;right:0;top:calc(100% + 8px);z-index:2;width:290px;background:white;border:1px solid var(--line);border-radius:10px;padding:18px;box-shadow:0 14px 40px #203b3422}.delete-panel p{font-size:12px;line-height:1.6;color:var(--muted)}
|
||||
@media (max-width:720px){.page-card{flex-wrap:wrap}.pages-main{margin-block:40px}.delete-panel[open]>form{position:static;width:100%;box-shadow:none;margin-top:10px}}
|
||||
:root {
|
||||
/* One family of greens. The sidebar is the dark end of it, so the administration reads as one
|
||||
place instead of a set of forms. */
|
||||
--ink: #1b2a24;
|
||||
--muted: #5d6b64;
|
||||
--line: #e2e7e1;
|
||||
--paper: #fff;
|
||||
--ground: #f3f5f1;
|
||||
--shell: #16241e;
|
||||
--shell-ink: #e7eee8;
|
||||
--shell-muted: #9fb0a6;
|
||||
--mint: #e5f0b6;
|
||||
--accent: #2c6b4f;
|
||||
--ring: #b55b12;
|
||||
--danger: #8b2f22;
|
||||
/* System fonts: nothing to download, and the administration looks native on the machine it
|
||||
runs on. Google Fonts are for the website itself, where Umut picks them. */
|
||||
font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
||||
color: var(--ink);
|
||||
background: var(--ground);
|
||||
font-synthesis: none;
|
||||
}
|
||||
|
||||
.admin-links{display:flex;flex-wrap:wrap;gap:10px;margin:0}.menu-section{margin-top:46px}.menu-form{background:white;border:1px solid var(--line);border-radius:10px;padding:8px 24px 26px}.menu-form>label:first-of-type{margin-top:18px}.menu-form>input[name=name]{max-width:420px}.menu-table{width:100%;border-collapse:collapse;margin-top:24px;display:block;overflow-x:auto}.menu-table th{text-align:left;font-size:11px;letter-spacing:.4px;color:var(--muted);padding:0 8px 8px;font-weight:700;white-space:nowrap}.menu-table td{padding:4px 8px 4px 0;vertical-align:top}.menu-table input,.menu-table select{font-size:12px;min-height:38px;padding:8px 10px}.menu-table td:first-child input{width:78px}.menu-table td:nth-child(2) select{width:140px}.menu-table td:nth-child(3) input{min-width:170px}.menu-table td:nth-child(4) select{width:104px}.menu-table td:nth-child(5) select{min-width:190px}.menu-table td:nth-child(6) input{width:130px}.menu-table td:nth-child(7) input{min-width:190px}.menu-row-new input,.menu-row-new select{background:#fafbf8}.menu-form .primary{margin-top:20px}.menu-form code{background:#f0f4e9;padding:1px 5px;border-radius:4px}
|
||||
* { box-sizing: border-box }
|
||||
body { margin: 0 }
|
||||
a { color: inherit; text-underline-offset: 4px }
|
||||
button, input, select, textarea { font: inherit }
|
||||
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent }
|
||||
button { cursor: pointer }
|
||||
button:disabled { cursor: default; opacity: .48 }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
|
||||
textarea:focus-visible, summary:focus-visible, iframe:focus-visible {
|
||||
outline: 3px solid var(--ring);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
h1, h2, h3, p { margin-top: 0 }
|
||||
h1 { font-size: 27px; font-weight: 650; letter-spacing: -.7px; line-height: 1.2; margin-bottom: 0 }
|
||||
h2 { font-size: 17px; letter-spacing: -.3px }
|
||||
h3 { font-size: 15px }
|
||||
[hidden] { display: none !important }
|
||||
|
||||
.meta-panel>summary{font-size:12px;font-weight:600;cursor:pointer;padding:11px 13px;border:1px solid var(--line);border-radius:7px;list-style:none}.meta-panel[open]{position:relative}.meta-panel[open]>form{position:absolute;right:0;top:calc(100% + 8px);z-index:3;width:330px;background:white;border:1px solid var(--line);border-radius:10px;padding:6px 20px 22px;box-shadow:0 14px 40px #203b3422}.meta-panel form label{margin-top:16px}.meta-panel .primary{margin-top:20px;width:100%}.meta-panel textarea{min-height:74px;font-size:12px}.meta-panel input{font-size:12px}
|
||||
@media (max-width:720px){.meta-panel[open]>form{position:static;width:100%;box-shadow:none;margin-top:10px}}
|
||||
.muted { color: var(--muted); line-height: 1.6 }
|
||||
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.7px; color: var(--accent); margin-bottom: 14px }
|
||||
.footnote { font-size: 11px; color: var(--muted); margin: 34px 0 0 }
|
||||
.count { font-size: 12px; font-weight: 600; color: var(--muted) }
|
||||
.danger-text { color: var(--danger) }
|
||||
.visually-hidden {
|
||||
position: absolute; width: 1px; height: 1px; padding: 0;
|
||||
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
|
||||
}
|
||||
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--ink); color: #fff; padding: 15px }
|
||||
.skip-link:focus { top: 10px }
|
||||
|
||||
.submission-card{align-items:flex-start}.submission-data{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:12px 0 0;font-size:12px}.submission-data dt{font-weight:600;color:var(--muted)}.submission-data dd{margin:0;overflow-wrap:anywhere}.menu-table .check-cell{text-align:center}.menu-table .check-cell input{width:18px;min-height:18px}
|
||||
/* ---- fields ---------------------------------------------------------------------------- */
|
||||
|
||||
.redirect-table{margin-top:26px}.redirect-table td{padding:8px 12px 8px 0;font-size:12px}.redirect-table form{margin:0}
|
||||
input, textarea, select {
|
||||
width: 100%;
|
||||
border: 1px solid #c3cec7;
|
||||
border-radius: 8px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
padding: 10px 12px;
|
||||
min-height: 42px;
|
||||
}
|
||||
input:hover, textarea:hover, select:hover { border-color: #a9b8af }
|
||||
textarea { resize: vertical; min-height: 110px; line-height: 1.6 }
|
||||
label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600 }
|
||||
.field-help { font-size: 11px; line-height: 1.55; color: var(--muted); margin: 7px 0 0 }
|
||||
.field-help code, .card code { background: #eef2ea; padding: 1px 5px; border-radius: 4px; font-size: .95em }
|
||||
.check-label { display: flex; align-items: center; gap: 8px; font-weight: 500 }
|
||||
.check-label input { width: 16px; min-height: 16px }
|
||||
/* A grid of fields that becomes one column when there is no room. */
|
||||
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px }
|
||||
.fields > div > label:first-child, .field > label:first-child { margin-top: 14px }
|
||||
|
||||
/* Design panel: free values instead of fixed lists. */
|
||||
.design-group{border:1px solid var(--line);border-radius:9px;margin-top:10px;background:#fff}
|
||||
.design-group>summary{cursor:pointer;padding:12px 14px;font-size:12px;font-weight:700;letter-spacing:.3px;list-style:none;display:flex;justify-content:space-between;align-items:center}
|
||||
.design-group>summary::after{content:'+';font-size:17px}
|
||||
.design-group[open]>summary{border-bottom:1px solid var(--line)}
|
||||
.design-group[open]>summary::after{content:'–'}
|
||||
.design-group-body{padding:6px 14px 16px}
|
||||
.design-group-label{font-size:11px;font-weight:700;color:var(--muted);margin:18px 0 6px;letter-spacing:.3px}
|
||||
.design-row{margin-top:14px}
|
||||
.design-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
|
||||
.design-row-head label{margin:0;font-size:11px}
|
||||
.design-own .design-row-head label{color:#2f5d4a;font-weight:700}
|
||||
.design-own .design-row-head label::before{content:'● ';color:var(--accent)}
|
||||
.design-reset-one{font-size:14px;padding:2px 6px;min-height:24px;line-height:1}
|
||||
.design-inherited{font-size:10px;color:var(--muted);margin:5px 0 0;line-height:1.45}
|
||||
.color-control{display:grid;grid-template-columns:38px 1fr;gap:6px;align-items:center}
|
||||
.color-control input[type=color]{padding:2px;min-height:38px;width:38px;border-radius:6px;cursor:pointer}
|
||||
.color-control .color-text{font-size:12px;min-height:38px}
|
||||
.color-control .color-palette{grid-column:1 / -1;font-size:11px;min-height:34px}
|
||||
.length-control{display:grid;grid-template-columns:1fr 74px;gap:6px}
|
||||
.length-control input,.length-control select{font-size:12px;min-height:38px}
|
||||
.length-control.is-inherited input{color:var(--muted)}
|
||||
.number-control{display:grid;grid-template-columns:1fr 74px;gap:8px;align-items:center}
|
||||
.number-control input[type=range]{width:100%;min-height:24px;padding:0;accent-color:#437754}
|
||||
.number-control input[type=number]{font-size:12px;min-height:38px}
|
||||
.side-wrap{margin-bottom:6px}
|
||||
.side-control{display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.side-cell label{margin:0 0 4px;font-size:10px;color:var(--muted)}
|
||||
.side-all{font-size:10px;margin-top:8px;padding:4px 6px}
|
||||
.design-actions{display:grid;gap:8px;margin-top:22px}
|
||||
.design-actions button{width:100%}
|
||||
/* ---- buttons --------------------------------------------------------------------------- */
|
||||
|
||||
.theme-form .theme-swatch{width:52px;min-height:38px;padding:2px;cursor:pointer}
|
||||
.theme-form .weights-cell{white-space:nowrap}
|
||||
.theme-form .weights-cell label{display:inline-flex;align-items:center;gap:3px;margin:0 8px 0 0;font-size:10px;font-weight:400}
|
||||
.theme-form .weights-cell input{width:14px;min-height:14px}
|
||||
.primary, .secondary, .subtle, .text-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 10px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
white-space: nowrap;
|
||||
min-height: 40px;
|
||||
}
|
||||
.primary { background: var(--accent); color: #fff; border-color: var(--accent) }
|
||||
.primary:hover:not(:disabled) { background: #22553e }
|
||||
.secondary:hover:not(:disabled) { background: #eef2ea; border-color: #cfd8d1 }
|
||||
.subtle, .text-button { border-color: transparent; background: transparent }
|
||||
.subtle:hover:not(:disabled) { background: #e8ede6 }
|
||||
.text-button { padding: 4px 8px; min-height: 28px; font-size: 12px }
|
||||
.full-width { width: 100% }
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
button, a, summary { transition: background-color .12s, border-color .12s, color .12s }
|
||||
}
|
||||
|
||||
.contrast-note{margin:16px 0 0;padding:10px 12px;border-radius:7px;font-size:11px;line-height:1.5;font-weight:600}
|
||||
.contrast-ok{background:#edf3dc;color:#315b49;border:1px solid #c5d89a}
|
||||
.contrast-warn{background:#fff6e2;color:#78551d;border:1px solid #e6cf9c}
|
||||
.contrast-bad{background:#fff0eb;color:#8b2f22;border:1px solid #e2b2a7}
|
||||
.media-control{display:grid;gap:8px}
|
||||
.media-chosen{margin:0;font-size:11px;color:var(--muted)}
|
||||
.design-reuse{display:grid;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
|
||||
.design-reuse button,.design-reuse select{width:100%}
|
||||
#preset-dialog label{margin-top:18px}
|
||||
#preset-dialog .field-error{margin:10px 0 0;font-size:12px;color:#8b2f22;font-weight:600}
|
||||
/* ---- the shell: one sidebar, always the same, so every screen is one click away --------- */
|
||||
|
||||
.page-card.depth-1{margin-left:28px}.page-card.depth-2{margin-left:56px}.page-card.depth-3{margin-left:84px}
|
||||
.admin-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100dvh }
|
||||
|
||||
/* Formatted text: toolbar, editing surface and HTML view. */
|
||||
.rich-text{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
|
||||
.rt-bar{display:flex;flex-wrap:wrap;gap:2px;padding:5px;border-bottom:1px solid var(--line);background:#fafbf8}
|
||||
.rt-button{min-width:30px;min-height:30px;padding:2px 7px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink);font-size:12px;line-height:1}
|
||||
.rt-button:hover{background:#eef2e7;border-color:var(--line)}
|
||||
.rt-toggle{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.5px}
|
||||
.rt-toggle[aria-pressed=true]{background:var(--ink);color:#fff}
|
||||
.rt-link{display:flex;gap:6px;padding:6px;border-bottom:1px solid var(--line);background:#fff6e2}
|
||||
.rt-link input{font-size:11px;min-height:30px}
|
||||
.rt-surface{min-height:120px;max-height:340px;overflow:auto;padding:11px 12px;font-size:13px;line-height:1.65}
|
||||
.rt-surface:focus-visible{outline:2px solid #b55b12;outline-offset:-2px}
|
||||
.rt-surface ul,.rt-surface ol{margin:0 0 8px;padding-left:20px}
|
||||
.rt-surface a{color:#a4510f}
|
||||
.rt-source{min-height:150px;border:0;border-radius:0;font-family:ui-monospace,monospace;font-size:12px;line-height:1.6}
|
||||
.shell-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 20px 14px;
|
||||
background: var(--shell);
|
||||
color: var(--shell-ink);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100dvh;
|
||||
overflow: auto;
|
||||
}
|
||||
.shell-nav .brand { color: #fff; margin: 4px 6px 22px }
|
||||
.shell-nav .brand-icon { background: var(--mint); color: var(--shell) }
|
||||
.nav-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.6px;
|
||||
color: var(--shell-muted);
|
||||
margin: 18px 8px 7px;
|
||||
}
|
||||
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 9px 10px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
color: var(--shell-ink);
|
||||
}
|
||||
.nav-item:hover { background: #21362d }
|
||||
.nav-item[aria-current=page] { background: #2b4a3b; color: #fff; font-weight: 650 }
|
||||
.nav-item[aria-current=page] .nav-icon { color: var(--mint) }
|
||||
.nav-icon { width: 19px; text-align: center; font-size: 14px; color: var(--shell-muted); flex-shrink: 0 }
|
||||
.nav-out::after { content: '↗'; margin-left: auto; color: var(--shell-muted); font-size: 11px }
|
||||
|
||||
/* Own CSS and own script per element. */
|
||||
.own-code{font-family:ui-monospace,monospace;font-size:12px;line-height:1.6;min-height:110px}
|
||||
.own-code[readonly]{background:#f4f5f1;color:var(--muted)}
|
||||
.shell-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid #2a3d35; display: grid; gap: 6px }
|
||||
.shell-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12px }
|
||||
.shell-user strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
||||
.shell-avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 50%;
|
||||
background: #2b4a3b;
|
||||
color: var(--mint);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.shell-foot form { margin: 0 }
|
||||
.shell-foot button {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
color: var(--shell-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
min-height: 34px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
.shell-foot button:hover { background: #21362d; color: var(--shell-ink) }
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
letter-spacing: -1.1px;
|
||||
gap: 2px;
|
||||
}
|
||||
.brand > span:last-child { font-weight: 400 }
|
||||
.brand-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 31px; height: 31px;
|
||||
background: var(--ink);
|
||||
color: var(--mint);
|
||||
border-radius: 9px;
|
||||
margin-right: 7px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* ---- the screen itself ----------------------------------------------------------------- */
|
||||
|
||||
.shell-main { min-width: 0; display: flex; flex-direction: column }
|
||||
.shell-top {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 20px 30px;
|
||||
flex-wrap: wrap;
|
||||
padding: 30px 38px 24px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--paper);
|
||||
}
|
||||
.shell-heading { min-width: 0 }
|
||||
.shell-heading p { font-size: 13px; margin: 7px 0 0; max-width: 62ch }
|
||||
.shell-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
|
||||
.shell-body { padding: 30px 38px 60px; max-width: 1180px; width: 100% }
|
||||
.stack { display: grid; gap: 20px }
|
||||
|
||||
.notice { padding: 13px 17px; border-radius: 8px; line-height: 1.6; font-size: 13px; margin: 0 }
|
||||
.notice.ok { background: #edf3dc; color: #2c5340; border: 1px solid #c5d89a }
|
||||
.error, .notice.error { background: #fff0eb; color: var(--danger); border: 1px solid #e2b2a7 }
|
||||
.shell-body > .notice { margin-bottom: 4px }
|
||||
|
||||
/* ---- cards and sections ---------------------------------------------------------------- */
|
||||
|
||||
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px }
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px 20px;
|
||||
flex-wrap: wrap;
|
||||
padding: 19px 22px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.card-head h2, .card-head h3 { margin: 0 }
|
||||
.card-head .muted { font-size: 12px }
|
||||
.card-body { padding: 8px 22px 24px }
|
||||
/* A heading for a group of rows, outside any card. */
|
||||
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: 16px 2px -6px }
|
||||
.section-head h2 { margin: 0 }
|
||||
.section-head .muted { font-size: 12px }
|
||||
.card-body > p:first-child { margin-top: 14px }
|
||||
.card-body .primary, .card-body .secondary { margin-top: 22px }
|
||||
.card-foot { padding: 16px 22px; border-top: 1px solid var(--line); background: #fafbf8; border-radius: 0 0 12px 12px }
|
||||
|
||||
/* A card that opens: used for everything secondary, so a screen starts calm. */
|
||||
details.card > summary {
|
||||
padding: 17px 22px;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
details.card > summary::before { content: '+'; color: var(--accent); font-size: 16px; width: 12px }
|
||||
details.card[open] > summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0 }
|
||||
details.card[open] > summary::before { content: '–' }
|
||||
details.card > summary:hover { background: #fafbf8 }
|
||||
|
||||
/* ---- rows: one line per page, menu, area or file ---------------------------------------- */
|
||||
|
||||
.rows { display: grid; gap: 9px }
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
padding: 14px 18px;
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 11px;
|
||||
}
|
||||
.row-top { align-items: flex-start }
|
||||
/* A row that carries its own disclosure is a stack, not a line. */
|
||||
.row-stack { display: block; padding: 0 }
|
||||
.row-line { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap }
|
||||
.row-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 38px; height: 38px;
|
||||
border-radius: 9px;
|
||||
background: #eef3e7;
|
||||
color: var(--accent);
|
||||
font-size: 17px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.row-main { flex: 1; min-width: 170px }
|
||||
.row-main h3 { margin: 0; font-size: 14px; font-weight: 650 }
|
||||
.row-main h3 a { text-decoration: none }
|
||||
.row-main h3 a:hover { text-decoration: underline }
|
||||
.row-main p { margin: 4px 0 0; font-size: 12px; color: var(--muted) }
|
||||
.row-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap }
|
||||
.row-actions .secondary, .row-actions .text-button { font-size: 12px; padding: 8px 12px; min-height: 36px }
|
||||
/* The hierarchy of the page tree. A class, not a style attribute: the administration forbids
|
||||
inline styles, so an attribute would be dropped and the tree would look flat. */
|
||||
.row.depth-1 { margin-left: 26px }
|
||||
.row.depth-2 { margin-left: 52px }
|
||||
.row.depth-3 { margin-left: 78px }
|
||||
|
||||
.pill {
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
padding: 5px 11px;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
background: #eef2ea;
|
||||
color: #4a5751;
|
||||
}
|
||||
.pill-live { background: #e7f0d6; color: #2c5340 }
|
||||
.pill-draft { background: #fff2d9; color: #6f4e18 }
|
||||
.pill-off { background: #f1f2f0; color: #5a635e }
|
||||
|
||||
/* The per-row settings. One disclosure that opens in place, instead of six competing popovers
|
||||
that clip each other at the edge of the card. */
|
||||
.sheet { border-top: 1px solid var(--line) }
|
||||
.row > .sheet:first-of-type { border-top: 0 }
|
||||
.sheet > summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
padding: 11px 18px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.sheet > summary::before { content: '⚙'; font-size: 13px }
|
||||
.sheet > summary:hover { color: var(--ink); background: #fafbf8 }
|
||||
.sheet[open] > summary { color: var(--ink); border-bottom: 1px solid var(--line) }
|
||||
.sheet-body { padding: 4px 18px 22px; background: #fafbf8; border-radius: 0 0 11px 11px }
|
||||
.sheet-body form { margin: 0 }
|
||||
.sheet-part { padding-top: 14px; margin-top: 18px; border-top: 1px solid var(--line) }
|
||||
.sheet-part:first-child { padding-top: 0; margin-top: 0; border-top: 0 }
|
||||
.sheet-part > h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .3px }
|
||||
.sheet-part > p { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 7px 0 0 }
|
||||
.sheet-part .primary, .sheet-part .secondary { margin-top: 18px }
|
||||
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
|
||||
.sheet-actions form { margin: 0 }
|
||||
|
||||
/* ---- tables ---------------------------------------------------------------------------- */
|
||||
|
||||
/* A table scrolls sideways instead of pushing the card out of the screen. As a block it also
|
||||
stops stretching its columns to the full width. */
|
||||
.table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; font-size: 13px }
|
||||
.table th {
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
letter-spacing: .4px;
|
||||
color: var(--muted);
|
||||
padding: 0 10px 9px 0;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table td { padding: 5px 10px 5px 0; vertical-align: top }
|
||||
.table tbody tr + tr td { border-top: 1px solid #eef1ed }
|
||||
.table input, .table select { font-size: 12px; min-height: 38px; padding: 8px 10px }
|
||||
.table .check-cell { text-align: center }
|
||||
.table .check-cell input { width: 18px; min-height: 18px }
|
||||
.table-new input, .table-new select { background: #fafbf8 }
|
||||
.table form { margin: 0 }
|
||||
/* Column widths per screen: the two tables carry different things. */
|
||||
.menu-table td:first-child input { width: 82px }
|
||||
.menu-table td:nth-child(2) select { width: 148px }
|
||||
.menu-table td:nth-child(3) input { min-width: 170px }
|
||||
.menu-table td:nth-child(4) select { width: 108px }
|
||||
.menu-table td:nth-child(5) select { min-width: 190px }
|
||||
.menu-table td:nth-child(6) input { width: 130px }
|
||||
.menu-table td:nth-child(7) input { min-width: 190px }
|
||||
.field-table td:first-child input { width: 140px }
|
||||
.field-table td:nth-child(2) select { width: 150px }
|
||||
.field-table td:nth-child(3) input { min-width: 170px }
|
||||
.field-table td:nth-child(5) input { min-width: 180px }
|
||||
.field-table td:nth-child(6) input { min-width: 170px }
|
||||
.theme-table td input { width: 190px }
|
||||
.theme-table td select { width: 150px }
|
||||
.theme-table td input[type=color] { width: 52px }
|
||||
.theme-table .weights-cell { white-space: nowrap }
|
||||
.redirect-table td { padding: 8px 12px 8px 0; font-size: 12px }
|
||||
/* Headings inside a card separate its parts without a second border. */
|
||||
.card-body .section-head { margin: 28px 0 12px }
|
||||
.card-body .section-head:first-child { margin-top: 14px }
|
||||
.card-body > .primary, .card-body > .secondary { margin-top: 24px }
|
||||
|
||||
/* A screen made of several equal sections (menu slots, form definitions). */
|
||||
.stack-section { display: grid; gap: 10px }
|
||||
.menu-form > label:first-of-type, .form-def > label:first-of-type { margin-top: 16px }
|
||||
.menu-form > input[name=name] { max-width: 420px }
|
||||
.menu-form .table, .form-def .table { margin-top: 22px }
|
||||
.menu-form .primary, .form-def .primary { margin-top: 20px }
|
||||
|
||||
.empty {
|
||||
padding: 34px;
|
||||
border: 1px dashed #cfd8d1;
|
||||
border-radius: 12px;
|
||||
background: var(--paper);
|
||||
text-align: center;
|
||||
}
|
||||
.empty h3 { margin-bottom: 8px }
|
||||
.empty p { margin: 0; font-size: 13px; color: var(--muted) }
|
||||
|
||||
/* ---- contrast hints on the design screen ----------------------------------------------- */
|
||||
|
||||
.contrast-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 7px; font-size: 12px; line-height: 1.5; font-weight: 600 }
|
||||
.contrast-ok { background: #edf3dc; color: #2c5340; border: 1px solid #c5d89a }
|
||||
.contrast-warn { background: #fff6e2; color: #6f4e18; border: 1px solid #e6cf9c }
|
||||
.contrast-bad { background: #fff0eb; color: var(--danger); border: 1px solid #e2b2a7 }
|
||||
.theme-form .theme-swatch { width: 52px; min-height: 38px; padding: 2px; cursor: pointer }
|
||||
.theme-form .weights-cell { white-space: nowrap }
|
||||
.theme-form .weights-cell label { display: inline-flex; align-items: center; gap: 4px; margin: 0 9px 0 0; font-size: 11px; font-weight: 400 }
|
||||
.theme-form .weights-cell input { width: 14px; min-height: 14px }
|
||||
|
||||
/* ---- submissions ----------------------------------------------------------------------- */
|
||||
|
||||
.submission-data { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 0; font-size: 12px }
|
||||
.submission-data dt { font-weight: 600; color: var(--muted) }
|
||||
.submission-data dd { margin: 0; overflow-wrap: anywhere }
|
||||
|
||||
/* ---- login ----------------------------------------------------------------------------- */
|
||||
|
||||
.login-body {
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: radial-gradient(ellipse at 20% 0%, #dfeab0, transparent 60%), var(--ground);
|
||||
padding: 30px;
|
||||
}
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
padding: 40px;
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px #1b2a2411;
|
||||
}
|
||||
.login-card .brand { margin-bottom: 38px }
|
||||
.login-card h1 { font-size: 26px }
|
||||
.login-card .muted { font-size: 14px; margin-top: 8px }
|
||||
.login-card .primary { margin-top: 26px }
|
||||
.login-card .notice { margin: 22px 0 0 }
|
||||
.quiet-link { display: block; font-size: 12px; text-align: center; margin-top: 24px; color: var(--muted) }
|
||||
|
||||
/* ---- narrow screens: the sidebar becomes a strip above the content --------------------- */
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.admin-shell { grid-template-columns: 1fr }
|
||||
.shell-nav {
|
||||
position: static;
|
||||
height: auto;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
gap: 6px;
|
||||
padding: 11px 14px;
|
||||
}
|
||||
.shell-nav .brand { margin: 0 10px 0 0; font-size: 0 }
|
||||
.shell-nav .brand-icon { margin: 0; font-size: 15px }
|
||||
.nav-label { display: none }
|
||||
.nav-list { display: flex; gap: 4px }
|
||||
.nav-item { white-space: nowrap; padding: 8px 12px }
|
||||
.shell-foot { margin: 0 0 0 auto; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid #2a3d35; display: flex; align-items: center }
|
||||
.shell-user strong { display: none }
|
||||
.shell-foot button { width: auto }
|
||||
.shell-top { padding: 22px 20px 18px }
|
||||
.shell-body { padding: 20px 20px 48px }
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
h1 { font-size: 23px }
|
||||
.row-line { padding: 13px 14px; gap: 10px }
|
||||
.row-actions { width: 100%; justify-content: flex-start }
|
||||
.card-head, .sheet > summary { padding-inline: 16px }
|
||||
.card-body, .sheet-body { padding-inline: 16px }
|
||||
.row.depth-1, .row.depth-2, .row.depth-3 { margin-left: 14px }
|
||||
.login-card { padding: 26px }
|
||||
.login-body { padding: 16px }
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
/* The editor and the media library. Only the editor and the media screen load this; the
|
||||
management screens get by with admin.css alone. Rules moved out of admin.css unchanged. */
|
||||
dialog{max-width:450px;width:calc(100% - 40px);padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);box-shadow:0 20px 80px #1b2a2433}
|
||||
dialog::backdrop{background:#172e2966}
|
||||
dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
|
||||
.editor-page-name h1{font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
|
||||
.canvas-scroll:focus-visible{outline:3px solid #b55b12;outline-offset:-3px}
|
||||
|
||||
.media-launch{margin-top:12px;white-space:normal}
|
||||
.media-dialog{width:calc(100% - 32px);max-width:1100px;max-height:calc(100dvh - 32px);overflow:auto}
|
||||
.media-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}
|
||||
.media-heading h2{margin:0}
|
||||
.media-heading .eyebrow{margin-bottom:8px}
|
||||
.media-tools{display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
||||
.media-tools label{margin-top:10px}
|
||||
.media-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
|
||||
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;align-content:start;max-height:430px;overflow:auto;padding:4px}
|
||||
.media-card{border:2px solid var(--line);border-radius:9px;padding:7px;background:white;color:var(--ink);display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0}
|
||||
.media-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}
|
||||
.media-card img{width:100%;height:115px;object-fit:cover;border-radius:5px}
|
||||
.media-card strong{font-size:12px;overflow-wrap:anywhere}
|
||||
.media-card span{font-size:11px;color:var(--muted)}
|
||||
.media-details{padding-left:22px;border-left:1px solid var(--line)}
|
||||
.media-details button,.media-details a{margin-top:12px;display:block}
|
||||
.media-details input{font-size:13px}
|
||||
.media-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
|
||||
.media-footer label{margin:0;font-size:12px}
|
||||
#media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}
|
||||
#media-status{font-size:12px;margin-block:15px}
|
||||
.media-dialog> .panel-hint{margin-top:20px}
|
||||
.media-details>p{font-size:12px}
|
||||
@media(max-width:650px){.media-dialog{padding:18px}.media-tools,.media-layout{grid-template-columns:1fr}.media-details{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.media-grid{max-height:280px;grid-template-columns:repeat(2,minmax(0,1fr))}.media-footer{align-items:stretch;flex-direction:column}.media-heading{gap:8px}}
|
||||
.icon-button,.block-actions button,.viewport-controls button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--line);border-radius:7px;padding:11px 15px;text-decoration:none;font-size:12px;font-weight:600;background:white;color:var(--ink);white-space:nowrap;min-height:40px}
|
||||
.editor-message{padding:14px 18px;border-radius:7px;line-height:1.6;font-size:13px}
|
||||
.editor-body{overflow:hidden}
|
||||
#editor{height:100dvh;display:flex;flex-direction:column}
|
||||
.editor-header{display:flex;align-items:center;gap:20px;min-height:76px;padding:13px 20px;border-bottom:1px solid var(--line);background:white;z-index:1}
|
||||
.back-link{display:flex;gap:9px;text-decoration:none;font-size:12px;padding-right:20px;border-right:1px solid var(--line)}
|
||||
.editor-page-name{min-width:0;flex:1;display:grid;gap:5px}
|
||||
.editor-page-name strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.editor-page-name>span{font-size:10px;color:var(--muted)}
|
||||
.history-actions,.save-actions{display:flex;align-items:center;gap:8px}
|
||||
.icon-button{font-size:21px;min-width:36px;padding:3px 9px}
|
||||
.save-actions>span{font-size:10px;color:var(--muted);max-width:130px;margin-right:8px}
|
||||
.editor-layout{display:grid;grid-template-columns:258px minmax(200px,1fr) 280px;flex:1;min-height:0}
|
||||
.left-panel,.right-panel{background:white;overflow:auto}
|
||||
.left-panel{border-right:1px solid var(--line)}
|
||||
.right-panel{border-left:1px solid var(--line)}
|
||||
.panel-section{padding:23px 18px;border-bottom:1px solid var(--line)}
|
||||
.panel-section .eyebrow{margin-bottom:10px}
|
||||
.panel-section h2{font-size:14px;margin-bottom:12px}
|
||||
.panel-hint{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:17px}
|
||||
.library{display:grid;grid-template-columns:1fr 1fr;gap:7px}
|
||||
.library button{min-height:64px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:10px}
|
||||
.library button:hover:not(:disabled){border-color:var(--accent);background:#f3f7e8}
|
||||
.library button span{font-size:19px;line-height:1}
|
||||
.panel-title{display:flex;justify-content:space-between;align-items:center}
|
||||
.panel-title h2{margin-bottom:0}
|
||||
.panel-title+.panel-hint{margin-top:10px}
|
||||
.structure-list{list-style:none;margin:0;padding:0}
|
||||
.structure-list .structure-list{padding-left:13px;border-left:1px solid #e5e9e3;margin-left:8px}
|
||||
.tree-item{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:1px solid transparent;background:none;color:#42584b;border-radius:5px;padding:9px 7px;font-size:11px;min-height:34px}
|
||||
.tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.tree-item:hover{background:#f3f6ef}
|
||||
.tree-item[aria-pressed=true]{background:#eaf1d5;border-color:#c5d89a;color:#203b34;font-weight:600}
|
||||
.tree-icon{font-size:12px;min-width:15px}
|
||||
.drop-target{outline:2px dashed #315b49}
|
||||
.block-actions{display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid var(--line);padding-top:13px;margin-top:16px}
|
||||
.block-actions button{font-size:10px;padding:7px 9px;min-height:33px}
|
||||
.block-actions .danger-text{color:#943a2e}
|
||||
.canvas-panel{min-width:0;display:flex;flex-direction:column;background:#e9ede7;overflow:hidden}
|
||||
.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 20px;background:#f6f8f2;border-bottom:1px solid var(--line);min-height:59px}
|
||||
.canvas-label{font-size:9px;font-weight:700;letter-spacing:1.2px;color:#57655d}
|
||||
.viewport-controls{display:flex;gap:3px;background:#e8eee1;border-radius:7px;padding:3px}
|
||||
.viewport-controls button{padding:5px 9px;font-size:10px;min-height:28px;border:0;background:transparent}
|
||||
.viewport-controls [aria-pressed=true]{background:white;box-shadow:0 1px 3px #00000012}
|
||||
.canvas-toolbar>a{text-decoration:none;font-size:18px}
|
||||
.canvas-scroll{flex:1;min-height:0;overflow:auto;padding:22px;display:flex;justify-content:center;align-items:flex-start}
|
||||
#preview{background:white;border:0;box-shadow:0 3px 20px #203b3410;min-height:600px;height:100%;flex-shrink:0}
|
||||
.viewport-desktop{width:100%}
|
||||
.viewport-tablet{width:768px;max-width:100%}
|
||||
.viewport-mobile{width:390px;max-width:100%}
|
||||
.preview-status{font-size:10px;padding:9px 20px;color:#52614f;margin:0;min-height:30px;background:#f3f5ed}
|
||||
.right-panel label{font-size:11px}
|
||||
.right-panel input,.right-panel select,.right-panel textarea{font-size:12px}
|
||||
.right-panel textarea{min-height:150px}
|
||||
|
||||
.panel-note{font-size:11px;color:var(--muted);line-height:1.7;padding:20px}
|
||||
|
||||
|
||||
.editor-message{border-radius:0;background:#fff0e9;color:#873e24;border-bottom:1px solid #e6c3b2;flex-shrink:0;padding:9px 20px;font-size:12px}
|
||||
.recovery-bar{display:flex;gap:12px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line);background:#fff;font-size:12px;flex-wrap:wrap}
|
||||
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
|
||||
@media(max-width:1150px){.editor-layout{grid-template-columns:215px minmax(200px,1fr) 240px}.editor-header{gap:12px;padding-inline:14px}.save-actions>span{display:none}.panel-section{padding:18px 14px}.canvas-scroll{padding:12px}.canvas-label{display:none}}
|
||||
@media(max-width:850px){.editor-body{overflow:auto}#editor{height:auto;min-height:100dvh}.editor-header{flex-wrap:wrap}.editor-page-name{min-width:180px}.save-actions{width:100%;justify-content:flex-end}.save-actions>span{display:block;margin-right:auto}.editor-layout{display:flex;flex-wrap:wrap}.canvas-panel{order:0;width:100%;height:680px}.left-panel{order:1;width:45%;max-height:650px}.right-panel{order:2;width:55%;max-height:650px}.canvas-label{display:block}.editor-header .back-link{padding-right:12px}.editor-message{font-size:11px}.editor-layout .panel-hint{font-size:10px}}
|
||||
.left-panel{display:flex;flex-direction:column;overflow:hidden}
|
||||
.left-panel>.panel-section:first-child{max-height:45%;overflow:auto;flex-shrink:0}
|
||||
.structure-section{display:flex;flex-direction:column;flex:1;min-height:0}
|
||||
.structure-section #structure{overflow:auto;flex:1;min-height:90px;padding:3px}
|
||||
.structure-section .block-actions{flex-shrink:0;background:white}
|
||||
.structure-section .panel-hint{margin:8px 0}
|
||||
.search-label{font-size:11px;margin:12px 0 6px}
|
||||
#tree-search{font-size:11px;padding:9px;min-height:36px}
|
||||
.tree-tools{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
|
||||
.tree-tools .text-button{font-size:10px;padding:5px}
|
||||
.structure-list li{position:relative}
|
||||
.tree-item{padding-left:23px}
|
||||
.tree-toggle{position:absolute;top:5px;left:0;width:22px;height:25px;z-index:1;border:0;background:transparent;color:var(--ink);border-radius:4px}
|
||||
.preset-heading{font-size:12px;margin:22px 0 8px}
|
||||
.preset-library{display:grid;gap:6px}
|
||||
.preset-library button{display:flex;gap:10px;text-align:left;align-items:center;min-height:40px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:#f7f9f2;color:var(--ink);font-size:11px}
|
||||
.preset-library button:hover:not(:disabled){border-color:var(--accent)}
|
||||
.preset-library span{font-size:18px}
|
||||
.property-tabs{display:flex;background:#edf1e7;padding:4px;border-radius:8px;gap:4px}
|
||||
.property-tabs button{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);border-radius:6px;padding:10px;font-size:12px;font-weight:600}
|
||||
.property-tabs [aria-pressed=true]{background:white;box-shadow:0 1px 3px #0001}
|
||||
.design-scope{font-size:12px;font-weight:600;line-height:1.6;margin:18px 0 8px;padding:10px;border-left:3px solid var(--accent);background:#f1f5e7}
|
||||
.design-reset{margin-top:24px;white-space:normal;width:100%}
|
||||
.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-height:35px;padding:3px 14px;background:#f6f8f2;border-top:1px solid var(--line)}
|
||||
.breadcrumbs .text-button{font-size:10px;white-space:normal}
|
||||
.breadcrumbs button+button:before{content:'›';color:var(--muted)}
|
||||
.breadcrumbs [aria-current=location]{font-weight:700;background:#e5edda}
|
||||
.canvas-scroll{display:block}
|
||||
.canvas-scroll #preview-stage{position:relative;margin:0 auto}
|
||||
#preview{position:absolute;top:0;left:0;transform-origin:top left;max-width:none;min-height:0}
|
||||
.right-panel select{padding-inline:7px;text-overflow:ellipsis}
|
||||
.right-panel .panel-section{min-width:0}
|
||||
@media(max-width:850px){.left-panel,.right-panel{height:650px}.left-panel>.panel-section:first-child{max-height:40%}.structure-section{padding:12px 7px}.tree-item{font-size:10px;gap:3px}.tree-icon{min-width:10px}.structure-list .structure-list{padding-left:5px;margin-left:4px}.block-actions button{padding:6px;white-space:normal}.property-tabs button{padding:9px 4px;font-size:11px}.canvas-scroll{padding:12px}.right-panel label{line-height:1.5}.tree-tools .text-button{white-space:normal}}
|
||||
.design-group{border:1px solid var(--line);border-radius:9px;margin-top:10px;background:#fff}
|
||||
.design-group>summary{cursor:pointer;padding:12px 14px;font-size:12px;font-weight:700;letter-spacing:.3px;list-style:none;display:flex;justify-content:space-between;align-items:center}
|
||||
.design-group>summary::after{content:'+';font-size:17px}
|
||||
.design-group[open]>summary{border-bottom:1px solid var(--line)}
|
||||
.design-group[open]>summary::after{content:'–'}
|
||||
.design-group-body{padding:6px 14px 16px}
|
||||
.design-group-label{font-size:11px;font-weight:700;color:var(--muted);margin:18px 0 6px;letter-spacing:.3px}
|
||||
.design-row{margin-top:14px}
|
||||
.design-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
|
||||
.design-row-head label{margin:0;font-size:11px}
|
||||
.design-own .design-row-head label{color:#2f5d4a;font-weight:700}
|
||||
.design-own .design-row-head label::before{content:'● ';color:var(--accent)}
|
||||
.design-reset-one{font-size:14px;padding:2px 6px;min-height:24px;line-height:1}
|
||||
.design-inherited{font-size:10px;color:var(--muted);margin:5px 0 0;line-height:1.45}
|
||||
.color-control{display:grid;grid-template-columns:38px 1fr;gap:6px;align-items:center}
|
||||
.color-control input[type=color]{padding:2px;min-height:38px;width:38px;border-radius:6px;cursor:pointer}
|
||||
.color-control .color-text{font-size:12px;min-height:38px}
|
||||
.color-control .color-palette{grid-column:1 / -1;font-size:11px;min-height:34px}
|
||||
.length-control{display:grid;grid-template-columns:1fr 74px;gap:6px}
|
||||
.length-control input,.length-control select{font-size:12px;min-height:38px}
|
||||
.length-control.is-inherited input{color:var(--muted)}
|
||||
.number-control{display:grid;grid-template-columns:1fr 74px;gap:8px;align-items:center}
|
||||
.number-control input[type=range]{width:100%;min-height:24px;padding:0;accent-color:#437754}
|
||||
.number-control input[type=number]{font-size:12px;min-height:38px}
|
||||
.side-wrap{margin-bottom:6px}
|
||||
.side-control{display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.side-cell label{margin:0 0 4px;font-size:10px;color:var(--muted)}
|
||||
.side-all{font-size:10px;margin-top:8px;padding:4px 6px}
|
||||
.design-actions{display:grid;gap:8px;margin-top:22px}
|
||||
.design-actions button{width:100%}
|
||||
|
||||
|
||||
|
||||
|
||||
.media-control{display:grid;gap:8px}
|
||||
.media-chosen{margin:0;font-size:11px;color:var(--muted)}
|
||||
.design-reuse{display:grid;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
|
||||
.design-reuse button,.design-reuse select{width:100%}
|
||||
#preset-dialog label{margin-top:18px}
|
||||
#preset-dialog .field-error{margin:10px 0 0;font-size:12px;color:#8b2f22;font-weight:600}
|
||||
.rich-text{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
|
||||
.rt-bar{display:flex;flex-wrap:wrap;gap:2px;padding:5px;border-bottom:1px solid var(--line);background:#fafbf8}
|
||||
.rt-button{min-width:30px;min-height:30px;padding:2px 7px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink);font-size:12px;line-height:1}
|
||||
.rt-button:hover{background:#eef2e7;border-color:var(--line)}
|
||||
.rt-toggle{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.5px}
|
||||
.rt-toggle[aria-pressed=true]{background:var(--ink);color:#fff}
|
||||
.rt-link{display:flex;gap:6px;padding:6px;border-bottom:1px solid var(--line);background:#fff6e2}
|
||||
.rt-link input{font-size:11px;min-height:30px}
|
||||
.rt-surface{min-height:120px;max-height:340px;overflow:auto;padding:11px 12px;font-size:13px;line-height:1.65}
|
||||
.rt-surface:focus-visible{outline:2px solid #b55b12;outline-offset:-2px}
|
||||
.rt-surface ul,.rt-surface ol{margin:0 0 8px;padding-left:20px}
|
||||
.rt-surface a{color:#a4510f}
|
||||
.rt-source{min-height:150px;border:0;border-radius:0;font-family:ui-monospace,monospace;font-size:12px;line-height:1.6}
|
||||
.own-code{font-family:ui-monospace,monospace;font-size:12px;line-height:1.6;min-height:110px}
|
||||
.own-code[readonly]{background:#f4f5f1;color:var(--muted)}
|
||||
/* Bringing the editor chrome in line with the new administration: same radii, same restraint,
|
||||
and a few sizes that were simply too small to read comfortably. The layout is unchanged. */
|
||||
.editor-header{min-height:70px}
|
||||
.back-link{font-size:12px;font-weight:600;gap:7px;align-items:center}
|
||||
.editor-page-name h1{font-size:14px}
|
||||
.panel-section h2{font-size:13px;letter-spacing:0}
|
||||
.panel-section .eyebrow{font-size:9px;letter-spacing:1.4px}
|
||||
.library{gap:8px}
|
||||
.library button{min-height:68px;border-radius:9px;font-size:11px;gap:7px}
|
||||
.library button span{font-size:20px}
|
||||
.tree-item{font-size:12px;border-radius:6px}
|
||||
.right-panel label{font-size:12px}
|
||||
.right-panel input,.right-panel select,.right-panel textarea{font-size:12px;border-radius:7px}
|
||||
.property-tabs{padding:3px;border-radius:9px}
|
||||
.property-tabs button{border-radius:7px;font-size:12px}
|
||||
.viewport-controls{border-radius:8px}
|
||||
.viewport-controls button{border-radius:6px;font-size:11px}
|
||||
.design-group{border-radius:10px}
|
||||
.design-scope{border-radius:0 7px 7px 0}
|
||||
#preview{box-shadow:0 6px 28px #1b2a2414}
|
||||
.canvas-panel{background:#e7ebe5}
|
||||
.canvas-toolbar,.breadcrumbs,.preview-status{background:#f5f7f2}
|
||||
.icon-button{border-radius:8px}
|
||||
@@ -7,6 +7,7 @@
|
||||
<title>{% block title %}Verwaltung{% endblock %} · Kant CMS</title>
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="/assets/admin.css">
|
||||
{% block styles %}{% endblock %}
|
||||
{% block scripts %}{% endblock %}
|
||||
</head>
|
||||
<body class="{% block body_class %}{% endblock %}">
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
{% set subject = area ? area.document : page.document %}
|
||||
{% block title %}{{ subject.title }} bearbeiten{% endblock %}
|
||||
{% block body_class %}editor-body{% endblock %}
|
||||
{% block styles %}<link rel="stylesheet" href="/assets/editor.css">{% endblock %}
|
||||
{% block scripts %}<script type="module" src="/assets/editor.js"></script>{% endblock %}
|
||||
{% block body %}
|
||||
{# The API base decides what is edited. An area is shared, so it has no draft and no
|
||||
|
||||
+91
-102
@@ -1,105 +1,94 @@
|
||||
{% extends 'admin/base.html.twig' %}
|
||||
{% extends 'admin/shell.html.twig' %}
|
||||
{% set nav = 'forms' %}
|
||||
{% block title %}Formulare{% endblock %}
|
||||
{% block body %}
|
||||
<header class="admin-header">
|
||||
<a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
|
||||
<div class="header-actions"><a href="/">Website ansehen ↗</a><span class="user-name">{{ app.user.userIdentifier }}</span><form action="{{ path('admin_logout') }}" method="post"><input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"><button class="subtle" type="submit">Abmelden</button></form></div>
|
||||
</header>
|
||||
<main id="admin-main" class="pages-main" tabindex="-1">
|
||||
<p class="eyebrow">FORMULARE</p><h1>Formulare</h1>
|
||||
<p class="muted">Felder, Empfänger und Einwilligungstext werden hier gepflegt. Auf einer Seite steht nur ein Formularblock mit der Adresse – so kann ein gespeicherter Seiteninhalt niemals ändern, wohin eine Anfrage geht.</p>
|
||||
<p class="admin-links"><a class="secondary" href="{{ path('admin_pages') }}">Seiten</a> <a class="secondary" href="{{ path('admin_menus') }}">Menüs</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a> <a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a></p>
|
||||
|
||||
{% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
|
||||
<p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
|
||||
{% endfor %}{% endfor %}
|
||||
|
||||
{% for form in forms|merge([null]) %}
|
||||
{% set new = form is null %}
|
||||
{% set rows = new ? [] : form.fields %}
|
||||
<section class="menu-section">
|
||||
<div class="section-heading">
|
||||
<h2>{{ new ? 'Neues Formular' : form.name }}{% if not new %} <span class="count">{{ form.fields|length }} Felder</span>{% endif %}</h2>
|
||||
{% if not new %}<span class="muted">Block-Adresse <code>{{ form.slug }}</code></span>{% endif %}
|
||||
</div>
|
||||
<form action="{{ path('admin_form_save', {slug: new ? 'neu' : form.slug}) }}" method="post" class="menu-form">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('forms') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ new ? 0 : form.version }}">
|
||||
<div class="create-grid">
|
||||
<div>
|
||||
<label for="name-{{ loop.index }}">Name</label>
|
||||
<input id="name-{{ loop.index }}" name="name" maxlength="120" required value="{{ new ? '' : form.name }}">
|
||||
</div>
|
||||
{% if new %}
|
||||
<div>
|
||||
<label for="slug-new">Adresse</label>
|
||||
<input id="slug-new" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" required placeholder="kontakt">
|
||||
<p class="field-help">Wird im Formularblock eingetragen.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<label for="recipient-{{ loop.index }}">Empfänger</label>
|
||||
<input id="recipient-{{ loop.index }}" name="recipient" type="email" required value="{{ new ? '' : form.settings.recipient }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="subject-{{ loop.index }}">Betreff</label>
|
||||
<input id="subject-{{ loop.index }}" name="subject" maxlength="160" value="{{ new ? '' : form.settings.subject }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="reply-{{ loop.index }}">Antwortadresse aus Feld</label>
|
||||
<input id="reply-{{ loop.index }}" name="replyToField" maxlength="32" value="{{ new ? '' : form.settings.replyToField }}" placeholder="email">
|
||||
<p class="field-help">Technischer Name eines E-Mail-Feldes. Dann lässt sich direkt antworten.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="success-{{ loop.index }}">Meldung nach dem Absenden</label>
|
||||
<input id="success-{{ loop.index }}" name="success" maxlength="300" value="{{ new ? '' : form.settings.success }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="menu-table">
|
||||
<caption class="visually-hidden">Felder des Formulars. Eine Beschriftung zu leeren entfernt das Feld.</caption>
|
||||
<thead><tr><th scope="col">Technischer Name</th><th scope="col">Typ</th><th scope="col">Beschriftung</th><th scope="col">Pflicht</th><th scope="col">Hilfetext</th><th scope="col">Optionen</th></tr></thead>
|
||||
<tbody>
|
||||
{% for row in rows|merge([{name: '', type: 'text', label: '', required: false, help: '', options: []}, {name: '', type: 'text', label: '', required: false, help: '', options: []}]) %}
|
||||
{% set n = loop.index0 %}
|
||||
<tr{% if row.label == '' %} class="menu-row-new"{% endif %}>
|
||||
<td><input name="fields[{{ n }}][name]" maxlength="32" value="{{ row.name }}" pattern="[a-z][a-z0-9_]*" aria-label="Technischer Name von Feld {{ n + 1 }}" placeholder="vorname"></td>
|
||||
<td>
|
||||
<select name="fields[{{ n }}][type]" aria-label="Typ von Feld {{ n + 1 }}">
|
||||
{% for value, label in types %}<option value="{{ value }}"{{ row.type == value ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
<td><input name="fields[{{ n }}][label]" maxlength="120" value="{{ row.label }}" aria-label="Beschriftung von Feld {{ n + 1 }}"></td>
|
||||
<td class="check-cell"><input type="checkbox" name="fields[{{ n }}][required]" value="1"{{ row.required ? ' checked' : '' }} aria-label="Feld {{ n + 1 }} ist ein Pflichtfeld"></td>
|
||||
<td><input name="fields[{{ n }}][help]" maxlength="200" value="{{ row.help }}" aria-label="Hilfetext von Feld {{ n + 1 }}"></td>
|
||||
<td><input name="fields[{{ n }}][options]" maxlength="500" value="{{ row.options|join(', ') }}" aria-label="Optionen von Feld {{ n + 1 }}" placeholder="nur bei Auswahl"></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="field-help">Ein Einwilligungsfeld ist immer ein Pflichtfeld; der Zeitpunkt der Einwilligung wird mitgespeichert. Optionen einer Auswahl durch Komma trennen. Die letzten beiden Zeilen sind für neue Felder.</p>
|
||||
<button class="primary" type="submit">{{ new ? 'Formular anlegen' : 'Formular speichern' }}</button>
|
||||
</form>
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
<div class="section-heading"><h2>Einsendungen <span class="count">{{ submissions|length }}</span></h2><span class="muted">Die neuesten 50.</span></div>
|
||||
{% if submissions is empty %}
|
||||
<div class="empty-state"><h3>Noch keine Einsendungen.</h3><p>Hier erscheinen eingegangene Nachrichten, auch wenn der E-Mail-Versand fehlschlägt.</p></div>
|
||||
{% else %}
|
||||
<div class="page-list">
|
||||
{% for entry in submissions %}
|
||||
<article class="page-card submission-card">
|
||||
<div class="page-info">
|
||||
<h3>{{ entry.form }}</h3>
|
||||
<p>{{ entry.createdAt|date('d.m.Y H:i') }} UTC{% if entry.consentAt %} · Einwilligung {{ entry.consentAt|date('d.m.Y H:i') }}{% endif %}</p>
|
||||
<dl class="submission-data">{% for key, value in entry.data %}<dt>{{ key }}</dt><dd>{{ value }}</dd>{% endfor %}</dl>
|
||||
</div>
|
||||
<span class="badge {{ entry.delivered ? 'published' : '' }}">{{ entry.delivered ? 'Versendet' : 'Nicht versendet' }}</span>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% block heading %}Formulare{% endblock %}
|
||||
{% block lead %}Felder, Empfänger und Einwilligungstext werden hier gepflegt. Auf einer Seite steht nur ein Formularblock mit der Adresse – so kann ein gespeicherter Seiteninhalt niemals ändern, wohin eine Anfrage geht.{% endblock %}
|
||||
{% block content %}
|
||||
{% for form in forms|merge([null]) %}
|
||||
{% set new = form is null %}
|
||||
{% set rows = new ? [] : form.fields %}
|
||||
<section class="stack-section">
|
||||
<div class="section-head">
|
||||
<h2>{{ new ? 'Neues Formular' : form.name }}{% if not new %} <span class="count">{{ form.fields|length }} Felder</span>{% endif %}</h2>
|
||||
{% if not new %}<span class="muted">Block-Adresse <code>{{ form.slug }}</code></span>{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<p class="footnote">Kant CMS · Visueller Editor, erster Prototyp</p>
|
||||
</main>
|
||||
<form action="{{ path('admin_form_save', {slug: new ? 'neu' : form.slug}) }}" method="post" class="form-def card card-body">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('forms') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ new ? 0 : form.version }}">
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="name-{{ loop.index }}">Name</label>
|
||||
<input id="name-{{ loop.index }}" name="name" maxlength="120" required value="{{ new ? '' : form.name }}">
|
||||
</div>
|
||||
{% if new %}
|
||||
<div>
|
||||
<label for="slug-new">Adresse</label>
|
||||
<input id="slug-new" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" required placeholder="kontakt">
|
||||
<p class="field-help">Wird im Formularblock eingetragen.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<label for="recipient-{{ loop.index }}">Empfänger</label>
|
||||
<input id="recipient-{{ loop.index }}" name="recipient" type="email" required value="{{ new ? '' : form.settings.recipient }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="subject-{{ loop.index }}">Betreff</label>
|
||||
<input id="subject-{{ loop.index }}" name="subject" maxlength="160" value="{{ new ? '' : form.settings.subject }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="reply-{{ loop.index }}">Antwortadresse aus Feld</label>
|
||||
<input id="reply-{{ loop.index }}" name="replyToField" maxlength="32" value="{{ new ? '' : form.settings.replyToField }}" placeholder="email">
|
||||
<p class="field-help">Technischer Name eines E-Mail-Feldes. Dann lässt sich direkt antworten.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="success-{{ loop.index }}">Meldung nach dem Absenden</label>
|
||||
<input id="success-{{ loop.index }}" name="success" maxlength="300" value="{{ new ? '' : form.settings.success }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table field-table">
|
||||
<caption class="visually-hidden">Felder des Formulars. Eine Beschriftung zu leeren entfernt das Feld.</caption>
|
||||
<thead><tr><th scope="col">Technischer Name</th><th scope="col">Typ</th><th scope="col">Beschriftung</th><th scope="col">Pflicht</th><th scope="col">Hilfetext</th><th scope="col">Optionen</th></tr></thead>
|
||||
<tbody>
|
||||
{% for row in rows|merge([{name: '', type: 'text', label: '', required: false, help: '', options: []}, {name: '', type: 'text', label: '', required: false, help: '', options: []}]) %}
|
||||
{% set n = loop.index0 %}
|
||||
<tr{% if row.label == '' %} class="table-new"{% endif %}>
|
||||
<td><input name="fields[{{ n }}][name]" maxlength="32" value="{{ row.name }}" pattern="[a-z][a-z0-9_]*" aria-label="Technischer Name von Feld {{ n + 1 }}" placeholder="vorname"></td>
|
||||
<td>
|
||||
<select name="fields[{{ n }}][type]" aria-label="Typ von Feld {{ n + 1 }}">
|
||||
{% for value, label in types %}<option value="{{ value }}"{{ row.type == value ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
<td><input name="fields[{{ n }}][label]" maxlength="120" value="{{ row.label }}" aria-label="Beschriftung von Feld {{ n + 1 }}"></td>
|
||||
<td class="check-cell"><input type="checkbox" name="fields[{{ n }}][required]" value="1"{{ row.required ? ' checked' : '' }} aria-label="Feld {{ n + 1 }} ist ein Pflichtfeld"></td>
|
||||
<td><input name="fields[{{ n }}][help]" maxlength="200" value="{{ row.help }}" aria-label="Hilfetext von Feld {{ n + 1 }}"></td>
|
||||
<td><input name="fields[{{ n }}][options]" maxlength="500" value="{{ row.options|join(', ') }}" aria-label="Optionen von Feld {{ n + 1 }}" placeholder="nur bei Auswahl"></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="field-help">Ein Einwilligungsfeld ist immer ein Pflichtfeld; der Zeitpunkt der Einwilligung wird mitgespeichert. Optionen einer Auswahl durch Komma trennen. Die letzten beiden Zeilen sind für neue Felder.</p>
|
||||
<button class="primary" type="submit">{{ new ? 'Formular anlegen' : 'Formular speichern' }}</button>
|
||||
</form>
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
<div class="section-head"><h2>Einsendungen <span class="count">{{ submissions|length }}</span></h2><span class="muted">Die neuesten 50.</span></div>
|
||||
{% if submissions is empty %}
|
||||
<div class="empty"><h3>Noch keine Einsendungen.</h3><p>Hier erscheinen eingegangene Nachrichten, auch wenn der E-Mail-Versand fehlschlägt.</p></div>
|
||||
{% else %}
|
||||
<div class="rows">
|
||||
{% for entry in submissions %}
|
||||
<article class="row row-top">
|
||||
<div class="row-main">
|
||||
<h3>{{ entry.form }}</h3>
|
||||
<p>{{ entry.createdAt|date('d.m.Y H:i') }} UTC{% if entry.consentAt %} · Einwilligung {{ entry.consentAt|date('d.m.Y H:i') }}{% endif %}</p>
|
||||
<dl class="submission-data">{% for key, value in entry.data %}<dt>{{ key }}</dt><dd>{{ value }}</dd>{% endfor %}</dl>
|
||||
</div>
|
||||
<span class="pill {{ entry.delivered ? 'pill-live' : 'pill-off' }}">{{ entry.delivered ? 'Versendet' : 'Nicht versendet' }}</span>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<p class="footnote">Kant CMS · Arbeitsstand</p>
|
||||
{% endblock %}
|
||||
@@ -1,4 +1,16 @@
|
||||
{% extends 'admin/base.html.twig' %}
|
||||
{% block title %}Medienverwaltung{% endblock %}
|
||||
{% extends 'admin/shell.html.twig' %}
|
||||
{% set nav = 'media' %}
|
||||
{% block title %}Mediathek{% endblock %}
|
||||
{% block styles %}<link rel="stylesheet" href="/assets/editor.css">{% endblock %}
|
||||
{% block scripts %}<script type="module" src="/assets/media.js"></script>{% endblock %}
|
||||
{% block body %}<header class="admin-header"><a href="/admin">← Seitenübersicht</a></header><main id="admin-main" class="pages-main"><p class="eyebrow">DEINE BILDER</p><h1>Medienverwaltung</h1><p class="muted">Bilder hochladen, Angaben pflegen und in deinen Seiten wiederverwenden.</p><button id="open-media-library" class="primary">Mediathek öffnen</button></main>{% endblock %}
|
||||
{% block heading %}Mediathek{% endblock %}
|
||||
{% block lead %}Bilder hochladen, Angaben pflegen und in deinen Seiten wiederverwenden. Dieselbe Mediathek öffnet sich auch im Editor, wenn du ein Bild auswählst.{% endblock %}
|
||||
{% block actions %}<button id="open-media-library" class="primary">Mediathek öffnen</button>{% endblock %}
|
||||
{% block content %}
|
||||
<div class="card">
|
||||
<div class="card-head"><h2>Bilder verwalten</h2><span class="muted">Hochladen, benennen, Alternativtext pflegen</span></div>
|
||||
<div class="card-body">
|
||||
<p class="muted">Beim Hochladen wird jedes Bild in WebP umgewandelt und in mehreren Größen abgelegt; die Seite liefert dann die passende aus. Ein Alternativtext beschreibt, was zu sehen ist – er ist das, was Menschen mit Screenreader vom Bild haben.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,67 +1,56 @@
|
||||
{% extends 'admin/base.html.twig' %}
|
||||
{% extends 'admin/shell.html.twig' %}
|
||||
{% set nav = 'menus' %}
|
||||
{% block title %}Menüs{% endblock %}
|
||||
{% block body %}
|
||||
<header class="admin-header">
|
||||
<a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
|
||||
<div class="header-actions"><a href="/">Website ansehen ↗</a><span class="user-name">{{ app.user.userIdentifier }}</span><form action="{{ path('admin_logout') }}" method="post"><input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"><button class="subtle" type="submit">Abmelden</button></form></div>
|
||||
</header>
|
||||
<main id="admin-main" class="pages-main" tabindex="-1">
|
||||
<p class="eyebrow">NAVIGATION</p><h1>Menüs</h1>
|
||||
<p class="muted">Ein Eintrag verweist auf eine Seite, auf ein Sprungziel innerhalb einer Seite oder auf eine externe Adresse. Die Reihenfolge ergibt sich aus der Position, die Verschachtelung aus der Ebene.</p>
|
||||
<p class="admin-links"><a class="secondary" href="{{ path('admin_pages') }}">Seiten</a> <a class="secondary" href="{{ path('admin_forms') }}">Formulare</a> <a class="secondary" href="{{ path('admin_partials') }}">Bereiche</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a> <a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a></p>
|
||||
{% block heading %}Menüs{% endblock %}
|
||||
{% block lead %}Ein Eintrag verweist auf eine Seite, auf ein Sprungziel innerhalb einer Seite oder auf eine externe Adresse. Die Reihenfolge ergibt sich aus der Position, die Verschachtelung aus der Ebene.{% endblock %}
|
||||
{% block content %}
|
||||
{% for slot, slotName in slots %}
|
||||
{% set menu = menus[slot]|default(null) %}
|
||||
<section class="stack-section">
|
||||
<div class="section-head"><h2>{{ slotName }} <span class="count">{{ rows[slot]|length }}</span></h2><span class="muted">Platz <code>{{ slot }}</code></span></div>
|
||||
<form action="{{ path('admin_menu_save', {slot: slot}) }}" method="post" class="menu-form card card-body">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('menus') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ menu ? menu.version : 0 }}">
|
||||
<label for="name-{{ slot }}">Name des Menüs</label>
|
||||
<input id="name-{{ slot }}" name="name" maxlength="120" required value="{{ menu ? menu.name : slotName }}">
|
||||
|
||||
{% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
|
||||
<p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
|
||||
{% endfor %}{% endfor %}
|
||||
|
||||
{% for slot, slotName in slots %}
|
||||
{% set menu = menus[slot]|default(null) %}
|
||||
<section class="menu-section">
|
||||
<div class="section-heading"><h2>{{ slotName }} <span class="count">{{ rows[slot]|length }}</span></h2><span class="muted">Platz <code>{{ slot }}</code></span></div>
|
||||
<form action="{{ path('admin_menu_save', {slot: slot}) }}" method="post" class="menu-form">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('menus') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ menu ? menu.version : 0 }}">
|
||||
<label for="name-{{ slot }}">Name des Menüs</label>
|
||||
<input id="name-{{ slot }}" name="name" maxlength="120" required value="{{ menu ? menu.name : slotName }}">
|
||||
|
||||
<table class="menu-table">
|
||||
<caption class="visually-hidden">Einträge im Menü {{ slotName }}. Eine Beschriftung zu leeren entfernt den Eintrag.</caption>
|
||||
<thead><tr><th scope="col">Position</th><th scope="col">Ebene</th><th scope="col">Beschriftung</th><th scope="col">Ziel</th><th scope="col">Seite</th><th scope="col">Sprungziel</th><th scope="col">Adresse</th></tr></thead>
|
||||
<tbody>
|
||||
{% for index, row in rows[slot]|merge([{label: '', type: 'page', level: 1, pageId: '', anchor: '', url: ''}, {label: '', type: 'page', level: 1, pageId: '', anchor: '', url: ''}, {label: '', type: 'page', level: 1, pageId: '', anchor: '', url: ''}]) %}
|
||||
{% set n = loop.index0 %}
|
||||
<tr{% if row.label == '' %} class="menu-row-new"{% endif %}>
|
||||
<td><input type="number" name="items[{{ n }}][position]" value="{{ (n + 1) * 10 }}" min="0" max="9999" step="1" aria-label="Position von Eintrag {{ n + 1 }}"></td>
|
||||
<td>
|
||||
<select name="items[{{ n }}][level]" aria-label="Ebene von Eintrag {{ n + 1 }}">
|
||||
<option value="1"{{ row.level == 1 ? ' selected' : '' }}>1 — oben</option>
|
||||
<option value="2"{{ row.level == 2 ? ' selected' : '' }}>2 — Untereintrag</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input name="items[{{ n }}][label]" maxlength="80" value="{{ row.label }}" aria-label="Beschriftung von Eintrag {{ n + 1 }}" placeholder="{{ row.label == '' ? 'Neuer Eintrag' : '' }}"></td>
|
||||
<td>
|
||||
<select name="items[{{ n }}][type]" aria-label="Zielart von Eintrag {{ n + 1 }}">
|
||||
<option value="page"{{ row.type == 'page' ? ' selected' : '' }}>Seite</option>
|
||||
<option value="url"{{ row.type == 'url' ? ' selected' : '' }}>Adresse</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select name="items[{{ n }}][pageId]" aria-label="Seite von Eintrag {{ n + 1 }}">
|
||||
<option value="">— Seite wählen —</option>
|
||||
{% for page in pages %}<option value="{{ page.id }}"{{ row.pageId == page.id ? ' selected' : '' }}>{{ page.title }} (/{{ page.path == 'home' ? '' : page.path }})</option>{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
<td><input name="items[{{ n }}][anchor]" maxlength="65" value="{{ row.anchor }}" aria-label="Sprungziel von Eintrag {{ n + 1 }}" placeholder="kontakt"></td>
|
||||
<td><input name="items[{{ n }}][url]" maxlength="2048" value="{{ row.url }}" aria-label="Adresse von Eintrag {{ n + 1 }}" placeholder="https://…"></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="field-help">Ein Sprungziel gilt zusammen mit der gewählten Seite und führt zu <code>/seite#sprungziel</code>. Als Adresse sind HTTPS-Adressen, lokale Pfade sowie <code>mailto:</code> und <code>tel:</code> erlaubt. Die letzten drei Zeilen sind für neue Einträge; beim Speichern werden sie neu durchnummeriert.</p>
|
||||
<button class="primary" type="submit">{{ slotName }} speichern</button>
|
||||
</form>
|
||||
</section>
|
||||
{% endfor %}
|
||||
<p class="footnote">Kant CMS · Visueller Editor, erster Prototyp</p>
|
||||
</main>
|
||||
<table class="table menu-table">
|
||||
<caption class="visually-hidden">Einträge im Menü {{ slotName }}. Eine Beschriftung zu leeren entfernt den Eintrag.</caption>
|
||||
<thead><tr><th scope="col">Position</th><th scope="col">Ebene</th><th scope="col">Beschriftung</th><th scope="col">Ziel</th><th scope="col">Seite</th><th scope="col">Sprungziel</th><th scope="col">Adresse</th></tr></thead>
|
||||
<tbody>
|
||||
{% for index, row in rows[slot]|merge([{label: '', type: 'page', level: 1, pageId: '', anchor: '', url: ''}, {label: '', type: 'page', level: 1, pageId: '', anchor: '', url: ''}, {label: '', type: 'page', level: 1, pageId: '', anchor: '', url: ''}]) %}
|
||||
{% set n = loop.index0 %}
|
||||
<tr{% if row.label == '' %} class="table-new"{% endif %}>
|
||||
<td><input type="number" name="items[{{ n }}][position]" value="{{ (n + 1) * 10 }}" min="0" max="9999" step="1" aria-label="Position von Eintrag {{ n + 1 }}"></td>
|
||||
<td>
|
||||
<select name="items[{{ n }}][level]" aria-label="Ebene von Eintrag {{ n + 1 }}">
|
||||
<option value="1"{{ row.level == 1 ? ' selected' : '' }}>1 — oben</option>
|
||||
<option value="2"{{ row.level == 2 ? ' selected' : '' }}>2 — Untereintrag</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input name="items[{{ n }}][label]" maxlength="80" value="{{ row.label }}" aria-label="Beschriftung von Eintrag {{ n + 1 }}" placeholder="{{ row.label == '' ? 'Neuer Eintrag' : '' }}"></td>
|
||||
<td>
|
||||
<select name="items[{{ n }}][type]" aria-label="Zielart von Eintrag {{ n + 1 }}">
|
||||
<option value="page"{{ row.type == 'page' ? ' selected' : '' }}>Seite</option>
|
||||
<option value="url"{{ row.type == 'url' ? ' selected' : '' }}>Adresse</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select name="items[{{ n }}][pageId]" aria-label="Seite von Eintrag {{ n + 1 }}">
|
||||
<option value="">— Seite wählen —</option>
|
||||
{% for page in pages %}<option value="{{ page.id }}"{{ row.pageId == page.id ? ' selected' : '' }}>{{ page.title }} (/{{ page.path == 'home' ? '' : page.path }})</option>{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
<td><input name="items[{{ n }}][anchor]" maxlength="65" value="{{ row.anchor }}" aria-label="Sprungziel von Eintrag {{ n + 1 }}" placeholder="kontakt"></td>
|
||||
<td><input name="items[{{ n }}][url]" maxlength="2048" value="{{ row.url }}" aria-label="Adresse von Eintrag {{ n + 1 }}" placeholder="https://…"></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="field-help">Ein Sprungziel gilt zusammen mit der gewählten Seite und führt zu <code>/seite#sprungziel</code>. Als Adresse sind HTTPS-Adressen, lokale Pfade sowie <code>mailto:</code> und <code>tel:</code> erlaubt. Die letzten drei Zeilen sind für neue Einträge; beim Speichern werden sie neu durchnummeriert.</p>
|
||||
<button class="primary" type="submit">{{ slotName }} speichern</button>
|
||||
</form>
|
||||
</section>
|
||||
{% endfor %}
|
||||
<p class="footnote">Kant CMS · Arbeitsstand</p>
|
||||
{% endblock %}
|
||||
+220
-173
@@ -1,185 +1,232 @@
|
||||
{% extends 'admin/base.html.twig' %}
|
||||
{% block title %}Deine Seiten{% endblock %}
|
||||
{% block body %}
|
||||
<header class="admin-header">
|
||||
<a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
|
||||
<div class="header-actions"><a href="/">Website ansehen ↗</a><span class="user-name">{{ app.user.userIdentifier }}</span><form action="{{ path('admin_logout') }}" method="post"><input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"><button class="subtle" type="submit">Abmelden</button></form></div>
|
||||
</header>
|
||||
<main id="admin-main" class="pages-main" tabindex="-1">
|
||||
<p class="eyebrow">DEINE WEBSITE</p><h1>Gute Inhalte beginnen hier.</h1>
|
||||
<p class="muted">Wähle eine Seite. Gestalte deinen Entwurf. Veröffentliche, wenn alles passt.</p>
|
||||
<p class="admin-links"><a class="secondary" href="{{ path('admin_media') }}">Medienverwaltung</a> <a class="secondary" href="{{ path('admin_menus') }}">Menüs</a> <a class="secondary" href="{{ path('admin_forms') }}">Formulare</a> <a class="secondary" href="{{ path('admin_partials') }}">Bereiche</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a> <a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a> <a class="secondary" href="/beitraege">Beitragsübersicht ↗</a></p>
|
||||
{% extends 'admin/shell.html.twig' %}
|
||||
{% set nav = 'pages' %}
|
||||
{% block title %}Seiten{% endblock %}
|
||||
{% block heading %}Seiten und Beiträge{% endblock %}
|
||||
{% block lead %}Wähle eine Seite, gestalte deinen Entwurf, veröffentliche, wenn alles passt. Entwürfe bleiben bis dahin privat.{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
{% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
|
||||
<p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
|
||||
{% endfor %}{% endfor %}
|
||||
|
||||
{% if is_granted('ROLE_EDITOR') %}
|
||||
<details class="create-panel"{% if app.flashes is not empty %} open{% endif %}>
|
||||
<summary>Neue Seite oder neuen Beitrag anlegen</summary>
|
||||
<form action="{{ path('admin_create') }}" method="post" class="create-form">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<div class="create-grid">
|
||||
<div>
|
||||
<label for="new-title">Titel</label>
|
||||
<input id="new-title" name="title" maxlength="160" required autocomplete="off">
|
||||
<p class="field-help">Wird als Überschrift und als Seitentitel übernommen.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-slug">Adresse</label>
|
||||
<input id="new-slug" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" autocomplete="off" aria-describedby="new-slug-help">
|
||||
<p class="field-help" id="new-slug-help">Kleinbuchstaben, Ziffern und Bindestriche, zum Beispiel <code>ueber-uns</code>. Leer lassen, um sie aus dem Titel zu bilden.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-type">Art</label>
|
||||
<select id="new-type" name="type">
|
||||
<option value="page">Seite</option>
|
||||
<option value="post">Beitrag</option>
|
||||
</select>
|
||||
<p class="field-help">Beiträge sind für Blogartikel gedacht und haben keine Unterseiten.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-parent">Übergeordnete Seite</label>
|
||||
<select id="new-parent" name="parent_id">
|
||||
<option value="">— keine, direkt unter der Startseite —</option>
|
||||
{% for parent in parents %}<option value="{{ parent.id }}">{{ parent.title }} (/{{ parent.path }})</option>{% endfor %}
|
||||
</select>
|
||||
<p class="field-help">Bestimmt die Adresse, zum Beispiel <code>/leistungen/webdesign</code>.</p>
|
||||
</div>
|
||||
{% if is_granted('ROLE_EDITOR') %}
|
||||
<details class="card"{% if app.flashes is not empty %} open{% endif %}>
|
||||
<summary>Neue Seite oder neuen Beitrag anlegen</summary>
|
||||
<form action="{{ path('admin_create') }}" method="post" class="create-form card-body">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="new-title">Titel</label>
|
||||
<input id="new-title" name="title" maxlength="160" required autocomplete="off">
|
||||
<p class="field-help">Wird als Überschrift und als Seitentitel übernommen.</p>
|
||||
</div>
|
||||
<button class="primary" type="submit">Anlegen und bearbeiten</button>
|
||||
</form>
|
||||
</details>
|
||||
{% endif %}
|
||||
<div>
|
||||
<label for="new-slug">Adresse</label>
|
||||
<input id="new-slug" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" autocomplete="off" aria-describedby="new-slug-help">
|
||||
<p class="field-help" id="new-slug-help">Kleinbuchstaben, Ziffern und Bindestriche, zum Beispiel <code>ueber-uns</code>. Leer lassen, um sie aus dem Titel zu bilden.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-type">Art</label>
|
||||
<select id="new-type" name="type">
|
||||
<option value="page">Seite</option>
|
||||
<option value="post">Beitrag</option>
|
||||
</select>
|
||||
<p class="field-help">Beiträge sind für Blogartikel gedacht und haben keine Unterseiten.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-parent">Übergeordnete Seite</label>
|
||||
<select id="new-parent" name="parent_id">
|
||||
<option value="">— keine, direkt unter der Startseite —</option>
|
||||
{% for parent in parents %}<option value="{{ parent.id }}">{{ parent.title }} (/{{ parent.path }})</option>{% endfor %}
|
||||
</select>
|
||||
<p class="field-help">Bestimmt die Adresse, zum Beispiel <code>/leistungen/webdesign</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="primary" type="submit">Anlegen und bearbeiten</button>
|
||||
</form>
|
||||
</details>
|
||||
{% endif %}
|
||||
|
||||
<div class="section-heading"><h2>Seiten <span class="count">{{ pages|length }}</span></h2><span class="muted">Entwürfe bleiben bis zur Veröffentlichung privat.</span></div>
|
||||
<div class="page-list">
|
||||
{% for page in pages %}
|
||||
{# A class, not a style attribute: the administration forbids inline styles, so an attribute
|
||||
here would simply be dropped and the hierarchy would look flat. #}
|
||||
<article class="page-card depth-{{ min(page.depth, 3) }}">
|
||||
<div class="page-icon" aria-hidden="true">{{ page.type == 'post' ? '✎' : '▤' }}</div>
|
||||
<div class="page-info">
|
||||
<div class="section-head"><h2>Alle Seiten <span class="count">{{ pages|length }}</span></h2><span class="muted">Untergeordnete Seiten stehen eingerückt.</span></div>
|
||||
<div class="rows">
|
||||
{% for page in pages %}
|
||||
{# Indentation by class, not by style attribute: the administration forbids inline styles, so
|
||||
an attribute here would simply be dropped and the tree would look flat. #}
|
||||
<article class="row row-stack depth-{{ min(page.depth, 3) }}">
|
||||
<div class="row-line">
|
||||
<span class="row-icon" aria-hidden="true">{{ page.type == 'post' ? '✎' : '▤' }}</span>
|
||||
<div class="row-main">
|
||||
<h3><a href="{{ path('admin_editor', {id: page.id}) }}">{{ page.title }}</a></h3>
|
||||
<p>/{{ page.path == 'home' ? '' : page.path }} <span>· {{ page.locale|upper }} · {{ page.type == 'post' ? 'Beitrag' : 'Seite' }}{% if page.publish_at %} · geplant für {{ page.publish_at|date('d.m.Y H:i') }} UTC{% endif %}</span></p>
|
||||
<p>/{{ page.path == 'home' ? '' : page.path }} · {{ page.type == 'post' ? 'Beitrag' : 'Seite' }} · {{ page.locale|upper }}{% if page.publish_at %} · geplant für {{ page.publish_at|date('d.m.Y H:i') }} UTC{% endif %}</p>
|
||||
</div>
|
||||
<span class="badge {{ page.published_revision_id == page.draft_revision_id ? 'published' : '' }}">{{ page.published_revision_id is null ? 'Nicht veröffentlicht' : (page.published_revision_id == page.draft_revision_id ? 'Veröffentlicht' : 'Entwurf geändert') }}</span>
|
||||
<a class="secondary" href="{{ path('admin_editor', {id: page.id}) }}" aria-label="{{ page.title }} bearbeiten">Bearbeiten <span aria-hidden="true">→</span></a>
|
||||
{% if is_granted('ROLE_EDITOR') %}
|
||||
<details class="meta-panel">
|
||||
<summary aria-label="Seitendaten von {{ page.title }}">{{ page.type == 'post' ? 'Beitragsdaten' : 'Seitendaten' }}</summary>
|
||||
<form action="{{ path('admin_post_meta', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<label for="robots-{{ page.id }}">Suchmaschinen</label>
|
||||
<select id="robots-{{ page.id }}" name="robots">
|
||||
<option value="index"{{ page.robots != 'noindex' ? ' selected' : '' }}>Darf indexiert werden</option>
|
||||
<option value="noindex"{{ page.robots == 'noindex' ? ' selected' : '' }}>Nicht indexieren</option>
|
||||
</select>
|
||||
<p class="field-help">Nicht indexierte Seiten erscheinen auch nicht in der Sitemap.</p>
|
||||
<label for="og-{{ page.id }}">Vorschaubild beim Teilen</label>
|
||||
<input id="og-{{ page.id }}" name="ogMediaId" maxlength="32" value="{{ page.og_media_id }}" placeholder="ID aus der Mediathek">
|
||||
{% if page.type == 'post' %}
|
||||
<label for="date-{{ page.id }}">Veröffentlicht am</label>
|
||||
<input id="date-{{ page.id }}" name="publishedAt" type="date" value="{{ page.published_at ? page.published_at|date('Y-m-d') : '' }}">
|
||||
<label for="author-{{ page.id }}">Autor</label>
|
||||
<input id="author-{{ page.id }}" name="author" maxlength="120" value="{{ page.author }}">
|
||||
<label for="excerpt-{{ page.id }}">Auszug</label>
|
||||
<textarea id="excerpt-{{ page.id }}" name="excerpt" maxlength="500" rows="3">{{ page.excerpt }}</textarea>
|
||||
<p class="field-help">Erscheint in der Übersicht und im Feed. Leer lassen, um die Seitenbeschreibung zu verwenden.</p>
|
||||
<label for="categories-{{ page.id }}">Kategorien</label>
|
||||
<input id="categories-{{ page.id }}" name="categories" value="{{ page.terms.category }}" placeholder="Projekte, Referenzen">
|
||||
<label for="tags-{{ page.id }}">Schlagwörter</label>
|
||||
<input id="tags-{{ page.id }}" name="tags" value="{{ page.terms.tag }}" placeholder="WordPress, Migration">
|
||||
<p class="field-help">Mehrere durch Komma trennen. Unbekannte Namen werden angelegt.</p>
|
||||
<label for="media-{{ page.id }}">Beitragsbild</label>
|
||||
<input id="media-{{ page.id }}" name="featuredMediaId" maxlength="32" value="{{ page.featured_media_id }}" placeholder="ID aus der Mediathek">
|
||||
{% endif %}
|
||||
<button class="primary" type="submit">Speichern</button>
|
||||
</form>
|
||||
</details>
|
||||
{% if page.published_revision_id is null %}
|
||||
<span class="pill pill-off">Nicht veröffentlicht</span>
|
||||
{% elseif page.published_revision_id == page.draft_revision_id %}
|
||||
<span class="pill pill-live">Veröffentlicht</span>
|
||||
{% else %}
|
||||
<span class="pill pill-draft">Entwurf geändert</span>
|
||||
{% endif %}
|
||||
{% if is_granted('ROLE_EDITOR') and page.path != 'home' %}
|
||||
<details class="meta-panel">
|
||||
<summary aria-label="Adresse von {{ page.title }} ändern">Adresse</summary>
|
||||
<form action="{{ path('admin_move', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<label for="slug-{{ page.id }}">Adresssegment</label>
|
||||
<input id="slug-{{ page.id }}" name="slug" maxlength="80" required value="{{ page.slug }}" pattern="[a-z0-9]+(-[a-z0-9]+)*">
|
||||
<label for="parent-{{ page.id }}">Übergeordnete Seite</label>
|
||||
<select id="parent-{{ page.id }}" name="parent_id">
|
||||
<option value="">— keine, direkt unter der Startseite —</option>
|
||||
{% for parent in parents|filter(candidate => candidate.id != page.id) %}
|
||||
<option value="{{ parent.id }}"{{ page.parent_id == parent.id ? ' selected' : '' }}>{{ parent.title }} (/{{ parent.path }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p class="field-help">Unterseiten ziehen mit. Von jeder alten Adresse wird dauerhaft weitergeleitet.</p>
|
||||
<button class="primary" type="submit">Adresse ändern</button>
|
||||
</form>
|
||||
</details>
|
||||
{% endif %}
|
||||
{% if is_granted('ROLE_PUBLISHER') %}
|
||||
<details class="meta-panel">
|
||||
<summary aria-label="Veröffentlichung von {{ page.title }} planen">{{ page.publish_at ? 'Geplant' : 'Planen' }}</summary>
|
||||
<form action="{{ path('admin_schedule', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<label for="publish-{{ page.id }}">Veröffentlichen am</label>
|
||||
<input id="publish-{{ page.id }}" name="publishAt" type="datetime-local" value="{{ page.publish_at ? page.publish_at|date('Y-m-d\\TH:i') : '' }}">
|
||||
<p class="field-help">Zeiten in UTC. Leer lassen, um die Planung zu entfernen. Die Veröffentlichung erfolgt, sobald <code>cms:publish-due</code> läuft.</p>
|
||||
<button class="primary" type="submit">Zeitpunkt speichern</button>
|
||||
</form>
|
||||
</details>
|
||||
{% endif %}
|
||||
<a class="secondary" href="{{ path('admin_revisions', {id: page.id}) }}">Fassungen</a>
|
||||
{% if is_granted('ROLE_EDITOR') and page.path != 'home' %}
|
||||
<details class="delete-panel">
|
||||
<summary aria-label="{{ page.title }} in den Papierkorb legen">Papierkorb</summary>
|
||||
<form action="{{ path('admin_trash', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<p>Legt „{{ page.title }}“ samt Unterseiten in den Papierkorb. Öffentlich nicht mehr erreichbar, aber jederzeit wiederherstellbar.</p>
|
||||
<button class="secondary" type="submit">In den Papierkorb</button>
|
||||
</form>
|
||||
</details>
|
||||
{% endif %}
|
||||
{% if is_granted('ROLE_ADMIN') %}
|
||||
<details class="delete-panel">
|
||||
<summary aria-label="{{ page.title }} endgültig löschen">Endgültig</summary>
|
||||
<form action="{{ path('admin_delete', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<p>Löscht „{{ page.title }}“ mit allen gespeicherten Fassungen, ohne Papierkorb. Das lässt sich nicht rückgängig machen.</p>
|
||||
<button class="secondary danger-text" type="submit">Endgültig löschen</button>
|
||||
</form>
|
||||
</details>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="empty-state"><h3>Noch keine Seiten vorhanden.</h3><p>Lege oben deine erste Seite an.</p></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if trash is not empty %}
|
||||
<div class="section-heading"><h2>Papierkorb <span class="count">{{ trash|length }}</span></h2><span class="muted">Nicht öffentlich erreichbar, alle Fassungen erhalten.</span></div>
|
||||
<div class="page-list">
|
||||
{% for entry in trash %}
|
||||
<article class="page-card">
|
||||
<div class="page-icon" aria-hidden="true">🗑</div>
|
||||
<div class="page-info">
|
||||
<h3>/{{ entry.path }}</h3>
|
||||
<p>Im Papierkorb seit <time datetime="{{ entry.deletedAt|date('c') }}">{{ entry.deletedAt|date('d.m.Y H:i') }}</time> UTC</p>
|
||||
<div class="row-actions">
|
||||
<a class="secondary" href="{{ path('admin_editor', {id: page.id}) }}" aria-label="{{ page.title }} bearbeiten">Bearbeiten <span aria-hidden="true">→</span></a>
|
||||
<a class="text-button" href="{{ path('admin_revisions', {id: page.id}) }}" aria-label="Fassungen von {{ page.title }}">Fassungen</a>
|
||||
</div>
|
||||
{% if is_granted('ROLE_EDITOR') %}
|
||||
</div>
|
||||
|
||||
{% if is_granted('ROLE_EDITOR') or is_granted('ROLE_PUBLISHER') %}
|
||||
{# One disclosure per row instead of six popovers next to each other: everything that is
|
||||
not the daily „bearbeiten“ lives here and opens in place. #}
|
||||
<details class="sheet">
|
||||
<summary aria-label="Einstellungen von {{ page.title }}">Einstellungen</summary>
|
||||
<div class="sheet-body">
|
||||
{% if is_granted('ROLE_EDITOR') %}
|
||||
<div class="sheet-part">
|
||||
<h4>{{ page.type == 'post' ? 'Beitragsdaten' : 'Seitendaten' }}</h4>
|
||||
<form action="{{ path('admin_post_meta', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="robots-{{ page.id }}">Suchmaschinen</label>
|
||||
<select id="robots-{{ page.id }}" name="robots">
|
||||
<option value="index"{{ page.robots != 'noindex' ? ' selected' : '' }}>Darf indexiert werden</option>
|
||||
<option value="noindex"{{ page.robots == 'noindex' ? ' selected' : '' }}>Nicht indexieren</option>
|
||||
</select>
|
||||
<p class="field-help">Nicht indexierte Seiten erscheinen auch nicht in der Sitemap.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="og-{{ page.id }}">Vorschaubild beim Teilen</label>
|
||||
<input id="og-{{ page.id }}" name="ogMediaId" maxlength="32" value="{{ page.og_media_id }}" placeholder="ID aus der Mediathek">
|
||||
</div>
|
||||
{% if page.type == 'post' %}
|
||||
<div>
|
||||
<label for="date-{{ page.id }}">Veröffentlicht am</label>
|
||||
<input id="date-{{ page.id }}" name="publishedAt" type="date" value="{{ page.published_at ? page.published_at|date('Y-m-d') : '' }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="author-{{ page.id }}">Autor</label>
|
||||
<input id="author-{{ page.id }}" name="author" maxlength="120" value="{{ page.author }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="categories-{{ page.id }}">Kategorien</label>
|
||||
<input id="categories-{{ page.id }}" name="categories" value="{{ page.terms.category }}" placeholder="Projekte, Referenzen">
|
||||
</div>
|
||||
<div>
|
||||
<label for="tags-{{ page.id }}">Schlagwörter</label>
|
||||
<input id="tags-{{ page.id }}" name="tags" value="{{ page.terms.tag }}" placeholder="WordPress, Migration">
|
||||
<p class="field-help">Mehrere durch Komma trennen. Unbekannte Namen werden angelegt.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="media-{{ page.id }}">Beitragsbild</label>
|
||||
<input id="media-{{ page.id }}" name="featuredMediaId" maxlength="32" value="{{ page.featured_media_id }}" placeholder="ID aus der Mediathek">
|
||||
</div>
|
||||
<div>
|
||||
<label for="excerpt-{{ page.id }}">Auszug</label>
|
||||
<textarea id="excerpt-{{ page.id }}" name="excerpt" maxlength="500" rows="3">{{ page.excerpt }}</textarea>
|
||||
<p class="field-help">Erscheint in der Übersicht und im Feed. Leer lassen, um die Seitenbeschreibung zu verwenden.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<button class="primary" type="submit">Speichern</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if is_granted('ROLE_EDITOR') and page.path != 'home' %}
|
||||
<div class="sheet-part">
|
||||
<h4>Adresse</h4>
|
||||
<form action="{{ path('admin_move', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="slug-{{ page.id }}">Adresssegment</label>
|
||||
<input id="slug-{{ page.id }}" name="slug" maxlength="80" required value="{{ page.slug }}" pattern="[a-z0-9]+(-[a-z0-9]+)*">
|
||||
</div>
|
||||
<div>
|
||||
<label for="parent-{{ page.id }}">Übergeordnete Seite</label>
|
||||
<select id="parent-{{ page.id }}" name="parent_id">
|
||||
<option value="">— keine, direkt unter der Startseite —</option>
|
||||
{% for parent in parents|filter(candidate => candidate.id != page.id) %}
|
||||
<option value="{{ parent.id }}"{{ page.parent_id == parent.id ? ' selected' : '' }}>{{ parent.title }} (/{{ parent.path }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p class="field-help">Unterseiten ziehen mit. Von jeder alten Adresse wird dauerhaft weitergeleitet.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="secondary" type="submit">Adresse ändern</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if is_granted('ROLE_PUBLISHER') %}
|
||||
<div class="sheet-part">
|
||||
<h4>Veröffentlichung planen</h4>
|
||||
<form action="{{ path('admin_schedule', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<div class="field">
|
||||
<label for="publish-{{ page.id }}">Veröffentlichen am</label>
|
||||
<input id="publish-{{ page.id }}" name="publishAt" type="datetime-local" value="{{ page.publish_at ? page.publish_at|date('Y-m-d\\TH:i') : '' }}">
|
||||
<p class="field-help">Zeiten in UTC. Leer lassen, um die Planung zu entfernen. Die Veröffentlichung erfolgt, sobald <code>cms:publish-due</code> läuft.</p>
|
||||
</div>
|
||||
<button class="secondary" type="submit">Zeitpunkt speichern</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if (is_granted('ROLE_EDITOR') and page.path != 'home') or is_granted('ROLE_ADMIN') %}
|
||||
<div class="sheet-part">
|
||||
<h4>Entfernen</h4>
|
||||
<div class="sheet-actions">
|
||||
{% if is_granted('ROLE_EDITOR') and page.path != 'home' %}
|
||||
<form action="{{ path('admin_trash', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<button class="secondary" type="submit">In den Papierkorb</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% if is_granted('ROLE_ADMIN') %}
|
||||
{# The class is what the security test looks for: an editor must not even be
|
||||
offered this. #}
|
||||
<div class="delete-panel">
|
||||
<form action="{{ path('admin_delete', {id: page.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<button class="subtle danger-text" type="submit">Endgültig löschen</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p>Der Papierkorb ist umkehrbar: die Seite samt Unterseiten ist öffentlich nicht mehr erreichbar, alle Fassungen bleiben.{% if is_granted('ROLE_ADMIN') %} Endgültig löschen entfernt „{{ page.title }}“ mit allen Fassungen, ohne Papierkorb, und lässt sich nicht rückgängig machen.{% endif %}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="empty"><h3>Noch keine Seiten vorhanden.</h3><p>Lege oben deine erste Seite an.</p></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if trash is not empty %}
|
||||
<div class="section-head"><h2>Papierkorb <span class="count">{{ trash|length }}</span></h2><span class="muted">Nicht öffentlich erreichbar, alle Fassungen erhalten.</span></div>
|
||||
<div class="rows">
|
||||
{% for entry in trash %}
|
||||
<article class="row">
|
||||
<span class="row-icon" aria-hidden="true">🗑</span>
|
||||
<div class="row-main">
|
||||
<h3>/{{ entry.path }}</h3>
|
||||
<p>Im Papierkorb seit <time datetime="{{ entry.deletedAt|date('c') }}">{{ entry.deletedAt|date('d.m.Y H:i') }}</time> UTC</p>
|
||||
</div>
|
||||
{% if is_granted('ROLE_EDITOR') %}
|
||||
<div class="row-actions">
|
||||
<form action="{{ path('admin_restore_page', {id: entry.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<button class="secondary" type="submit">Wiederherstellen</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<p class="footnote">Kant CMS · Visueller Editor, erster Prototyp</p>
|
||||
</main>
|
||||
</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<p class="footnote">Kant CMS · Arbeitsstand</p>
|
||||
{% endblock %}
|
||||
@@ -1,81 +1,74 @@
|
||||
{% extends 'admin/base.html.twig' %}
|
||||
{% extends 'admin/shell.html.twig' %}
|
||||
{% set nav = 'partials' %}
|
||||
{% block title %}Bereiche{% endblock %}
|
||||
{% block body %}
|
||||
<header class="admin-header">
|
||||
<a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
|
||||
<div class="header-actions"><a href="/">Website ansehen ↗</a><span class="user-name">{{ app.user.userIdentifier }}</span><form action="{{ path('admin_logout') }}" method="post"><input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"><button class="subtle" type="submit">Abmelden</button></form></div>
|
||||
</header>
|
||||
<main id="admin-main" class="pages-main" tabindex="-1">
|
||||
<p class="eyebrow">BEREICHE</p><h1>Kopf, Fuß und wiederverwendbare Sektionen</h1>
|
||||
<p class="muted">Alle drei sind Blockdokumente wie eine Seite und im selben Editor frei gestaltbar. Eine <strong>verknüpfte</strong> Sektion wird nicht kopiert: eine Änderung erreicht jede Seite, die sie einbindet.</p>
|
||||
<p class="admin-links">
|
||||
<a class="secondary" href="{{ path('admin_pages') }}">Seiten</a>
|
||||
<a class="secondary" href="{{ path('admin_menus') }}">Menüs</a>
|
||||
<a class="secondary" href="{{ path('admin_theme') }}">Design</a>
|
||||
<a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a>
|
||||
</p>
|
||||
|
||||
{% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
|
||||
<p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
|
||||
{% endfor %}{% endfor %}
|
||||
|
||||
{% if is_granted('ROLE_EDITOR') %}
|
||||
<details class="create-panel"{% if app.flashes is not empty %} open{% endif %}>
|
||||
<summary>Neuen Bereich anlegen</summary>
|
||||
<form action="{{ path('admin_partial_create') }}" method="post" class="create-form">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('partials') }}">
|
||||
<div class="create-grid">
|
||||
<div>
|
||||
<label for="new-name">Name</label>
|
||||
<input id="new-name" name="name" maxlength="120" required autocomplete="off">
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-kind">Art</label>
|
||||
<select id="new-kind" name="kind">
|
||||
{% for value, label in kinds %}<option value="{{ value }}"{{ value == 'section' ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
|
||||
</select>
|
||||
<p class="field-help">Kopf- und Fußbereich gibt es je einmal.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-slug">Adresse</label>
|
||||
<input id="new-slug" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" autocomplete="off">
|
||||
<p class="field-help">Wird im Verknüpfungsblock eingetragen. Leer lassen, um sie aus dem Namen zu bilden.</p>
|
||||
</div>
|
||||
{% block heading %}Kopf, Fuß und wiederverwendbare Sektionen{% endblock %}
|
||||
{% block lead %}Alle drei sind Blockdokumente wie eine Seite und im selben Editor frei gestaltbar. Eine <strong>verknüpfte</strong> Sektion wird nicht kopiert: eine Änderung erreicht jede Seite, die sie einbindet.{% endblock %}
|
||||
{% block content %}
|
||||
{% if is_granted('ROLE_EDITOR') %}
|
||||
<details class="card"{% if app.flashes is not empty %} open{% endif %}>
|
||||
<summary>Neuen Bereich anlegen</summary>
|
||||
<form action="{{ path('admin_partial_create') }}" method="post" class="create-form card-body">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('partials') }}">
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="new-name">Name</label>
|
||||
<input id="new-name" name="name" maxlength="120" required autocomplete="off">
|
||||
</div>
|
||||
<button class="primary" type="submit">Anlegen und bearbeiten</button>
|
||||
</form>
|
||||
</details>
|
||||
{% endif %}
|
||||
|
||||
<div class="section-heading"><h2>Bereiche <span class="count">{{ partials|length }}</span></h2><span class="muted">Gespeicherte Änderungen sind sofort auf allen Seiten sichtbar.</span></div>
|
||||
<div class="page-list">
|
||||
{% for partial in partials %}
|
||||
<article class="page-card">
|
||||
<div class="page-icon" aria-hidden="true">{{ partial.kind == 'header' ? '▀' : (partial.kind == 'footer' ? '▄' : '▥') }}</div>
|
||||
<div class="page-info">
|
||||
<h3><a href="{{ path('admin_partial_editor', {id: partial.id}) }}">{{ partial.name }}</a></h3>
|
||||
<p>{{ kinds[partial.kind] }}{% if partial.kind == 'section' %} · Adresse <code>{{ partial.slug }}</code>{% endif %}
|
||||
{% if partial.kind == 'section' %}
|
||||
· {% if partial.usedBy is empty %}<span>nirgends eingebunden</span>{% else %}eingebunden in {{ partial.usedBy|join(', ') }}{% endif %}
|
||||
{% endif %}
|
||||
</p>
|
||||
<div>
|
||||
<label for="new-kind">Art</label>
|
||||
<select id="new-kind" name="kind">
|
||||
{% for value, label in kinds %}<option value="{{ value }}"{{ value == 'section' ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
|
||||
</select>
|
||||
<p class="field-help">Kopf- und Fußbereich gibt es je einmal.</p>
|
||||
</div>
|
||||
<a class="secondary" href="{{ path('admin_partial_editor', {id: partial.id}) }}" aria-label="{{ partial.name }} bearbeiten">Bearbeiten <span aria-hidden="true">→</span></a>
|
||||
{% if partial.kind == 'section' and is_granted('ROLE_EDITOR') %}
|
||||
<details class="delete-panel">
|
||||
<summary aria-label="{{ partial.name }} entfernen">Entfernen</summary>
|
||||
<form action="{{ path('admin_partial_delete', {id: partial.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('partials') }}">
|
||||
<p>Entfernt „{{ partial.name }}“.{% if partial.usedBy is not empty %} <strong>Noch eingebunden in {{ partial.usedBy|join(', ') }}</strong> – dort erscheint danach nichts mehr.{% endif %}</p>
|
||||
<button class="secondary danger-text" type="submit">Sektion entfernen</button>
|
||||
</form>
|
||||
</details>
|
||||
<div>
|
||||
<label for="new-slug">Adresse</label>
|
||||
<input id="new-slug" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" autocomplete="off">
|
||||
<p class="field-help">Wird im Verknüpfungsblock eingetragen. Leer lassen, um sie aus dem Namen zu bilden.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="primary" type="submit">Anlegen und bearbeiten</button>
|
||||
</form>
|
||||
</details>
|
||||
{% endif %}
|
||||
|
||||
<div class="section-head"><h2>Bereiche <span class="count">{{ partials|length }}</span></h2><span class="muted">Gespeicherte Änderungen sind sofort auf allen Seiten sichtbar.</span></div>
|
||||
<div class="rows">
|
||||
{% for partial in partials %}
|
||||
<article class="row row-stack">
|
||||
<div class="row-line">
|
||||
<span class="row-icon" aria-hidden="true">{{ partial.kind == 'header' ? '▀' : (partial.kind == 'footer' ? '▄' : '▥') }}</span>
|
||||
<div class="row-main">
|
||||
<h3><a href="{{ path('admin_partial_editor', {id: partial.id}) }}">{{ partial.name }}</a></h3>
|
||||
<p>{{ kinds[partial.kind] }}{% if partial.kind == 'section' %} · Adresse <code>{{ partial.slug }}</code>{% endif %}
|
||||
{% if partial.kind == 'section' %}
|
||||
· {% if partial.usedBy is empty %}<span>nirgends eingebunden</span>{% else %}eingebunden in {{ partial.usedBy|join(', ') }}{% endif %}
|
||||
{% endif %}
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="empty-state"><h3>Noch keine Bereiche.</h3><p>Ein frisches Setup legt Kopf- und Fußbereich automatisch an.</p></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="footnote">Kant CMS · Visueller Editor, erster Prototyp</p>
|
||||
</main>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row-actions">
|
||||
<a class="secondary" href="{{ path('admin_partial_editor', {id: partial.id}) }}" aria-label="{{ partial.name }} bearbeiten">Bearbeiten <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
{% if partial.kind == 'section' and is_granted('ROLE_EDITOR') %}
|
||||
<details class="sheet">
|
||||
<summary aria-label="Einstellungen von {{ partial.name }}">Einstellungen</summary>
|
||||
<div class="sheet-body">
|
||||
<div class="sheet-part">
|
||||
<h4>Entfernen</h4>
|
||||
<p>Entfernt „{{ partial.name }}“.{% if partial.usedBy is not empty %} <strong>Noch eingebunden in {{ partial.usedBy|join(', ') }}</strong> – dort erscheint danach nichts mehr.{% endif %}</p>
|
||||
<form action="{{ path('admin_partial_delete', {id: partial.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('partials') }}">
|
||||
<button class="subtle danger-text" type="submit">Sektion entfernen</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="empty"><h3>Noch keine Bereiche.</h3><p>Ein frisches Setup legt Kopf- und Fußbereich automatisch an.</p></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="footnote">Kant CMS · Arbeitsstand</p>
|
||||
{% endblock %}
|
||||
@@ -1,45 +1,32 @@
|
||||
{% extends 'admin/base.html.twig' %}
|
||||
{% extends 'admin/shell.html.twig' %}
|
||||
{% set nav = 'pages' %}
|
||||
{% block title %}Fassungen von {{ title }}{% endblock %}
|
||||
{% block body %}
|
||||
<header class="admin-header">
|
||||
<a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
|
||||
<div class="header-actions"><a href="/">Website ansehen ↗</a><span class="user-name">{{ app.user.userIdentifier }}</span><form action="{{ path('admin_logout') }}" method="post"><input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"><button class="subtle" type="submit">Abmelden</button></form></div>
|
||||
</header>
|
||||
<main id="admin-main" class="pages-main" tabindex="-1">
|
||||
<p class="eyebrow">FASSUNGEN</p><h1>{{ title }}</h1>
|
||||
<p class="muted">Jedes Speichern erzeugt eine eigene Fassung. Eine frühere Fassung wiederherzustellen überschreibt nichts: sie wird als neuer Entwurf gespeichert, der bisherige Stand bleibt in der Liste.</p>
|
||||
<p class="admin-links">
|
||||
<a class="secondary" href="{{ path('admin_pages') }}">Seiten</a>
|
||||
<a class="secondary" href="{{ path('admin_editor', {id: page.id}) }}">Im Editor öffnen</a>
|
||||
</p>
|
||||
|
||||
{% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
|
||||
<p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
|
||||
{% endfor %}{% endfor %}
|
||||
|
||||
<div class="section-heading"><h2>Verlauf <span class="count">{{ revisions|length }}</span></h2><span class="muted">Neueste zuerst, höchstens 30.</span></div>
|
||||
<div class="page-list">
|
||||
{% for revision in revisions %}
|
||||
<article class="page-card">
|
||||
<div class="page-icon" aria-hidden="true">⟲</div>
|
||||
<div class="page-info">
|
||||
<h3>{{ revision.title }}</h3>
|
||||
<p><time datetime="{{ revision.createdAt|date('c') }}">{{ revision.createdAt|date('d.m.Y H:i') }}</time> UTC</p>
|
||||
</div>
|
||||
{% if revision.published %}<span class="badge published">Veröffentlicht</span>{% endif %}
|
||||
{% if revision.draft %}<span class="badge">Aktueller Entwurf</span>{% endif %}
|
||||
{% if not revision.draft %}
|
||||
<form action="{{ path('admin_restore_revision', {id: page.id, revision: revision.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<button class="secondary" type="submit">Als Entwurf wiederherstellen</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="empty-state"><h3>Noch keine Fassungen.</h3></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="footnote">Kant CMS · Visueller Editor, erster Prototyp</p>
|
||||
</main>
|
||||
{% block heading %}{{ title }}{% endblock %}
|
||||
{% block lead %}Jedes Speichern erzeugt eine eigene Fassung. Eine frühere Fassung wiederherzustellen überschreibt nichts: sie wird als neuer Entwurf gespeichert, der bisherige Stand bleibt in der Liste.{% endblock %}
|
||||
{% block actions %}<a class="secondary" href="{{ path('admin_editor', {id: page.id}) }}">Seite bearbeiten <span aria-hidden="true">→</span></a>{% endblock %}
|
||||
{% block content %}
|
||||
<div class="section-head"><h2>Verlauf <span class="count">{{ revisions|length }}</span></h2><span class="muted">Neueste zuerst, höchstens 30.</span></div>
|
||||
<div class="rows">
|
||||
{% for revision in revisions %}
|
||||
<article class="row">
|
||||
<span class="row-icon" aria-hidden="true">⟲</span>
|
||||
<div class="row-main">
|
||||
<h3>{{ revision.title }}</h3>
|
||||
<p><time datetime="{{ revision.createdAt|date('c') }}">{{ revision.createdAt|date('d.m.Y H:i') }}</time> UTC</p>
|
||||
</div>
|
||||
{% if revision.published %}<span class="pill pill-live">Veröffentlicht</span>{% endif %}
|
||||
{% if revision.draft %}<span class="pill pill-draft">Aktueller Entwurf</span>{% endif %}
|
||||
{% if not revision.draft %}
|
||||
<form action="{{ path('admin_restore_revision', {id: page.id, revision: revision.id}) }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('pages') }}">
|
||||
<input type="hidden" name="expectedVersion" value="{{ page.version }}">
|
||||
<button class="secondary" type="submit">Als Entwurf wiederherstellen</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="empty"><h3>Noch keine Fassungen.</h3></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="footnote">Kant CMS · Arbeitsstand</p>
|
||||
{% endblock %}
|
||||
+107
-124
@@ -1,129 +1,112 @@
|
||||
{% extends 'admin/base.html.twig' %}
|
||||
{% extends 'admin/shell.html.twig' %}
|
||||
{% set nav = 'settings' %}
|
||||
{% block title %}Einstellungen{% endblock %}
|
||||
{% block body %}
|
||||
<header class="admin-header">
|
||||
<a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
|
||||
<div class="header-actions"><a href="/">Website ansehen ↗</a><span class="user-name">{{ app.user.userIdentifier }}</span><form action="{{ path('admin_logout') }}" method="post"><input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"><button class="subtle" type="submit">Abmelden</button></form></div>
|
||||
</header>
|
||||
<main id="admin-main" class="pages-main" tabindex="-1">
|
||||
<p class="eyebrow">EINSTELLUNGEN</p><h1>Unternehmen und Adressen</h1>
|
||||
<p class="muted">Aus diesen Angaben entstehen die strukturierten Daten der Startseite. Was hier steht, ist genau das, was Suchmaschinen lesen – es gibt keine zweite, unsichtbare Fassung.</p>
|
||||
<p class="admin-links">
|
||||
<a class="secondary" href="{{ path('admin_pages') }}">Seiten</a>
|
||||
<a class="secondary" href="{{ path('admin_menus') }}">Menüs</a> <a class="secondary" href="{{ path('admin_partials') }}">Bereiche</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a>
|
||||
<a class="secondary" href="{{ path('admin_forms') }}">Formulare</a>
|
||||
<a class="secondary" href="/sitemap.xml">Sitemap ↗</a>
|
||||
<a class="secondary" href="/robots.txt">robots.txt ↗</a>
|
||||
</p>
|
||||
|
||||
{% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
|
||||
<p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
|
||||
{% endfor %}{% endfor %}
|
||||
|
||||
<section class="menu-section">
|
||||
<div class="section-heading"><h2>Unternehmensdaten</h2><span class="muted">Grundlage für Organization und LocalBusiness</span></div>
|
||||
<form action="{{ path('admin_settings_save') }}" method="post" class="menu-form">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('settings') }}">
|
||||
<div class="create-grid">
|
||||
<div>
|
||||
<label for="legalName">Name des Unternehmens</label>
|
||||
<input id="legalName" name="legalName" maxlength="200" value="{{ settings.legalName }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone">Telefon</label>
|
||||
<input id="phone" name="phone" maxlength="40" value="{{ settings.phone }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">E-Mail</label>
|
||||
<input id="email" name="email" type="email" maxlength="120" value="{{ settings.email }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="street">Straße und Hausnummer</label>
|
||||
<input id="street" name="street" maxlength="120" value="{{ settings.street }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="postalCode">Postleitzahl</label>
|
||||
<input id="postalCode" name="postalCode" maxlength="16" value="{{ settings.postalCode }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="city">Ort</label>
|
||||
<input id="city" name="city" maxlength="120" value="{{ settings.city }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="country">Land</label>
|
||||
<input id="country" name="country" maxlength="2" pattern="[A-Za-z]{2}" value="{{ settings.country }}">
|
||||
<p class="field-help">Zweibuchstabiger Code, zum Beispiel DE.</p>
|
||||
</div>
|
||||
{% block heading %}Unternehmen und Adressen{% endblock %}
|
||||
{% block lead %}Aus diesen Angaben entstehen die strukturierten Daten der Startseite. Was hier steht, ist genau das, was Suchmaschinen lesen – es gibt keine zweite, unsichtbare Fassung.{% endblock %}
|
||||
{% block content %}
|
||||
<section class="stack-section">
|
||||
<div class="section-head"><h2>Unternehmensdaten</h2><span class="muted">Grundlage für Organization und LocalBusiness</span></div>
|
||||
<form action="{{ path('admin_settings_save') }}" method="post" class="card card-body">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('settings') }}">
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="legalName">Name des Unternehmens</label>
|
||||
<input id="legalName" name="legalName" maxlength="200" value="{{ settings.legalName }}">
|
||||
</div>
|
||||
<label for="homePath">Startseite</label>
|
||||
<select id="homePath" name="homePath">
|
||||
{% for page in choosableHome %}<option value="{{ page.path }}"{{ settings.homePath == page.path ? ' selected' : '' }}>{{ page.title }} (/{{ page.path }})</option>{% endfor %}
|
||||
</select>
|
||||
<p class="field-help">Diese Seite antwortet unter <code>/</code>; ihre eigene Adresse leitet dauerhaft dorthin. Nur veröffentlichte Seiten sind wählbar, und die Startseite lässt sich nicht umbenennen oder in den Papierkorb legen.</p>
|
||||
<label for="description">Kurzbeschreibung</label>
|
||||
<input id="description" name="description" maxlength="300" value="{{ settings.description }}">
|
||||
<label for="sameAs">Profile</label>
|
||||
<textarea id="sameAs" name="sameAs" rows="3" placeholder="https://www.linkedin.com/company/…">{{ settings.sameAs|join('\n') }}</textarea>
|
||||
<p class="field-help">Eine HTTPS-Adresse je Zeile, höchstens zwanzig.</p>
|
||||
<label class="check-label" for="localBusiness"><input id="localBusiness" name="localBusiness" type="checkbox" value="1"{{ settings.localBusiness ? ' checked' : '' }}> Als lokales Unternehmen auszeichnen</label>
|
||||
<p class="field-help">Braucht mindestens Straße und Ort. Sinnvoll bei einem Standort mit Kundenverkehr.</p>
|
||||
<label class="check-label" for="llmsTxt"><input id="llmsTxt" name="llmsTxt" type="checkbox" value="1"{{ settings.llmsTxt ? ' checked' : '' }}> <code>llms.txt</code> ausliefern</label>
|
||||
<p class="field-help">Eine maschinenlesbare Liste der veröffentlichten, indexierbaren Seiten. Optional. Kein Rankingfaktor und keine Voraussetzung für irgendeine Suchfunktion; ohne Aktivierung antwortet die Adresse mit 404.</p>
|
||||
<label for="robotsExtra">Zusätzliche Zeilen für robots.txt</label>
|
||||
<textarea id="robotsExtra" name="robotsExtra" rows="3">{{ settings.robotsExtra }}</textarea>
|
||||
<p class="field-help">Nur Kommentarzeilen und einfache Anweisungen wie <code>Disallow: /pfad</code>. Höchstens dreißig Zeilen.</p>
|
||||
<button class="primary" type="submit">Unternehmensdaten speichern</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="menu-section">
|
||||
<div class="section-heading"><h2>Weiterleitungen <span class="count">{{ redirects|length }}</span></h2><span class="muted">Werden vor dem 404 geprüft.</span></div>
|
||||
<form action="{{ path('admin_redirect_save') }}" method="post" class="menu-form">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('settings') }}">
|
||||
<div class="create-grid">
|
||||
<div>
|
||||
<label for="from">Alte Adresse</label>
|
||||
<input id="from" name="from" maxlength="400" required placeholder="alte-seite">
|
||||
</div>
|
||||
<div>
|
||||
<label for="to">Neue Adresse</label>
|
||||
<input id="to" name="to" maxlength="400" placeholder="leistungen/webdesign">
|
||||
<p class="field-help">Bei 410 leer lassen.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="status">Art</label>
|
||||
<select id="status" name="status">
|
||||
<option value="301">301 – dauerhaft verschoben</option>
|
||||
<option value="410">410 – entfernt</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone">Telefon</label>
|
||||
<input id="phone" name="phone" maxlength="40" value="{{ settings.phone }}">
|
||||
</div>
|
||||
<button class="primary" type="submit">Weiterleitung speichern</button>
|
||||
</form>
|
||||
<div>
|
||||
<label for="email">E-Mail</label>
|
||||
<input id="email" name="email" type="email" maxlength="120" value="{{ settings.email }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="street">Straße und Hausnummer</label>
|
||||
<input id="street" name="street" maxlength="120" value="{{ settings.street }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="postalCode">Postleitzahl</label>
|
||||
<input id="postalCode" name="postalCode" maxlength="16" value="{{ settings.postalCode }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="city">Ort</label>
|
||||
<input id="city" name="city" maxlength="120" value="{{ settings.city }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="country">Land</label>
|
||||
<input id="country" name="country" maxlength="2" pattern="[A-Za-z]{2}" value="{{ settings.country }}">
|
||||
<p class="field-help">Zweibuchstabiger Code, zum Beispiel DE.</p>
|
||||
</div>
|
||||
</div>
|
||||
<label for="homePath">Startseite</label>
|
||||
<select id="homePath" name="homePath">
|
||||
{% for page in choosableHome %}<option value="{{ page.path }}"{{ settings.homePath == page.path ? ' selected' : '' }}>{{ page.title }} (/{{ page.path }})</option>{% endfor %}
|
||||
</select>
|
||||
<p class="field-help">Diese Seite antwortet unter <code>/</code>; ihre eigene Adresse leitet dauerhaft dorthin. Nur veröffentlichte Seiten sind wählbar, und die Startseite lässt sich nicht umbenennen oder in den Papierkorb legen.</p>
|
||||
<label for="description">Kurzbeschreibung</label>
|
||||
<input id="description" name="description" maxlength="300" value="{{ settings.description }}">
|
||||
<label for="sameAs">Profile</label>
|
||||
<textarea id="sameAs" name="sameAs" rows="3" placeholder="https://www.linkedin.com/company/…">{{ settings.sameAs|join('\n') }}</textarea>
|
||||
<p class="field-help">Eine HTTPS-Adresse je Zeile, höchstens zwanzig.</p>
|
||||
<label class="check-label" for="localBusiness"><input id="localBusiness" name="localBusiness" type="checkbox" value="1"{{ settings.localBusiness ? ' checked' : '' }}> Als lokales Unternehmen auszeichnen</label>
|
||||
<p class="field-help">Braucht mindestens Straße und Ort. Sinnvoll bei einem Standort mit Kundenverkehr.</p>
|
||||
<label class="check-label" for="llmsTxt"><input id="llmsTxt" name="llmsTxt" type="checkbox" value="1"{{ settings.llmsTxt ? ' checked' : '' }}> <code>llms.txt</code> ausliefern</label>
|
||||
<p class="field-help">Eine maschinenlesbare Liste der veröffentlichten, indexierbaren Seiten. Optional. Kein Rankingfaktor und keine Voraussetzung für irgendeine Suchfunktion; ohne Aktivierung antwortet die Adresse mit 404.</p>
|
||||
<label for="robotsExtra">Zusätzliche Zeilen für robots.txt</label>
|
||||
<textarea id="robotsExtra" name="robotsExtra" rows="3">{{ settings.robotsExtra }}</textarea>
|
||||
<p class="field-help">Nur Kommentarzeilen und einfache Anweisungen wie <code>Disallow: /pfad</code>. Höchstens dreißig Zeilen.</p>
|
||||
<button class="primary" type="submit">Unternehmensdaten speichern</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{% if redirects is not empty %}
|
||||
<table class="menu-table redirect-table">
|
||||
<caption class="visually-hidden">Gespeicherte Weiterleitungen</caption>
|
||||
<thead><tr><th scope="col">Alte Adresse</th><th scope="col">Ziel</th><th scope="col">Art</th><th scope="col">Entfernen</th></tr></thead>
|
||||
<tbody>
|
||||
{% for entry in redirects %}
|
||||
<tr>
|
||||
<td><code>/{{ entry.from }}</code></td>
|
||||
<td>{% if entry.to %}<code>/{{ entry.to }}</code>{% else %}<span class="muted">—</span>{% endif %}</td>
|
||||
<td>{{ entry.status }}</td>
|
||||
<td>
|
||||
<form action="{{ path('admin_redirect_save') }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('settings') }}">
|
||||
<input type="hidden" name="remove" value="{{ entry.id }}">
|
||||
<button class="text-button danger-text" type="submit" aria-label="Weiterleitung von /{{ entry.from }} entfernen">Entfernen</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
</section>
|
||||
<p class="footnote">Kant CMS · Visueller Editor, erster Prototyp</p>
|
||||
</main>
|
||||
<section class="stack-section">
|
||||
<div class="section-head"><h2>Weiterleitungen <span class="count">{{ redirects|length }}</span></h2><span class="muted">Werden vor dem 404 geprüft.</span></div>
|
||||
<form action="{{ path('admin_redirect_save') }}" method="post" class="card card-body">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('settings') }}">
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="from">Alte Adresse</label>
|
||||
<input id="from" name="from" maxlength="400" required placeholder="alte-seite">
|
||||
</div>
|
||||
<div>
|
||||
<label for="to">Neue Adresse</label>
|
||||
<input id="to" name="to" maxlength="400" placeholder="leistungen/webdesign">
|
||||
<p class="field-help">Bei 410 leer lassen.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="status">Art</label>
|
||||
<select id="status" name="status">
|
||||
<option value="301">301 – dauerhaft verschoben</option>
|
||||
<option value="410">410 – entfernt</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="primary" type="submit">Weiterleitung speichern</button>
|
||||
</form>
|
||||
|
||||
{% if redirects is not empty %}
|
||||
<table class="table redirect-table">
|
||||
<caption class="visually-hidden">Gespeicherte Weiterleitungen</caption>
|
||||
<thead><tr><th scope="col">Alte Adresse</th><th scope="col">Ziel</th><th scope="col">Art</th><th scope="col">Entfernen</th></tr></thead>
|
||||
<tbody>
|
||||
{% for entry in redirects %}
|
||||
<tr>
|
||||
<td><code>/{{ entry.from }}</code></td>
|
||||
<td>{% if entry.to %}<code>/{{ entry.to }}</code>{% else %}<span class="muted">—</span>{% endif %}</td>
|
||||
<td>{{ entry.status }}</td>
|
||||
<td>
|
||||
<form action="{{ path('admin_redirect_save') }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('settings') }}">
|
||||
<input type="hidden" name="remove" value="{{ entry.id }}">
|
||||
<button class="text-button danger-text" type="submit" aria-label="Weiterleitung von /{{ entry.from }} entfernen">Entfernen</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
</section>
|
||||
<p class="footnote">Kant CMS · Arbeitsstand</p>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,53 @@
|
||||
{# The frame around every management screen. One sidebar, always the same, so each area is one
|
||||
click away and the current one is visible. Screens fill in heading, lead, actions and content. #}
|
||||
{% extends 'admin/base.html.twig' %}
|
||||
{% block body_class %}admin-shell{% endblock %}
|
||||
{% block body %}
|
||||
<header class="shell-nav">
|
||||
<a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
|
||||
<nav aria-label="Verwaltung">
|
||||
<p class="nav-label" id="nav-content">INHALT</p>
|
||||
<ul class="nav-list" aria-labelledby="nav-content">
|
||||
{% set entries = [
|
||||
{id: 'pages', route: 'admin_pages', icon: '▤', label: 'Seiten'},
|
||||
{id: 'partials', route: 'admin_partials', icon: '◫', label: 'Bereiche'},
|
||||
{id: 'menus', route: 'admin_menus', icon: '☰', label: 'Menüs'},
|
||||
{id: 'media', route: 'admin_media', icon: '▩', label: 'Mediathek'},
|
||||
{id: 'forms', route: 'admin_forms', icon: '✉', label: 'Formulare'}
|
||||
] %}
|
||||
{% for entry in entries %}
|
||||
<li><a class="nav-item" href="{{ path(entry.route) }}"{{ nav|default('') == entry.id ? ' aria-current="page"' : '' }}><span class="nav-icon" aria-hidden="true">{{ entry.icon }}</span>{{ entry.label }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p class="nav-label" id="nav-site">WEBSITE</p>
|
||||
<ul class="nav-list" aria-labelledby="nav-site">
|
||||
<li><a class="nav-item" href="{{ path('admin_theme') }}"{{ nav|default('') == 'theme' ? ' aria-current="page"' : '' }}><span class="nav-icon" aria-hidden="true">◐</span>Design</a></li>
|
||||
<li><a class="nav-item" href="{{ path('admin_settings') }}"{{ nav|default('') == 'settings' ? ' aria-current="page"' : '' }}><span class="nav-icon" aria-hidden="true">⚙</span>Einstellungen</a></li>
|
||||
<li><a class="nav-item nav-out" href="/">Website ansehen</a></li>
|
||||
<li><a class="nav-item nav-out" href="/beitraege">Beitragsübersicht</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="shell-foot">
|
||||
<p class="shell-user"><span class="shell-avatar" aria-hidden="true">{{ app.user.userIdentifier|first|upper }}</span><strong>{{ app.user.userIdentifier }}</strong></p>
|
||||
<form action="{{ path('admin_logout') }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}">
|
||||
<button class="subtle" type="submit">Abmelden</button>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
<main id="admin-main" class="shell-main" tabindex="-1">
|
||||
<div class="shell-top">
|
||||
<div class="shell-heading">
|
||||
<h1>{% block heading %}Verwaltung{% endblock %}</h1>
|
||||
<p class="muted">{% block lead %}{% endblock %}</p>
|
||||
</div>
|
||||
<div class="shell-actions">{% block actions %}{% endblock %}</div>
|
||||
</div>
|
||||
<div class="shell-body stack">
|
||||
{% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
|
||||
<p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
|
||||
{% endfor %}{% endfor %}
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
+103
-119
@@ -1,125 +1,109 @@
|
||||
{% extends 'admin/base.html.twig' %}
|
||||
{% extends 'admin/shell.html.twig' %}
|
||||
{% set nav = 'theme' %}
|
||||
{% block title %}Design{% endblock %}
|
||||
{% block body %}
|
||||
<header class="admin-header">
|
||||
<a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
|
||||
<div class="header-actions"><a href="/">Website ansehen ↗</a><span class="user-name">{{ app.user.userIdentifier }}</span><form action="{{ path('admin_logout') }}" method="post"><input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"><button class="subtle" type="submit">Abmelden</button></form></div>
|
||||
</header>
|
||||
<main id="admin-main" class="pages-main" tabindex="-1">
|
||||
<p class="eyebrow">DESIGN</p><h1>Farben, Schriften, Grundtypografie</h1>
|
||||
<p class="muted">Das ist die Grundlage für die ganze Website. Jeder Block erbt von hier und kann jeden Wert einzeln überschreiben – je Gerät und beim Überfahren.</p>
|
||||
<p class="admin-links">
|
||||
<a class="secondary" href="{{ path('admin_pages') }}">Seiten</a>
|
||||
<a class="secondary" href="{{ path('admin_menus') }}">Menüs</a>
|
||||
<a class="secondary" href="{{ path('admin_forms') }}">Formulare</a>
|
||||
<a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a>
|
||||
</p>
|
||||
{% block heading %}Farben, Schriften, Grundtypografie{% endblock %}
|
||||
{% block lead %}Das ist die Grundlage für die ganze Website. Jeder Block erbt von hier und kann jeden Wert einzeln überschreiben – je Gerät und beim Überfahren.{% endblock %}
|
||||
{% block content %}
|
||||
<form action="{{ path('admin_theme_save') }}" method="post" class="card card-body theme-form">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('theme') }}">
|
||||
|
||||
{% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
|
||||
<p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
|
||||
{% endfor %}{% endfor %}
|
||||
<div class="section-head"><h2>Farbpalette <span class="count">{{ theme.colors|length }}</span></h2><span class="muted">Beliebig viele eigene Farben</span></div>
|
||||
<table class="table theme-table">
|
||||
<caption class="visually-hidden">Farben der Website. Einen Schlüssel zu leeren entfernt die Farbe.</caption>
|
||||
<thead><tr><th scope="col">Schlüssel</th><th scope="col">Name</th><th scope="col">Farbe</th><th scope="col">Wert</th></tr></thead>
|
||||
<tbody>
|
||||
{% for row in theme.colors|merge([{key: '', name: '', value: '#000000'}, {key: '', name: '', value: '#000000'}, {key: '', name: '', value: '#000000'}]) %}
|
||||
{% set n = loop.index0 %}
|
||||
<tr{% if row.key == '' %} class="table-new"{% endif %}>
|
||||
<td><input name="colors[{{ n }}][key]" maxlength="32" value="{{ row.key }}" pattern="[a-z][a-z0-9-]*" aria-label="Schlüssel von Farbe {{ n + 1 }}" placeholder="akzent"></td>
|
||||
<td><input name="colors[{{ n }}][name]" maxlength="60" value="{{ row.name }}" aria-label="Name von Farbe {{ n + 1 }}" placeholder="Akzent"></td>
|
||||
<td><input type="color" name="colors[{{ n }}][value]" value="{{ row.value }}" aria-label="Farbwähler für Farbe {{ n + 1 }}" class="theme-swatch"></td>
|
||||
<td><code>{{ row.value }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="field-help">Der Schlüssel wird im Editor als <code>@schlüssel</code> verwendet und bleibt bei Farbänderungen gleich – eine Farbe ändern wirkt überall, wo sie benutzt wird.</p>
|
||||
|
||||
<form action="{{ path('admin_theme_save') }}" method="post" class="menu-form theme-form">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('theme') }}">
|
||||
<div class="section-head"><h2>Schriften <span class="count">{{ theme.fonts|length }}</span></h2><span class="muted">Systemschrift oder Google Fonts</span></div>
|
||||
<table class="table theme-table">
|
||||
<caption class="visually-hidden">Schriften der Website. Einen Schlüssel zu leeren entfernt die Schrift.</caption>
|
||||
<thead><tr><th scope="col">Schlüssel</th><th scope="col">Name</th><th scope="col">Quelle</th><th scope="col">Schriftname</th><th scope="col">Ersatz</th><th scope="col">Schnitte</th></tr></thead>
|
||||
<tbody>
|
||||
{% for row in theme.fonts|merge([{key: '', name: '', family: '', source: 'google', fallback: 'sans-serif', weights: [400, 700]}]) %}
|
||||
{% set n = loop.index0 %}
|
||||
<tr{% if row.key == '' %} class="table-new"{% endif %}>
|
||||
<td><input name="fonts[{{ n }}][key]" maxlength="40" value="{{ row.key }}" pattern="[a-z][a-z0-9-]*" aria-label="Schlüssel von Schrift {{ n + 1 }}" placeholder="heading"></td>
|
||||
<td><input name="fonts[{{ n }}][name]" maxlength="60" value="{{ row.name }}" aria-label="Name von Schrift {{ n + 1 }}" placeholder="Überschriften"></td>
|
||||
<td>
|
||||
<select name="fonts[{{ n }}][source]" aria-label="Quelle von Schrift {{ n + 1 }}">
|
||||
<option value="system"{{ row.source == 'system' ? ' selected' : '' }}>Systemschrift</option>
|
||||
<option value="google"{{ row.source == 'google' ? ' selected' : '' }}>Google Fonts</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input name="fonts[{{ n }}][family]" maxlength="48" value="{{ row.family }}" aria-label="Schriftname von Schrift {{ n + 1 }}" placeholder="Inter"></td>
|
||||
<td>
|
||||
<select name="fonts[{{ n }}][fallback]" aria-label="Ersatzschrift von Schrift {{ n + 1 }}">
|
||||
{% for value, label in fallbacks %}<option value="{{ value }}"{{ row.fallback == value ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
<td class="weights-cell">
|
||||
{% for weight in weights %}
|
||||
<label><input type="checkbox" name="fonts[{{ n }}][weights][]" value="{{ weight }}"{{ weight in row.weights ? ' checked' : '' }}> {{ weight }}</label>
|
||||
{% endfor %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="field-help">Bei Google Fonts den Namen genau wie dort schreiben, zum Beispiel <code>Inter</code> oder <code>Playfair Display</code>. Je Schnitt wird eine Datei geladen – nur ankreuzen, was wirklich gebraucht wird. <strong>Google Fonts bedeutet eine Anfrage an Google bei jedem Seitenaufruf.</strong></p>
|
||||
|
||||
<div class="section-heading"><h2>Farbpalette <span class="count">{{ theme.colors|length }}</span></h2><span class="muted">Beliebig viele eigene Farben</span></div>
|
||||
<table class="menu-table">
|
||||
<caption class="visually-hidden">Farben der Website. Einen Schlüssel zu leeren entfernt die Farbe.</caption>
|
||||
<thead><tr><th scope="col">Schlüssel</th><th scope="col">Name</th><th scope="col">Farbe</th><th scope="col">Wert</th></tr></thead>
|
||||
<tbody>
|
||||
{% for row in theme.colors|merge([{key: '', name: '', value: '#000000'}, {key: '', name: '', value: '#000000'}, {key: '', name: '', value: '#000000'}]) %}
|
||||
{% set n = loop.index0 %}
|
||||
<tr{% if row.key == '' %} class="menu-row-new"{% endif %}>
|
||||
<td><input name="colors[{{ n }}][key]" maxlength="32" value="{{ row.key }}" pattern="[a-z][a-z0-9-]*" aria-label="Schlüssel von Farbe {{ n + 1 }}" placeholder="akzent"></td>
|
||||
<td><input name="colors[{{ n }}][name]" maxlength="60" value="{{ row.name }}" aria-label="Name von Farbe {{ n + 1 }}" placeholder="Akzent"></td>
|
||||
<td><input type="color" name="colors[{{ n }}][value]" value="{{ row.value }}" aria-label="Farbwähler für Farbe {{ n + 1 }}" class="theme-swatch"></td>
|
||||
<td><code>{{ row.value }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="field-help">Der Schlüssel wird im Editor als <code>@schlüssel</code> verwendet und bleibt bei Farbänderungen gleich – eine Farbe ändern wirkt überall, wo sie benutzt wird.</p>
|
||||
|
||||
<div class="section-heading"><h2>Schriften <span class="count">{{ theme.fonts|length }}</span></h2><span class="muted">Systemschrift oder Google Fonts</span></div>
|
||||
<table class="menu-table">
|
||||
<caption class="visually-hidden">Schriften der Website. Einen Schlüssel zu leeren entfernt die Schrift.</caption>
|
||||
<thead><tr><th scope="col">Schlüssel</th><th scope="col">Name</th><th scope="col">Quelle</th><th scope="col">Schriftname</th><th scope="col">Ersatz</th><th scope="col">Schnitte</th></tr></thead>
|
||||
<tbody>
|
||||
{% for row in theme.fonts|merge([{key: '', name: '', family: '', source: 'google', fallback: 'sans-serif', weights: [400, 700]}]) %}
|
||||
{% set n = loop.index0 %}
|
||||
<tr{% if row.key == '' %} class="menu-row-new"{% endif %}>
|
||||
<td><input name="fonts[{{ n }}][key]" maxlength="40" value="{{ row.key }}" pattern="[a-z][a-z0-9-]*" aria-label="Schlüssel von Schrift {{ n + 1 }}" placeholder="heading"></td>
|
||||
<td><input name="fonts[{{ n }}][name]" maxlength="60" value="{{ row.name }}" aria-label="Name von Schrift {{ n + 1 }}" placeholder="Überschriften"></td>
|
||||
<td>
|
||||
<select name="fonts[{{ n }}][source]" aria-label="Quelle von Schrift {{ n + 1 }}">
|
||||
<option value="system"{{ row.source == 'system' ? ' selected' : '' }}>Systemschrift</option>
|
||||
<option value="google"{{ row.source == 'google' ? ' selected' : '' }}>Google Fonts</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input name="fonts[{{ n }}][family]" maxlength="48" value="{{ row.family }}" aria-label="Schriftname von Schrift {{ n + 1 }}" placeholder="Inter"></td>
|
||||
<td>
|
||||
<select name="fonts[{{ n }}][fallback]" aria-label="Ersatzschrift von Schrift {{ n + 1 }}">
|
||||
{% for value, label in fallbacks %}<option value="{{ value }}"{{ row.fallback == value ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
<td class="weights-cell">
|
||||
{% for weight in weights %}
|
||||
<label><input type="checkbox" name="fonts[{{ n }}][weights][]" value="{{ weight }}"{{ weight in row.weights ? ' checked' : '' }}> {{ weight }}</label>
|
||||
{% endfor %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="field-help">Bei Google Fonts den Namen genau wie dort schreiben, zum Beispiel <code>Inter</code> oder <code>Playfair Display</code>. Je Schnitt wird eine Datei geladen – nur ankreuzen, was wirklich gebraucht wird. <strong>Google Fonts bedeutet eine Anfrage an Google bei jedem Seitenaufruf.</strong></p>
|
||||
|
||||
<div class="section-heading"><h2>Grundtypografie</h2><span class="muted">Gilt überall, solange ein Block nichts anderes sagt</span></div>
|
||||
<div class="create-grid">
|
||||
<div>
|
||||
<label for="base-font">Schrift für Fließtext</label>
|
||||
<select id="base-font" name="base[fontFamily]">
|
||||
{% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.base.fontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-heading-font">Schrift für Überschriften</label>
|
||||
<select id="base-heading-font" name="base[headingFontFamily]">
|
||||
{% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.base.headingFontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-size">Grundgröße</label>
|
||||
<input id="base-size" name="base[fontSize]" value="{{ theme.base.fontSize }}" placeholder="18px">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-line">Zeilenhöhe</label>
|
||||
<input id="base-line" name="base[lineHeight]" type="number" step="0.05" min="0.8" max="3" value="{{ theme.base.lineHeight }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-scale">Überschriftenskala</label>
|
||||
<input id="base-scale" name="base[headingScale]" type="number" step="0.01" min="1" max="2" value="{{ theme.base.headingScale }}">
|
||||
<p class="field-help">1,25 ergibt eine ruhige Staffelung, 1,5 eine sehr kontrastreiche.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-container">Inhaltsbreite</label>
|
||||
<input id="base-container" name="base[containerWidth]" value="{{ theme.base.containerWidth }}" placeholder="1240px">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-color">Textfarbe</label>
|
||||
<input id="base-color" name="base[color]" value="{{ theme.base.color }}" placeholder="@ink">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-bg">Hintergrundfarbe</label>
|
||||
<input id="base-bg" name="base[backgroundColor]" value="{{ theme.base.backgroundColor }}" placeholder="@paper">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-link">Linkfarbe</label>
|
||||
<input id="base-link" name="base[linkColor]" value="{{ theme.base.linkColor }}" placeholder="@accent">
|
||||
</div>
|
||||
<div class="section-head"><h2>Grundtypografie</h2><span class="muted">Gilt überall, solange ein Block nichts anderes sagt</span></div>
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="base-font">Schrift für Fließtext</label>
|
||||
<select id="base-font" name="base[fontFamily]">
|
||||
{% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.base.fontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<p class="field-help">Farben entweder als <code>@schlüssel</code> aus der Palette oder als Wert wie <code>#1a2b3c</code>.</p>
|
||||
<button class="primary" type="submit">Design speichern</button>
|
||||
</form>
|
||||
<p class="footnote">Kant CMS · Visueller Editor, erster Prototyp</p>
|
||||
</main>
|
||||
<div>
|
||||
<label for="base-heading-font">Schrift für Überschriften</label>
|
||||
<select id="base-heading-font" name="base[headingFontFamily]">
|
||||
{% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.base.headingFontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-size">Grundgröße</label>
|
||||
<input id="base-size" name="base[fontSize]" value="{{ theme.base.fontSize }}" placeholder="18px">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-line">Zeilenhöhe</label>
|
||||
<input id="base-line" name="base[lineHeight]" type="number" step="0.05" min="0.8" max="3" value="{{ theme.base.lineHeight }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-scale">Überschriftenskala</label>
|
||||
<input id="base-scale" name="base[headingScale]" type="number" step="0.01" min="1" max="2" value="{{ theme.base.headingScale }}">
|
||||
<p class="field-help">1,25 ergibt eine ruhige Staffelung, 1,5 eine sehr kontrastreiche.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-container">Inhaltsbreite</label>
|
||||
<input id="base-container" name="base[containerWidth]" value="{{ theme.base.containerWidth }}" placeholder="1240px">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-color">Textfarbe</label>
|
||||
<input id="base-color" name="base[color]" value="{{ theme.base.color }}" placeholder="@ink">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-bg">Hintergrundfarbe</label>
|
||||
<input id="base-bg" name="base[backgroundColor]" value="{{ theme.base.backgroundColor }}" placeholder="@paper">
|
||||
</div>
|
||||
<div>
|
||||
<label for="base-link">Linkfarbe</label>
|
||||
<input id="base-link" name="base[linkColor]" value="{{ theme.base.linkColor }}" placeholder="@accent">
|
||||
</div>
|
||||
</div>
|
||||
<p class="field-help">Farben entweder als <code>@schlüssel</code> aus der Palette oder als Wert wie <code>#1a2b3c</code>.</p>
|
||||
<button class="primary" type="submit">Design speichern</button>
|
||||
</form>
|
||||
<p class="footnote">Kant CMS · Arbeitsstand</p>
|
||||
{% endblock %}
|
||||
@@ -398,7 +398,7 @@ final class EditorSecurityTest extends WebTestCase
|
||||
$client = $this->login('editor');
|
||||
$crawler = $client->request('GET', '/admin/forms');
|
||||
self::assertResponseIsSuccessful();
|
||||
$token = $crawler->filter('.menu-form input[name="_csrf_token"]')->first()->attr('value');
|
||||
$token = $crawler->filter('.form-def input[name="_csrf_token"]')->first()->attr('value');
|
||||
$field = ['fields' => [['name' => 'email', 'type' => 'email', 'label' => 'E-Mail', 'required' => '1']]];
|
||||
|
||||
$client->request('POST', '/admin/forms/neu', [...$field, '_csrf_token' => 'wrong', 'slug' => 'kontakt', 'name' => 'Kontakt', 'recipient' => 'info@kant-it.de', 'expectedVersion' => 0]);
|
||||
|
||||
Reference in new issue
Block a user