From 6fe4b6951476e568ffde9a6105c56c9747651ef3 Mon Sep 17 00:00:00 2001 From: mARTin-B78 Date: Mon, 7 Sep 2026 14:08:23 +0200 Subject: [PATCH] feat: Heute-Hervorhebung im Spaltenkopf, Termin-Symbole nach oben rechts Zwei UI-Wuensche aus der Wochenansicht (TODO.md Block I). Der Spaltenkopf ist position: sticky und deckte mit --weekly-bg ab -- die Hervorhebung des heutigen Tages begann daher erst unterhalb von Wochentag und Datum. Jetzt faerbt sich der Kopf mit. Die Symbole sitzen statt unten rechts oben rechts. Damit Titel und Uhrzeit nicht darunter laufen, bekommen sie rechts Freiraum -- ueber :has(.event-icons-row) nur dort, wo ueberhaupt Symbole erscheinen. Fuer beide Darstellungen umgesetzt: Zeitraster und Liste. Verifiziert: npm run build Exit 0. Das Ergebnis ist rein visuell und daher nur im Browser wirklich pruefbar. v1.119.0 Co-Authored-By: Claude Opus 5 --- CHANGELOG.md | 11 +++++++++++ TODO.md | 8 ++++---- package-lock.json | 4 ++-- package.json | 2 +- src/app/globals.css | 19 ++++++++++++++++++- 5 files changed, 36 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e43b69d..a36af8a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,17 @@ All notable changes to this project are documented in this file. +## [1.119.0] - 2026-09-07 + +### Changed +- Der laufende Tag ist jetzt auch im Spaltenkopf hervorgehoben, nicht mehr nur im + Spaltenkörper. Der Kopf ist `position: sticky` und deckte mit `--weekly-bg` ab, weshalb + die Färbung erst unterhalb von Wochentag und Datum begann. +- Die Symbole in Kalenderterminen (Wiederholung, Anbieter) sitzen jetzt oben rechts statt + unten rechts. Titel und Uhrzeit bekommen dort Freiraum, damit sich nichts überlappt — + über `:has(.event-icons-row)` nur bei Terminen, die überhaupt Symbole zeigen. Umgesetzt + für beide Darstellungen: Zeitraster und Liste. + ## [1.118.2] - 2026-09-07 ### Fixed diff --git a/TODO.md b/TODO.md index 485f04a..d2dc006 100644 --- a/TODO.md +++ b/TODO.md @@ -281,8 +281,8 @@ Umgestellt auf `dataSources.query()`; die Suche filtert jetzt auf `data_source` ## Block I — UI-Wünsche -### I1. Aktuellen Tag auch im Spaltenkopf hervorheben -- [ ] Hervorhebungsfarbe zusätzlich hinter Wochentagsname und Datum legen +### I1. Aktuellen Tag auch im Spaltenkopf hervorheben *(erledigt, bitte ansehen)* +- [x] Hervorhebungsfarbe zusätzlich hinter Wochentagsname und Datum gelegt **Wunsch:** Der laufende Tag soll deutlicher auffallen. Aktuell ist nur der Spaltenkörper eingefärbt, der Kopfbereich mit "SEP 7 / MONDAY" bleibt weiß. @@ -296,8 +296,8 @@ offenbar mit eigenem Hintergrund. Der Wochentagsname hat bereits eine eigene Reg **Zu klären:** Der Kopf ist vermutlich `sticky` und braucht deshalb einen deckenden Hintergrund — die Farbe muss also gesetzt, nicht nur geerbt werden. -### I2. Symbole in Kalenderterminen nach oben rechts -- [ ] `.event-icons-row` von unten rechts nach oben rechts verschieben +### I2. Symbole in Kalenderterminen nach oben rechts *(erledigt, bitte ansehen)* +- [x] `.event-icons-row` nach oben rechts verschoben, Titel bekommt rechts Freiraum **Wunsch:** Die kleinen Symbole (Wiederholung, Anbieter) sitzen unten rechts im Termin und sollen nach oben rechts. diff --git a/package-lock.json b/package-lock.json index 258a9cf..e387714 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "my-weekly-todo-list", - "version": "1.118.2", + "version": "1.119.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "my-weekly-todo-list", - "version": "1.118.2", + "version": "1.119.0", "license": "MIT", "dependencies": { "@auth/prisma-adapter": "^2.11.1", diff --git a/package.json b/package.json index 47af4c4..a98349f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "my-weekly-todo-list", - "version": "1.118.2", + "version": "1.119.0", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "main": "index.js", "scripts": { diff --git a/src/app/globals.css b/src/app/globals.css index 060c45c..39efa88 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -667,6 +667,12 @@ h3 { background-color: var(--weekly-today-highlight); } +/* Der Spaltenkopf ist sticky und deckt deshalb mit --weekly-bg ab. Ohne diese Regel + endet die Hervorhebung des heutigen Tages unterhalb von Wochentag und Datum. */ +.weekly-day-column.is-today .weekly-day-header { + background-color: var(--weekly-today-highlight); +} + .weekly-day-column.is-past .weekly-day-name, .weekly-day-column.is-past .weekly-day-date { color: var(--weekly-past-color, #a6a6a7); @@ -2569,6 +2575,13 @@ h3 { font-weight: 500; } +/* Gleiche Ueberlegung wie im Zeitraster: Die Symbole sitzen jetzt oben rechts, der Titel + braucht dort Freiraum. Nur bei Terminen, die ueberhaupt Symbole zeigen. */ +.weekly-calendar-event:has(.event-icons-row) .weekly-calendar-event-title, +.weekly-calendar-event:has(.event-icons-row) .weekly-calendar-event-time { + padding-right: 34px; +} + .weekly-calendar-event-title { color: var(--weekly-text); font-family: var(--weekly-task-font, var(--weekly-font)); @@ -3098,6 +3111,10 @@ h3 { box-sizing: border-box; } +.time-slot-event:has(.event-icons-row) .event-title-row { + padding-right: 34px; +} + .time-slot-event .event-title-row { display: flex; align-items: flex-start; @@ -3182,7 +3199,7 @@ h3 { /* Event icons row (recurring, note, provider) */ .event-icons-row { position: absolute; - bottom: 2px; + top: 2px; right: 4px; display: flex; align-items: center;