Teil 5/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
Lies vorher CLAUDE.md und die dort verlinkten Dokumente, die für diese Aufgabe relevant sind
(mindestens docs/architektur.md und docs/redaktion.md). Halte dich an Coding und Documentation
Convention. Erst Plan vorstellen, auf mein OK warten, dann umsetzen.
Design-Leitplanken für alle Design-Aufgaben:
- Bestehende Tokens in wwwroot/app.css erweitern, keine Hardcode-Farben; jede neue Farbe mit
Dark-Mode-Variante im bestehenden prefers-color-scheme-Block; WCAG AA.
- Keine Hover-Bewegung (transform/translate) – bewusst entfernt in c67c71e. Hover = Farbe,
Schatten, Rahmen.
- Kommentarstil von app.css beibehalten (erklärt das Warum).
- Layout muss mit beliebigem Redaktions-Markdown und leeren/fehlenden Feldern funktionieren.
- UI-Texte deutsch, ohne Anglizismen.
- Tests: xUnit + Shouldly. Reine Logik als Unit-Test; Darstellung über RouteSmokeTests
(HTML der gerenderten Route prüfen) gegen den PocketBaseFixture. Keine neuen Test-Pakete
(bUnit, Playwright …) ohne Begründung und Rückfrage.
- KEINE Änderung am PocketBase-Datenmodell: keine neuen Collections, Felder, Select-Werte
oder Regeln, collections_schema.json bleibt unverändert. Grund: Es gibt noch keinen Weg,
Schemaänderungen nach Produktion zu übertragen. Wenn eine Lösung nur mit Schemaänderung
ginge: anhalten, Alternative ohne Schemaänderung vorschlagen und die Schema-Variante nur als
Notiz für später ausgeben. Neue Records im Dev-Seed und im Fixture sind erlaubt.
Aufgabe: .post-list/.event-list (app.css) und PostsEmbed/EventsEmbed/PostList/EventList
ausdrucksstärker machen.
Beiträge:
- Teaser: erste ~160 Zeichen des Bodys als Klartext (Markdown entfernen, an Wortgrenze kürzen,
„…“). Als reine, getestete Hilfsfunktion. Ein PocketBase-Feld „summary“ nur vorschlagen, nicht
anlegen.
- Linker Akzentstreifen, Datum mit calendar-Symbol, „Weiterlesen“ mit Pfeil (ohne Bewegung).
- /posts: neuester Beitrag als größere Karte über die volle Breite, Rest im 2-Spalten-Grid.
Termine:
- Kalenderblatt links: Monat kurz in Versalien (grün), Tag groß, Wochentag klein; darunter
Uhrzeit (clock) und Ort (map-pin). end nutzen, wenn gesetzt (Zeitspanne bzw. mehrtägig),
note als Teaser. Formatierung über bestehende EventDateFormat, Zeitzonen-Logik nicht anfassen.
- Bug: Karten verlinken auf /events selbst (Termine haben keinen slug). Karte wird kein Link
mehr. Optional pro Termin „In Kalender übernehmen“ → /events/{id}.ics, wenn IcsCalendar das
mit wenig Aufwand für einen einzelnen Termin kann.
- Bug: Der feste .intro-Absatz in EventList doppelt den Body des events-Records. Streichen;
der Abo-Link wird ein .btn-secondary „Kalender abonnieren“ mit calendar-plus.
- Vergangene Termine kompakt in <details> „Vergangene Termine anzeigen (n)“.
Tests: Unit-Tests für Teaser (Kürzung, Markdown-Entfernung, kurze/leere Bodies) und
Kalenderblatt-Format (deutsche Monate, Wochentag, Zeitspanne). Smoke: /events enthält keinen
Link auf /events in den Karten; Einleitungstext kommt genau einmal vor; ggf. /events/{id}.ics
liefert ein gültiges VEVENT.
Teil 5/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
```
Lies vorher CLAUDE.md und die dort verlinkten Dokumente, die für diese Aufgabe relevant sind
(mindestens docs/architektur.md und docs/redaktion.md). Halte dich an Coding und Documentation
Convention. Erst Plan vorstellen, auf mein OK warten, dann umsetzen.
Design-Leitplanken für alle Design-Aufgaben:
- Bestehende Tokens in wwwroot/app.css erweitern, keine Hardcode-Farben; jede neue Farbe mit
Dark-Mode-Variante im bestehenden prefers-color-scheme-Block; WCAG AA.
- Keine Hover-Bewegung (transform/translate) – bewusst entfernt in c67c71e. Hover = Farbe,
Schatten, Rahmen.
- Kommentarstil von app.css beibehalten (erklärt das Warum).
- Layout muss mit beliebigem Redaktions-Markdown und leeren/fehlenden Feldern funktionieren.
- UI-Texte deutsch, ohne Anglizismen.
- Tests: xUnit + Shouldly. Reine Logik als Unit-Test; Darstellung über RouteSmokeTests
(HTML der gerenderten Route prüfen) gegen den PocketBaseFixture. Keine neuen Test-Pakete
(bUnit, Playwright …) ohne Begründung und Rückfrage.
- KEINE Änderung am PocketBase-Datenmodell: keine neuen Collections, Felder, Select-Werte
oder Regeln, collections_schema.json bleibt unverändert. Grund: Es gibt noch keinen Weg,
Schemaänderungen nach Produktion zu übertragen. Wenn eine Lösung nur mit Schemaänderung
ginge: anhalten, Alternative ohne Schemaänderung vorschlagen und die Schema-Variante nur als
Notiz für später ausgeben. Neue Records im Dev-Seed und im Fixture sind erlaubt.
Aufgabe: .post-list/.event-list (app.css) und PostsEmbed/EventsEmbed/PostList/EventList
ausdrucksstärker machen.
Beiträge:
- Teaser: erste ~160 Zeichen des Bodys als Klartext (Markdown entfernen, an Wortgrenze kürzen,
„…“). Als reine, getestete Hilfsfunktion. Ein PocketBase-Feld „summary“ nur vorschlagen, nicht
anlegen.
- Linker Akzentstreifen, Datum mit calendar-Symbol, „Weiterlesen“ mit Pfeil (ohne Bewegung).
- /posts: neuester Beitrag als größere Karte über die volle Breite, Rest im 2-Spalten-Grid.
Termine:
- Kalenderblatt links: Monat kurz in Versalien (grün), Tag groß, Wochentag klein; darunter
Uhrzeit (clock) und Ort (map-pin). end nutzen, wenn gesetzt (Zeitspanne bzw. mehrtägig),
note als Teaser. Formatierung über bestehende EventDateFormat, Zeitzonen-Logik nicht anfassen.
- Bug: Karten verlinken auf /events selbst (Termine haben keinen slug). Karte wird kein Link
mehr. Optional pro Termin „In Kalender übernehmen“ → /events/{id}.ics, wenn IcsCalendar das
mit wenig Aufwand für einen einzelnen Termin kann.
- Bug: Der feste .intro-Absatz in EventList doppelt den Body des events-Records. Streichen;
der Abo-Link wird ein .btn-secondary „Kalender abonnieren“ mit calendar-plus.
- Vergangene Termine kompakt in <details> „Vergangene Termine anzeigen (n)“.
Tests: Unit-Tests für Teaser (Kürzung, Markdown-Entfernung, kurze/leere Bodies) und
Kalenderblatt-Format (deutsche Monate, Wochentag, Zeitspanne). Smoke: /events enthält keinen
Link auf /events in den Karten; Einleitungstext kommt genau einmal vor; ggf. /events/{id}.ics
liefert ein gültiges VEVENT.
```
Gehört zu #37.
Tom
added this to the Elternbeirat-Website milestone 2026-10-01 11:06:50 +02:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Teil 5/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
Gehört zu #37.