Ulas
b730ece159
fix(styles): resolve design system audit violations
...
- Add --color-text-on-accent token to tokens.css
- Migrate all hardcoded color:#fff/#ffffff to var(--color-text-on-accent) across all module stylesheets
- Fix toggle thumb background (#fff -> var(--color-surface)) for dark mode
- Migrate hardcoded transition durations to token vars (--transition-fast/base/slow)
2026-04-05 00:28:29 +02:00
Ulas
8f8b3f7951
feat(ux): microinteraction improvements
...
- Zentralisiere @keyframes check-pop in layout.css (war dupliziert in shopping.css + tasks.css)
- Subtask-Checkbox erhaelt check-pop Animation (konsistent mit Haupt-Checkbox)
- Quick-Add: Checkmark-Feedback auf +-Button nach erfolgreichem Hinzufuegen (700ms, DOM-API)
- Swipe-Affordance Hint: swipe-row--hint via localStorage-Counter (max. 3x, nur Mobile)
2026-04-04 23:53:11 +02:00
Ulas
187af593f7
fix(styles): resolve design system audit violations
...
- Replace off-grid spacing (3px, 5px) with space tokens (--space-0h, --space-1)
- Replace below-minimum font-size 9px with var(--text-xs) in calendar, dashboard, notes
- Replace hardcoded 2.5rem with var(--text-4xl) in weather widget
- Replace hardcoded box-shadow with var(--shadow-sm) in toggle thumb
- Replace 0.85em and #666 with type/color tokens in print styles
2026-04-04 23:07:39 +02:00
Ulas
2508473265
fix(pwa): fix UI overlap, scroll bleed and wrong nav height on iOS
...
Three root causes fixed:
1. Double safe-area padding: pwa.css set padding-top/bottom on body
globally, but page containers already account for safe-area-inset
in their height calculations. Removed body vertical padding (kept
only in standalone media query for padding-top).
2. Wrong nav token: all page containers used --nav-height-mobile (56px)
instead of --nav-bottom-height (68px = 56px scroll + 12px dots),
causing 12px of content to render behind the bottom nav.
3. Scroll bleed: fixed-height page containers lacked overflow:hidden,
allowing scroll events to propagate to the body. Added
overscroll-behavior-y:contain on app-content globally.
Fixes #16
2026-04-04 22:02:19 +02:00
Ulas
d92f7ca446
fix(design): replace hardcoded values with design tokens
...
Audit found ~35 violations against the token system. Fixed:
- Hardcoded shadows in layout.css replaced with --shadow-sm/md
- 8 rgba colors extracted to new glass tokens (--color-glass-*)
- border-radius: 50% replaced with var(--radius-full)
- ~25 off-grid spacing values (5px, 6px, 7px, 14px, 15px, 22px,
26px, 34px) aligned to 4px grid using space tokens
2026-04-04 06:50:19 +02:00
Ulas
1122bd269b
style: replace em dashes with hyphens throughout codebase
...
Replace all — with - in all source files (JS, CSS, HTML, JSON,
Markdown) for consistency and readability.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com >
2026-04-03 17:04:39 +02:00
Ulas
6f22ef8268
feat: list items get module accent border-left stripe
...
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com >
2026-03-31 15:00:41 +02:00
Ulas
3bf2d2bbc0
feat: toolbar top-border stripe uses module accent colour
2026-03-31 14:54:10 +02:00
Ulas
c74f482a0e
refactor: move shared swipe CSS from tasks.css to layout.css
...
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com >
2026-03-31 12:43:35 +02:00
Ulas
0eab480a0e
style: unify all empty states to shared .empty-state class across all modules
...
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com >
2026-03-30 17:25:13 +02:00
Ulas
194728bbe9
style: tie FAB colors to per-module accent tokens
...
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com >
2026-03-30 16:55:33 +02:00
Ulas
624f3ab763
style: unify card padding to 16px across all modules
2026-03-30 16:43:05 +02:00
ulsklyc
4cd3299f38
a11y: --text-2xs Token entfernt, 12px Minimum (Redesign Phase G)
...
- --text-2xs (11px) aus tokens.css gelöscht
- Alle 8 Referenzen → --text-xs (12px) migriert:
Nav-Labels, Badges, Event-Time, Meal-Slots, Avatare
- 12px Mindestgröße für alle sichtbaren Texte (Mobile-PWA-Lesbarkeit)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com >
2026-03-26 13:50:31 +01:00
ulsklyc
152246185e
a11y: Touch-Target System mit Token-basierter Sizing (Redesign Phase E)
...
- Neue Tokens: --target-sm (32px), --target-md (40px), --target-lg (48px)
- Globale min-height:44px Regel aus reset.css entfernt
- Alle 28 min-height:unset Overrides eliminiert
- Strategy A: Buttons, Nav-Items, Inputs → 48px mobile, 40px desktop
- Strategy B: Kleine Elemente (Checkboxen, Swatches, Delete-Buttons)
→ ::before Pseudo-Element expandiert Touch-Area auf 48×48px
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com >
2026-03-26 13:43:12 +01:00
ulsklyc
7e718e2422
feat: shared modal system + migrate tasks module
...
- Add public/components/modal.js with focus-trap, escape-handler,
overlay-click, focus-restore, scroll-lock, aria-modal (Spec §5.1/§5.2)
- Migrate tasks.js from custom modal to shared openModal/closeModal API
- Remove .modal-backdrop/.modal/.modal__* styles from tasks.css
- Add .modal-panel--sm/--lg sizing variants to layout.css
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com >
2026-03-26 12:04:57 +01:00
ulsklyc
76165da592
design: Frontend-Redesign v2 — Design-System, kompaktere UI, Mikrointeraktionen
...
Umfassendes Redesign des gesamten Frontends in 9 Schritten:
1. Design-Tokens: Neutral-Farbskala (50–950), Modul-Akzentfarben,
--text-2xs Token, Easing-Kurven, Z-Index-System, Dark-Mode-Overrides
2. Reset: Reduced-motion Query (prefers-reduced-motion)
3. Sidebar/Navigation: Flaches Design, Glassmorphismus Bottom-Nav,
Akzentstreifen-Indikator, collapsed/expanded States
4. Layout-Grid: Master-Detail, Content-Aside, Sticky-Header-Primitives
5. Cards/Container: Einheitliches Card-Pattern, Modal-System (Bottom-Sheet
mobil, zentriert Desktop), Skeleton-Loading, Empty-States
6. Dashboard: Kompaktere Widgets, Token-basierte Farben/Schatten,
4-Spalten-Grid ab 1440px
7. Module: Mobile-first Kanban/Day-Slots/Budget-Summary, border-subtle
für sekundäre Trennlinien, responsive Quick-Add, Token-Migration
aller hardcoded px/rgba-Werte
8. Mikrointeraktionen: Page-out Fade, Checkbox-Pop-Animation,
Hover-States für Filter/Tabs/Toggles, Toast-Ausblendung,
done-State Opacity-Transition
9. Feinschliff: Print-Styles, --text-2xs Token für Micro-Labels,
Konsistenz-Audit (alle 9/10/11px → Token)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com >
2026-03-25 20:46:45 +01:00
ulsklyc
3903df6445
feat: Swipe-Gesten für Task-Listenansicht (Mobil)
...
Swipe links = Status-Toggle (offen ↔ erledigt), Swipe rechts = Bearbeiten-Modal.
- renderSwipeRow(): Wrapper mit zwei Reveal-Panels hinter jeder Karte
- wireSwipeGestures(): Scroll/Swipe-Erkennung via Touch-Events
· SWIPE_THRESHOLD = 80px für Aktion, frühe Scroll-Erkennung ab 12px vertikal
· Dämpfung nach Threshold (elastischer Überschuss)
· Reveal-Panels blenden proportional ein (0 → 1 über Threshold-Weg)
· Haptic Feedback via navigator.vibrate (40ms links, 20ms rechts)
- tasks.css: .swipe-row, .swipe-reveal--done/--edit, .swipe-row--swiping
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com >
2026-03-24 21:52:15 +01:00
ulsklyc
450ae37f42
feat: Phase 4 — Wetter-Widget, Wiederkehrende Aufgaben, Kanban-Ansicht, PWA
...
- server/routes/weather.js: OpenWeatherMap-Proxy (aktuelles Wetter + 3-Tage-Forecast,
30-min-Cache, graceful fallback wenn kein API-Key gesetzt)
- public/pages/dashboard.js: Weather-Widget parallel mit Dashboard-Daten laden
- public/styles/dashboard.css: Weather-Widget-Styles (Gradient, Forecast-Strip)
- server/services/recurrence.js: RRULE-Parser (FREQ=DAILY/WEEKLY/MONTHLY, BYDAY,
INTERVAL, UNTIL) + nextOccurrence()-Funktion
- server/routes/tasks.js: Bei PATCH /:id/status = done → nächste Instanz
wiederkehrender Aufgaben automatisch anlegen
- public/pages/tasks.js: Kanban-Ansicht (3 Spalten: Offen/In Bearbeitung/Erledigt)
mit HTML5 Drag & Drop, View-Toggle (Liste/Kanban)
- public/styles/tasks.css: Kanban-Board-Styles (Spalten, Cards, Drag-over-Highlight)
- public/sw.js: Cache-Version auf v2, alle Modul-CSS-Dateien im APP_SHELL-Cache
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com >
2026-03-24 21:32:22 +01:00
ulsklyc
433124790f
feat: Phase 2 Schritt 9 — Aufgaben-Modul (CRUD + Listenansicht + Subtasks)
...
Backend:
- GET /tasks mit Filtern (status, priority, assigned_to, category)
- GET /tasks/:id mit Subtasks
- POST /tasks mit Tiefenlimit (max. 2 Ebenen)
- PUT /tasks/:id, PATCH /tasks/:id/status, DELETE /tasks/:id
- GET /tasks/meta/options für Dropdown-Daten
- Sortierung: Priorität → Fälligkeit, done-Tasks ans Ende
Frontend:
- Listenansicht gruppiert nach Kategorie oder Fälligkeit (umschaltbar)
- Filter-Chips: Status, Priorität, Person (horizontal scrollbar)
- Task-Card: Prioritäts-Badge, Fälligkeitsdatum, Avatar, Edit-Button
- Status-Toggle per Checkbox (open ↔ done)
- Subtask-Fortschrittsbalken + ein-/ausklappbare Subtask-Liste
- Subtask inline abhaken oder neu erstellen
- Overdue-Badge in der Navigation
- CRUD-Modal: Titel, Beschreibung, Priorität, Kategorie, Datum, Zuweisung
- Skeleton-Loading während API-Call
Tests: 17/17 bestanden (54 gesamt)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com >
2026-03-24 18:02:59 +01:00