diff --git a/AGENTS.md b/AGENTS.md index 5af68f3..c0da38a 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1019,6 +1019,24 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed the ios one at matching specificity, but fixed too rather than left as a landmine). Verified live via screenshot: all 5 tab icons render correctly in icon-only mode, active tab still shows its filled pill. +- [x] Eighth round the same day (2026-08-16) — Reifen tile relabel + reflow, per explicit request: + "Sommer"/"Winter" → **"Sommerräder"/"Winterräder"** (only the section headline text in + `vReifen()`'s `satz()`; the singular "Sommerrad"/"Winterrad" photo label and the `data-satz` + value compared against `CAR.reifen.aktiv` elsewhere were deliberately left untouched — the first + is grammatically correct as-is for a single wheel photo, the second is an internal state key, not + display text, and changing it would break the mount-toggle matching in the `[data-satz]` click + handler). That headline is now an actual **headline** — new `.tile-headline` class (20px, + `var(--fg)`, same typographic family as the page `.title` one step down) replacing the small, + muted `.label` styling every other in-tile section title uses. + Reflowed so the headline+km sit **above** "Montiert" instead of the wheel photo overlaying it: + new `.radkopf-row` (flex, `justify-content:space-between`) puts the headline/km block and the + wheel photo side by side at the tile's top, both top-aligned; `.montiert` dropped `position: + absolute` (no longer needs to float over the photo now that the photo isn't in that space) and + became a normal-flow pill with `margin-top` under the headline block — simpler than the previous + overlay hack, same 44×44pt invisible tap target via `::before`. `.bildbox.radbild`'s `margin- + left:auto` (added last round to right-align it under its old block-flow parent) was removed since + `.radkopf-row`'s flex layout does that job now. Deployed to `audi_ha_test`, confirmed live via + screenshot for both Sommerräder (mounted) and Winterräder (unmounted) tiles. - [ ] Fix remaining documentation drift (statistics claim, README gaps, obsolete TODO comment) — text-only changes; INSTALL.md's WLAN/TommiG1 drift and stale variable names were fixed 2026-08-12 (see section B); `DESIGN_REVIEW_2026-08-13.md` and `REVIEW_main_2026-08-13.md` diff --git a/homeassistant/installationspaket/www/audi-dashboard-app.js b/homeassistant/installationspaket/www/audi-dashboard-app.js index b2d5689..9e1cf7a 100644 --- a/homeassistant/installationspaket/www/audi-dashboard-app.js +++ b/homeassistant/installationspaket/www/audi-dashboard-app.js @@ -2330,9 +2330,16 @@ function vReifen() { const t = r[k], aktiv = r.aktiv.toLowerCase() === k; const radDatei = `rad-${k}.webp`; const radLabel = k === "sommer" ? "Sommerrad" : "Winterrad"; + const satzLabel = k === "sommer" ? "Sommerräder" : "Winterräder"; return `
-
- ${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")} +
+
+ ${satzLabel} +
${t.km != null ? de(t.km) : "–"}km
+
+
+ ${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")} +
${bildMenuOffen === radDatei ? ` @@ -2342,10 +2349,6 @@ function vReifen() {
` : ""} -
- ${k === "sommer" ? "Sommer" : "Winter"} -
${t.km != null ? de(t.km) : "–"}km
-
${feld(k, "marke", "Hersteller")} ${feld(k, "modell", "Modell")} diff --git a/homeassistant/installationspaket/www/audi-dashboard.css b/homeassistant/installationspaket/www/audi-dashboard.css index 5a91c0b..82cb2e6 100644 --- a/homeassistant/installationspaket/www/audi-dashboard.css +++ b/homeassistant/installationspaket/www/audi-dashboard.css @@ -329,6 +329,17 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; } display: block; line-height: 1.3; } +/* Echte Überschrift innerhalb einer Kachel (z.B. "Sommerräder"/"Winterräder") + statt des sonst üblichen kleinen, gedämpften .label-Abschnittstitels - + selbe Typografie-Stufe wie .title (Seitentitel), nur etwas kleiner, weil + sie innerhalb einer Kachel steht statt in der Kopfzeile. */ +.tile-headline { + font-size: 20px; + letter-spacing: -.01em; + line-height: 1.2; + color: var(--fg); + display: block; +} /* A4: Messwerte erben nie mehr das uppercase der Label-Klasse. */ .wert { font-size: 14px; @@ -453,10 +464,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; } /* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect- ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle - Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. - margin-left:auto schiebt das feste 96px-Quadrat an den rechten Rand des - vollbreiten data-bildklick-Wrappers - Montiert sitzt links (siehe unten). */ -.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; margin-left: auto; } + Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. Rechtsbündig + sitzt es jetzt ueber .radkopf-row (display:flex; justify-content:space- + between), kein margin-left:auto mehr noetig. */ +.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; } .bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; } .bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; } @@ -889,14 +900,19 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; } padding: var(--sp-4); } -.radkopf { display: flex; flex-direction: column; margin-top: var(--sp-4); } +/* Kopfzeile der Reifen-Kachel: Überschrift+km links, Radfoto rechts, beide + oben bündig - ersetzt die frühere Überlagerung (Montiert absolut über dem + Foto), seit Überschrift und km ihren eigenen Platz über Montiert bekommen + haben. */ +.radkopf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); } +.radkopf { display: flex; flex-direction: column; } -/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): oben links - in der Kachel, obere Kante auf Höhe des Radfotos, linker Abstand - identisch zum Texteinzug (beides var(--sp-5), die Kachel-Innen- - polsterung). */ +/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): normale + Flusslage unter der Kachel-Überschrift/km, nicht mehr über dem Foto + überlagert (das saß nur dort, solange Überschrift+km diesen Platz noch + nicht beanspruchten). */ .montiert { - position: absolute; top: var(--sp-5); left: var(--sp-5); + position: relative; margin-top: var(--sp-4); display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 12px; letter-spacing: normal; color: var(--fg2); diff --git a/homeassistant/www/audi-dashboard-app.js b/homeassistant/www/audi-dashboard-app.js index b2d5689..9e1cf7a 100644 --- a/homeassistant/www/audi-dashboard-app.js +++ b/homeassistant/www/audi-dashboard-app.js @@ -2330,9 +2330,16 @@ function vReifen() { const t = r[k], aktiv = r.aktiv.toLowerCase() === k; const radDatei = `rad-${k}.webp`; const radLabel = k === "sommer" ? "Sommerrad" : "Winterrad"; + const satzLabel = k === "sommer" ? "Sommerräder" : "Winterräder"; return `
-
- ${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")} +
+
+ ${satzLabel} +
${t.km != null ? de(t.km) : "–"}km
+
+
+ ${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")} +
${bildMenuOffen === radDatei ? ` @@ -2342,10 +2349,6 @@ function vReifen() {
` : ""} -
- ${k === "sommer" ? "Sommer" : "Winter"} -
${t.km != null ? de(t.km) : "–"}km
-
${feld(k, "marke", "Hersteller")} ${feld(k, "modell", "Modell")} diff --git a/homeassistant/www/audi-dashboard.css b/homeassistant/www/audi-dashboard.css index 5a91c0b..82cb2e6 100644 --- a/homeassistant/www/audi-dashboard.css +++ b/homeassistant/www/audi-dashboard.css @@ -329,6 +329,17 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; } display: block; line-height: 1.3; } +/* Echte Überschrift innerhalb einer Kachel (z.B. "Sommerräder"/"Winterräder") + statt des sonst üblichen kleinen, gedämpften .label-Abschnittstitels - + selbe Typografie-Stufe wie .title (Seitentitel), nur etwas kleiner, weil + sie innerhalb einer Kachel steht statt in der Kopfzeile. */ +.tile-headline { + font-size: 20px; + letter-spacing: -.01em; + line-height: 1.2; + color: var(--fg); + display: block; +} /* A4: Messwerte erben nie mehr das uppercase der Label-Klasse. */ .wert { font-size: 14px; @@ -453,10 +464,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; } /* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect- ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle - Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. - margin-left:auto schiebt das feste 96px-Quadrat an den rechten Rand des - vollbreiten data-bildklick-Wrappers - Montiert sitzt links (siehe unten). */ -.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; margin-left: auto; } + Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. Rechtsbündig + sitzt es jetzt ueber .radkopf-row (display:flex; justify-content:space- + between), kein margin-left:auto mehr noetig. */ +.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; } .bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; } .bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; } @@ -889,14 +900,19 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; } padding: var(--sp-4); } -.radkopf { display: flex; flex-direction: column; margin-top: var(--sp-4); } +/* Kopfzeile der Reifen-Kachel: Überschrift+km links, Radfoto rechts, beide + oben bündig - ersetzt die frühere Überlagerung (Montiert absolut über dem + Foto), seit Überschrift und km ihren eigenen Platz über Montiert bekommen + haben. */ +.radkopf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); } +.radkopf { display: flex; flex-direction: column; } -/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): oben links - in der Kachel, obere Kante auf Höhe des Radfotos, linker Abstand - identisch zum Texteinzug (beides var(--sp-5), die Kachel-Innen- - polsterung). */ +/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): normale + Flusslage unter der Kachel-Überschrift/km, nicht mehr über dem Foto + überlagert (das saß nur dort, solange Überschrift+km diesen Platz noch + nicht beanspruchten). */ .montiert { - position: absolute; top: var(--sp-5); left: var(--sp-5); + position: relative; margin-top: var(--sp-4); display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 12px; letter-spacing: normal; color: var(--fg2);