simon/dudi

Simon Kühn fd473f00af Initial commit: Dudi habit tracker

Symfony 8 SPA with Doctrine ORM, Symfony Security, vanilla JS frontend.
Migrated from plain PHP (delight-im/auth + raw SQL) to full Symfony stack.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-04-29 15:40:57 +02:00

2.8 KiB

Raw Blame History

Zieltracker — Refactor & Design-Update

Datum: 2026-04-17

Überblick

Refactoring der Single-File-App in separate Dateien, neue einklappbare Karten, überarbeitete Stats, Desktop-Layout und Sortierung nach Tagesstatus.

1. Dateistruktur

Aus index.html (alles inline) werden drei Dateien:

index.html — nur HTML-Gerüst + <link> + <script>
style.css — alle Styles
app.js — gesamte Logik

2. Layout — Desktop max-width

.main-wrap {
  max-width: 480px;
  margin: 0 auto;
}

Header und Content-Bereich beide im max-width-Container
Außerhalb: background: var(--bg) bleibt sichtbar als grauer Rand
Auf Handy ändert sich nichts (412px Breite des OnePlus 9 Pro passt rein)

3. Einklappbare Karten

Standardverhalten

Alle Karten starten eingeklappt beim Laden
Kein Persist in localStorage — jeder Reload beginnt komplett eingeklappt
Klick auf Karte (Header-Bereich) klappt auf/zu
Pfeil: ▸ eingeklappt, ▴ ausgeklappt

Sortierung

Offen (heute noch nicht erledigt) — oben, normale Opazität
Heute erledigt — unten, leicht abgedunkelt (opacity: 0.7)

Trennlabels zwischen den Gruppen: OFFEN / HEUTE ERLEDIGT (10px, monospace, uppercase, grau)

Eingeklappt zeigt

[Name]  [✎]
[Noch XT · endet DD. Mon · heute: GEMACHT/TAGESZIEL · total: DONE/TOTAL]
[Badge]  [▸]
[Fortschrittsbalken]

heute: X/Y farbkodiert: rot (0), amber (teilweise), grün (erreicht), blau (über Ziel)
Fortschrittsbalken ohne Beschriftung darunter

Ausgeklappt zeigt

[Name]  [✎]
[Noch XT · endet DD. Mon]
[Badge]  [▴]
[Fortschrittsbalken]
[X Stück gemacht          62% von 500]   ← prog-row
[Heute-Stats-Block]
[Dots + Legende]
[Eingabe-Panel (wenn Tag auswählbar)]
[Ziel löschen]

4. Stats — Umbau

Alt (4 Blöcke, immer sichtbar)

Heute noch · Gemacht · Puffer · Täglich

Neu (1 Gruppe "Heute", 3 Blöcke, nur ausgeklappt)

Gemacht	Tagesziel	Noch
30 Stk	50 Stk	20 Stk (farbig)

Gruppe hat Label "HEUTE" (9px monospace uppercase)
Noch farbkodiert identisch zu heute: in der Meta-Zeile
Puffer und Täglich entfallen als eigene Blöcke (Badge zeigt Puffer/Rückstand bereits)

5. Eingabe

Bleibt unverändert: Freie Zahleingabe + + Satz Button.

6. Zusammenfassung der Änderungen

Was	Vorher	Nachher
Dateistruktur	1 HTML-Datei	index.html + style.css + app.js
Desktop-Breite	volle Breite	max-width 480px, zentriert
Karten	immer ausgeklappt	eingeklappt, aufklappbar
Sortierung	Erstellungsreihenfolge	Offen zuerst, Erledigt unten
Stats	4 Blöcke (Heute noch/Gemacht/Puffer/Täglich)	3 Blöcke Gruppe "Heute"
Meta-Zeile (eingeklappt)	Noch XT · endet DD	+ heute: X/Y · total: X/Y

2.8 KiB Raw Blame History