From 7319501ee690a5bd3744a90d81c102397d0fa39b Mon Sep 17 00:00:00 2001 From: Tobi G Date: Mon, 17 Aug 2026 19:08:06 +0200 Subject: [PATCH] Service-Seite: Prognose-Fussnote ueber volle Breite statt umgebrochen Gemeldet: das Datum der Oelwechsel-Prognose steht in einer eigenen Zeile. Nachgemessen: das in der rechten Spalte war 29px hoch bei 217px Breite (zwei Zeilen); .row ist ein Flex aus dt/dd, und dd bekommt nur den Rest neben dem Titel - fuer "9.029 km, voraussichtlich am 14.04.2027" reicht das bei 12,5px nicht. Statt an Schriftgroesse oder Text zu drehen, haengt die Fussnote jetzt als eigenes Element (.row-fussnote) neben dt/dd und bricht per flex:1 0 100% auf eine eigene Zeile ueber die volle Kachelbreite um. flex-wrap:wrap ist per :has(.row-fussnote) auf genau diese Zeilen eingegrenzt, damit die uebrigen .row-Verwendungen zweispaltig bleiben. Die verschachtelte fm-/nicht-fm-Verzweigung im Markup faellt dabei zu einem hatMeldung-Zweig fuer den Wert plus einem separaten fussnote-String zusammen; die Anzeigelogik selbst ist unveraendert. Live geprueft bei 375px und 1280px: beide Fussnoten einzeilig (14px), 307px bzw. 636px breit; alle 17 .row auf "Mein Audi" weiterhin zweispaltig; keine neuen Konsolenfehler. Co-Authored-By: Claude Opus 5 --- AGENTS.md | 18 +++++++++++++++++ .../www/audi-dashboard-app.js | 20 +++++++++++-------- .../www/audi-dashboard-ios.css | 1 + .../www/audi-dashboard-version.json | 2 +- .../installationspaket/www/audi-dashboard.css | 13 ++++++++++++ homeassistant/www/audi-dashboard-app.js | 20 +++++++++++-------- homeassistant/www/audi-dashboard-ios.css | 1 + homeassistant/www/audi-dashboard-version.json | 2 +- homeassistant/www/audi-dashboard.css | 13 ++++++++++++ 9 files changed, 72 insertions(+), 18 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index ccba59a..d025278 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1327,6 +1327,24 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed All five deployed to `audi_ha_test` (version `1787009000`) and synced to `installationspaket/`; console showed only the pre-existing service-worker/404 noise from the missing vehicle photos, nothing new. +- [x] Service-Seite: Prognose-Fussnote bricht nicht mehr um (2026-08-17) — Nutzermeldung, das Datum + der Ölwechsel-Prognose stehe in einer eigenen Zeile. Nachgemessen statt geschätzt: das + `` in der rechten Spalte war 29px hoch bei 217px Breite (zwei Zeilen), die + Inspektions-Fussnote darunter mit kürzerem Text 14px (eine). Ursache ist nicht die Textlänge + allein, sondern der Platz: `.row` ist ein Flex mit `dt`/`dd`, und `dd` bekommt nur den Rest + neben dem Titel - für "9.029 km, voraussichtlich am 14.04.2027" bei 12,5px reicht das nicht. + Statt an Schriftgröße oder Text zu drehen, wandert die Fussnote jetzt als eigenes Element + (`.row-fussnote`) neben `dt`/`dd` und umbricht per `flex:1 0 100%` auf eine eigene Zeile über + die **volle** Kachelbreite - dieselbe Stelle, an der sie vorher schon optisch stand, nur ohne + die künstliche Breitenbegrenzung. Das `flex-wrap:wrap` ist bewusst mit `:has(.row-fussnote)` + auf genau diese Zeilen eingegrenzt, damit keine der übrigen `.row`-Verwendungen (17 Zeilen + allein auf "Mein Audi") ihr zweispaltiges Layout verliert. Die vorher verschachtelte + fm-/nicht-fm-Verzweigung im Markup ist dabei zu einem `hatMeldung`-Zweig für den Wert plus + einem separat berechneten `fussnote`-String zusammengefallen - die Anzeigelogik selbst + (Ölwechsel-Fussnote nur bei Fahrzeugmeldung, Inspektion immer) ist unverändert. Live geprüft + bei 375px und 1280px: beide Fussnoten 14px hoch (einzeilig), 307px bzw. 636px breit, linksbündig + auf der Kachelkante; alle 17 `.row` auf "Mein Audi" weiterhin zweispaltig; keine neuen + Konsolenfehler. Deployed als Version `1787003000`, synchron in `installationspaket/`. - [x] **Gap found while auditing "what's needed for a real iPhone app" (2026-08-17), then closed the same day:** `companion-app/src/screens/` hadn't been touched since 2026-08-11 — every panel fix and feature from the six days since (HIG audit rounds, receipt upload, trip diff --git a/homeassistant/installationspaket/www/audi-dashboard-app.js b/homeassistant/installationspaket/www/audi-dashboard-app.js index ca9a2a1..918b144 100644 --- a/homeassistant/installationspaket/www/audi-dashboard-app.js +++ b/homeassistant/installationspaket/www/audi-dashboard-app.js @@ -1663,21 +1663,25 @@ function vService() { // dem Datum. Hauptuntersuchung bleibt bewusst ohne. const eigenOel = t.art === "Ölwechsel" ? oelwechselPrognose() : null; const eigenInsp = t.art === "Inspektion" ? inspektionPrognose() : null; + const hatMeldung = fm.km != null || fmDatum; + // Die Prognose steht als eigene Zeile ueber die volle Kachelbreite + // unter dt/dd (.row-fussnote), nicht mehr in der rechten Spalte: dort + // standen nur ~217px zur Verfuegung, in die "9.029 km, voraussichtlich + // am 12.04.2027" zwangslaeufig zweizeilig umbrach. + const fussnote = hatMeldung && eigenOel + ? `${de(eigenOel.restKm)} km, voraussichtlich am ${dedat(eigenOel.datum)}` + : eigenInsp ? `voraussichtlich am ${dedat(eigenInsp.datum)}` : ""; return `
${t.art} ${t.vereinbart ? `
Werkstatt am ${dedat(new Date(t.vereinbart))}` : ""}
${iv.hersteller ? `Herstellervorgabe` : ""} - ${fm.km != null || fmDatum ? ` - ${fm.km != null ? de(fm.km) + " km" : ""}${fm.km != null && fmDatum ? " / " : ""}${fmDatum || ""} - ${eigenOel ? `${de(eigenOel.restKm)} km, voraussichtlich am ${dedat(eigenOel.datum)}` : ""} - ${eigenInsp ? `voraussichtlich am ${dedat(eigenInsp.datum)}` : ""} - ` : ` - ${eigenOel ? de(eigenOel.restKm) + " km · " + dedat(eigenOel.datum) : (anzeige.km !== null ? de(anzeige.km) + " km · " : "") + dedat(anzeige.datum)} - ${eigenInsp ? `voraussichtlich am ${dedat(eigenInsp.datum)}` : ""} - `} + ${hatMeldung + ? `${fm.km != null ? de(fm.km) + " km" : ""}${fm.km != null && fmDatum ? " / " : ""}${fmDatum || ""}` + : (eigenOel ? de(eigenOel.restKm) + " km · " + dedat(eigenOel.datum) : (anzeige.km !== null ? de(anzeige.km) + " km · " : "") + dedat(anzeige.datum))}
+ ${fussnote ? `${fussnote}` : ""}
`; }).join("")} diff --git a/homeassistant/installationspaket/www/audi-dashboard-ios.css b/homeassistant/installationspaket/www/audi-dashboard-ios.css index 21a7e4d..2b24bc9 100644 --- a/homeassistant/installationspaket/www/audi-dashboard-ios.css +++ b/homeassistant/installationspaket/www/audi-dashboard-ios.css @@ -123,6 +123,7 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo .row dt{font-size:16px;color:var(--fg)} .row dd{font-size:16px;color:var(--fg2)} .row dd small{font-size:12.5px;margin-top:2px} +.row-fussnote{font-size:12.5px} .rows-fest dt{flex:0 0 150px} .chev{stroke:var(--ios-grau);stroke-width:1.6} diff --git a/homeassistant/installationspaket/www/audi-dashboard-version.json b/homeassistant/installationspaket/www/audi-dashboard-version.json index 58381ca..dc1f246 100644 --- a/homeassistant/installationspaket/www/audi-dashboard-version.json +++ b/homeassistant/installationspaket/www/audi-dashboard-version.json @@ -1 +1 @@ -{"version": 1787100000} +{"version": 1787003000} diff --git a/homeassistant/installationspaket/www/audi-dashboard.css b/homeassistant/installationspaket/www/audi-dashboard.css index 560eb72..7fced30 100644 --- a/homeassistant/installationspaket/www/audi-dashboard.css +++ b/homeassistant/installationspaket/www/audi-dashboard.css @@ -405,6 +405,19 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; } .row dd { margin: 0; font-size: 14.5px; color: var(--fg); text-align: right; } .row dd small { display: block; font-size: 11.5px; color: var(--fg3); margin-top: 3px; } .rows-fest dd { min-width: 120px; } +/* Fussnote unter einer Zeile, ueber die volle Kachelbreite statt in der + rechten Spalte: dort blieben nur ~217px, in die eine Prognose wie + "9.029 km, voraussichtlich am 12.04.2027" zwangslaeufig umbrach. + :has() grenzt das Umbrechen auf genau die Zeilen ein, die eine Fussnote + fuehren - alle anderen .row bleiben unveraendert einzeilig. */ +.row:has(.row-fussnote) { flex-wrap: wrap; } +.row-fussnote { + flex: 1 0 100%; + text-align: left; + font-size: 11.5px; + color: var(--fg3); + margin-top: 4px; +} .leaf { display: flex; align-items: center; justify-content: space-between; diff --git a/homeassistant/www/audi-dashboard-app.js b/homeassistant/www/audi-dashboard-app.js index ca9a2a1..918b144 100644 --- a/homeassistant/www/audi-dashboard-app.js +++ b/homeassistant/www/audi-dashboard-app.js @@ -1663,21 +1663,25 @@ function vService() { // dem Datum. Hauptuntersuchung bleibt bewusst ohne. const eigenOel = t.art === "Ölwechsel" ? oelwechselPrognose() : null; const eigenInsp = t.art === "Inspektion" ? inspektionPrognose() : null; + const hatMeldung = fm.km != null || fmDatum; + // Die Prognose steht als eigene Zeile ueber die volle Kachelbreite + // unter dt/dd (.row-fussnote), nicht mehr in der rechten Spalte: dort + // standen nur ~217px zur Verfuegung, in die "9.029 km, voraussichtlich + // am 12.04.2027" zwangslaeufig zweizeilig umbrach. + const fussnote = hatMeldung && eigenOel + ? `${de(eigenOel.restKm)} km, voraussichtlich am ${dedat(eigenOel.datum)}` + : eigenInsp ? `voraussichtlich am ${dedat(eigenInsp.datum)}` : ""; return `
${t.art} ${t.vereinbart ? `
Werkstatt am ${dedat(new Date(t.vereinbart))}` : ""}
${iv.hersteller ? `Herstellervorgabe` : ""} - ${fm.km != null || fmDatum ? ` - ${fm.km != null ? de(fm.km) + " km" : ""}${fm.km != null && fmDatum ? " / " : ""}${fmDatum || ""} - ${eigenOel ? `${de(eigenOel.restKm)} km, voraussichtlich am ${dedat(eigenOel.datum)}` : ""} - ${eigenInsp ? `voraussichtlich am ${dedat(eigenInsp.datum)}` : ""} - ` : ` - ${eigenOel ? de(eigenOel.restKm) + " km · " + dedat(eigenOel.datum) : (anzeige.km !== null ? de(anzeige.km) + " km · " : "") + dedat(anzeige.datum)} - ${eigenInsp ? `voraussichtlich am ${dedat(eigenInsp.datum)}` : ""} - `} + ${hatMeldung + ? `${fm.km != null ? de(fm.km) + " km" : ""}${fm.km != null && fmDatum ? " / " : ""}${fmDatum || ""}` + : (eigenOel ? de(eigenOel.restKm) + " km · " + dedat(eigenOel.datum) : (anzeige.km !== null ? de(anzeige.km) + " km · " : "") + dedat(anzeige.datum))}
+ ${fussnote ? `${fussnote}` : ""}
`; }).join("")} diff --git a/homeassistant/www/audi-dashboard-ios.css b/homeassistant/www/audi-dashboard-ios.css index 21a7e4d..2b24bc9 100644 --- a/homeassistant/www/audi-dashboard-ios.css +++ b/homeassistant/www/audi-dashboard-ios.css @@ -123,6 +123,7 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo .row dt{font-size:16px;color:var(--fg)} .row dd{font-size:16px;color:var(--fg2)} .row dd small{font-size:12.5px;margin-top:2px} +.row-fussnote{font-size:12.5px} .rows-fest dt{flex:0 0 150px} .chev{stroke:var(--ios-grau);stroke-width:1.6} diff --git a/homeassistant/www/audi-dashboard-version.json b/homeassistant/www/audi-dashboard-version.json index 58381ca..dc1f246 100644 --- a/homeassistant/www/audi-dashboard-version.json +++ b/homeassistant/www/audi-dashboard-version.json @@ -1 +1 @@ -{"version": 1787100000} +{"version": 1787003000} diff --git a/homeassistant/www/audi-dashboard.css b/homeassistant/www/audi-dashboard.css index 560eb72..7fced30 100644 --- a/homeassistant/www/audi-dashboard.css +++ b/homeassistant/www/audi-dashboard.css @@ -405,6 +405,19 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; } .row dd { margin: 0; font-size: 14.5px; color: var(--fg); text-align: right; } .row dd small { display: block; font-size: 11.5px; color: var(--fg3); margin-top: 3px; } .rows-fest dd { min-width: 120px; } +/* Fussnote unter einer Zeile, ueber die volle Kachelbreite statt in der + rechten Spalte: dort blieben nur ~217px, in die eine Prognose wie + "9.029 km, voraussichtlich am 12.04.2027" zwangslaeufig umbrach. + :has() grenzt das Umbrechen auf genau die Zeilen ein, die eine Fussnote + fuehren - alle anderen .row bleiben unveraendert einzeilig. */ +.row:has(.row-fussnote) { flex-wrap: wrap; } +.row-fussnote { + flex: 1 0 100%; + text-align: left; + font-size: 11.5px; + color: var(--fg3); + margin-top: 4px; +} .leaf { display: flex; align-items: center; justify-content: space-between;