feat: Heute-Hervorhebung im Spaltenkopf, Termin-Symbole nach oben rechts
Some checks are pending
Playwright Tests / test (push) Waiting to run
Test and SonarQube / quality (push) Waiting to run

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 <noreply@anthropic.com>
This commit is contained in:
mARTin-B78 2026-09-07 14:08:23 +02:00
parent 53de4017e5
commit 6fe4b69514
5 changed files with 36 additions and 8 deletions

View File

@ -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

View File

@ -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.

4
package-lock.json generated
View File

@ -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",

View File

@ -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": {

View File

@ -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;