diff --git a/AGENTS.md b/AGENTS.md index 108e725..ac23003 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -12799,6 +12799,48 @@ Und die Ausgangsfrage: die **Fläche** ist Apple (die 2026-08-13 übernommene iOS-Palette), das Audi-CI-Gelb `#ffaa00` wurde damals abgelöst und liefert als Schrift nur 1,91:1. Die **Schrift** ist gemessen, nicht übernommen. +### Nachtrag 07.09.2026: eine Farbe reichte nicht, zwei Rollen reichen + +Auch `#C55300` meldete der Eigentümer als „bräunlich". Der Befund ist keine +Geschmacksfrage, sondern die Schwelle selbst: **kräftiges Orange ist bei 4,5:1 +nicht zu haben.** Apples systemOrange `#FF9500` kommt auf Weiß auf **2,20:1**; +jedes Orange, das 4,5:1 schafft, ist so dunkel, dass es als Braun gelesen wird. + +Deshalb tragen die beiden Elemente jetzt **jeweils ihre eigene Schwelle**: + +| Element | Größe | WCAG-Schwelle | Wert | gemessen | +|---|---|---|---|---| +| Kennzahl `--warn-fig` | 32 px = Großtext | 3:1 | `#DD6000` | 3,65:1 auf Weiß, 3,34:1 auf der Hülle | +| Marke, Tag | 10,5 px = Kleintext | 4,5:1 | `#C55300` **gefüllt**, Schrift weiß | 4,55:1 | +| Kennzahl nachts | 32 px | 3:1 | `#FF9F0A` | 8,41:1 auf `#171B21` | +| Marke, Nacht | 10,5 px | 4,5:1 | `#FFA056` gefüllt, Schrift `#171B21` | 8,57:1 | + +Der Kniff bei der Marke: **nicht dünne Schrift, sondern eine gefüllte Pille.** +Derselbe Ton liest sich als Fläche eindeutig als Orange, während er als +1 px starker Buchstabenstrich bräunlich wirkt - und weiße Schrift auf `#C55300` +erfüllt die 4,5:1 exakt so, wie es umgekehrt nicht ginge. + +Tokens dafür: `--warn-fig`, `--warn-marke-grund`, `--warn-marke-schrift` in +`audi-dashboard-ios.css` und `design-system/src/tokens/tokens.css`. + +### Nachtrag 07.09.2026: nur die Zeile, nicht die Kachel + +Die Service-Kachel auf „Mein Audi" war kurzzeitig **als Ganzes** hinterlegt +(`.tile.ueberschritten`). Der Eigentümer hat das zurückgewiesen: gelb wird nur +das überschrittene Feld, analog zur Termingruppe im Service-Blatt. Die Kachel +trägt jetzt keinen Sonderstil mehr, stattdessen bekommt die betroffene Zeile +`.row.ueberschritten` (App: `.dm-wertzeile--ueberschritten`) - 12 % `--warn`, +`--r-tile`, und über `margin-left/right: -12px` läuft die Tönung bis an den +Kachelrand. Die dafür gebaute Hilfsfunktion `serviceUeberschritten()` ist +ersatzlos entfallen; die App-Seite reicht `ueberschritten` als Eigenschaft an +`Wertzeile` durch. + +**Gemessen im Panel (Testcontainer, 2026.9.6.9):** Kachelgrund +`rgb(255,255,255)`, nur die HU-Zeile `rgba(255,159,10,0.12)` und mit 752 px +gegenüber 728 px der ungetönten Zeilen um genau 2 × 12 px breiter - die Tönung +reicht also bis an den Rand. Marke: `rgb(255,255,255)` auf `rgb(197,83,0)`. +Kennzahl der Übersicht: `rgb(221,96,0)`. + ### Geprüft * **15 Fälle** gegen die echten Panel-Funktionen (aus der Panel-Quelle diff --git a/OFFEN.md b/OFFEN.md index bfd3cf9..51798e6 100644 --- a/OFFEN.md +++ b/OFFEN.md @@ -100,14 +100,15 @@ Beispielzahlen in der Statistik und ein überholter TODO-Kommentar. ## 3b. Optisch noch nicht gesehen -**Das Panel.** Die Markierung überschrittener Servicetermine (Abschnitt DJ) ist -in der **App** live geprüft, im **Panel** nicht - dafür fehlt eine angemeldete -Home-Assistant-Sitzung. Belegt ist es dort über den Paritätstest gegen die -echten Panel-Funktionen und den Modul-Parse. +**Erledigt am 07.09.2026.** Die Markierung überschrittener Servicetermine +(Abschnitt DJ) ist jetzt auch im **Panel** live gesehen und gemessen - +Übersicht und „Mein Audi", Tagmodus, Fassung 2026.9.6.9. -*Was zu tun ist:* bei nächster Gelegenheit mit angemeldeter Sitzung einmal -ansehen; ein vorübergehend zurückdatiertes Erstzulassungsdatum erzeugt den Fall -(hinterher zurückstellen). +*Offen bleibt allein:* das Erstzulassungsdatum im Testcontainer steht +vorübergehend auf **01.03.2020**, damit der Fall überhaupt auftritt. Das +Original liegt unter `/config/audi_dashboard/fahrzeugprofil.json.ansicht` und +ist zurückzustellen, sobald der Eigentümer sagt, dass er fertig geschaut hat. +Der **Nachtmodus** ist nur gerechnet, nicht gesehen. ## 4. Gemeldet, aber nicht reproduzierbar diff --git a/companion-app/src/screens/MeinAudi.tsx b/companion-app/src/screens/MeinAudi.tsx index f951580..80c05b1 100644 --- a/companion-app/src/screens/MeinAudi.tsx +++ b/companion-app/src/screens/MeinAudi.tsx @@ -255,7 +255,14 @@ export function MeinAudi({ geheZu }: { geheZu: (name: SeitenName, id?: string) = /> - geheZu("service")}> + {/* Die Kachel wird als Ganzes hinterlegt, wenn IRGENDEIN Termin + überschritten ist - sie fasst alle drei zusammen; die Marke in der + Zeile sagt welcher (Nutzerwunsch 07.09.2026). */} + geheZu("service")} + > Service - {t.haupt} + {t.haupt} ) : ( t.haupt ) } {...(t.neben ? { zusatz: t.neben } : {})} + ueberschritten={t.ueber} /> )) } diff --git a/companion-app/src/screens/Uebersicht.tsx b/companion-app/src/screens/Uebersicht.tsx index 82ef8c2..aac9220 100644 --- a/companion-app/src/screens/Uebersicht.tsx +++ b/companion-app/src/screens/Uebersicht.tsx @@ -267,20 +267,17 @@ export function Uebersicht({ geheZu }: { geheZu: (name: SeitenName, id?: string) size={32} /> ) - return Symbol ? ( + /* Immer die Zeile, auch ohne Symbol: die Marke steht neben der + Kennzahl (Nutzerwunsch 07.09.2026 - die Kachel soll durch sie + nicht höher werden), und ohne sie hätte die Marke keinen Platz. */ + return (
- + {Symbol && } {fig} + {serviceUeber && }
- ) : ( - fig ) })()} - {serviceUeber && ( -
- -
- )} {/* Im Panel ist auch diese Nebenzeile ein `.label` (13px, --fg3), nicht die kleinere Fußnote (11,5px/300), die hier stand. */} diff --git a/companion-app/src/screens/bausteine.tsx b/companion-app/src/screens/bausteine.tsx index f32cfd8..6a1364e 100644 --- a/companion-app/src/screens/bausteine.tsx +++ b/companion-app/src/screens/bausteine.tsx @@ -266,6 +266,7 @@ export function Wertzeile({ zusatz, hinweis, warnung, + ueberschritten, }: { label: ReactNode wert: ReactNode @@ -277,9 +278,12 @@ export function Wertzeile({ /** Hebt den Wert als abweichend hervor (var(--warn)), wie das Panel es bei einem Dongle-Wert tut, der nicht zu unserer Einstellung passt. */ warnung?: boolean + /** Hinterlegt die ganze Zeile blass gelb - fuer einen ueberschrittenen + Servicetermin. Nur die Zeile, nicht die Kachel (Nutzerwunsch 07.09.2026). */ + ueberschritten?: boolean }) { return ( -
+
{label}
#DD6000 (3.65:1 auf Weiß, + 3.34:1 auf der Hülle; nachts #FF9F0A mit 8.41:1) + die Marke 10.5px = Kleintext, Schwelle 4.5:1 -> keine dünne Schrift, + sondern eine GEFÜLLTE Pille: #C55300 mit weißer Schrift + (4.55:1; nachts #FFA056 mit #171B21, 8.57:1). Als Fläche + liest sich derselbe Ton als Orange, nicht als Braun. + + Alle Werte am 07.09.2026 nach WCAG 2.1 gerechnet, Hülle = 12 % --warn auf + dem jeweiligen Kachelgrund. */ .dm-termingruppe--ueberschritten { background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: var(--r-tile); @@ -2440,25 +2450,38 @@ input[type="range"] { margin-left: -12px; margin-right: -12px; } -/* Die Trennlinie zur Vorgängerzeile liefe über die abgerundete Fläche - die - übernimmt hier die Abgrenzung. */ .dm-termingruppe--ueberschritten, .dm-termingruppe--ueberschritten + .dm-termingruppe { border-top: 0; } .dm-ueberschritten-marke { font-size: 10.5px; - color: var(--warn-text); - border: 1px solid var(--warn-text); + font-weight: 600; + color: var(--warn-marke-schrift); + background: var(--warn-marke-grund); border-radius: var(--r-pill); padding: 3px 8px; white-space: nowrap; flex: 0 0 auto; display: inline-block; + vertical-align: middle; } .dm-tgkopf .dm-ueberschritten-marke { margin-left: auto; } -/* Auf der Übersicht wechselt zusätzlich die Kennzahl die Farbe - dort ist sie - die Aussage, nicht nur ihr Rahmen. */ .dm-serviceblock--ueberschritten .ads-fig, -.dm-serviceblock--ueberschritten .ads-fig * { color: var(--warn-text); } -.dm-servicemarke { display: inline-flex; margin-top: 8px; } +.dm-serviceblock--ueberschritten .ads-fig * { color: var(--warn-fig); } +/* Auf der Übersicht neben der Kennzahl, nicht darunter - die Kachel soll durch + die Markierung nicht höher werden (Nutzerwunsch 07.09.2026). */ +.dm-servicefig .dm-ueberschritten-marke { margin-left: 10px; } +/* In "Mein Audi" links vom Wert. */ +.dm-wertzeile .dm-ueberschritten-marke { margin-right: 8px; } +/* In "Mein Audi" wird NUR die überschrittene Zeile hinterlegt, nicht die ganze + Kachel - analog zur Termingruppe im Service-Blatt (Nutzerwunsch 07.09.2026). + Der volle Rand kommt über die negativen Außenabstände. */ +.dm-wertzeile--ueberschritten { + background: color-mix(in srgb, var(--warn) 12%, transparent); + border-radius: var(--r-tile); + padding-left: 12px; + padding-right: 12px; + margin-left: -12px; + margin-right: -12px; +} diff --git a/custom_components/audi_dashboard/frontend/app/bundle.json b/custom_components/audi_dashboard/frontend/app/bundle.json index c194e67..4a84411 100644 --- a/custom_components/audi_dashboard/frontend/app/bundle.json +++ b/custom_components/audi_dashboard/frontend/app/bundle.json @@ -1 +1 @@ -{"version":"2026.9.6.7","sha256":"1c9c672a258f7540a0186ebc12d32965d472478923ff3c44a013d46f58a3805d","bytes":379101,"gebaut":"2026-09-07T12:06:15Z"} \ No newline at end of file +{"version":"2026.9.6.9","sha256":"b7bb80fc6f108299e04a389a200756bc4b060767dbed3e157a7f1850b613e221","bytes":379205,"gebaut":"2026-09-07T12:34:09Z"} \ No newline at end of file diff --git a/custom_components/audi_dashboard/frontend/app/bundle.zip b/custom_components/audi_dashboard/frontend/app/bundle.zip index 564bdcb..babaf5c 100644 Binary files a/custom_components/audi_dashboard/frontend/app/bundle.zip and b/custom_components/audi_dashboard/frontend/app/bundle.zip differ diff --git a/custom_components/audi_dashboard/frontend/audi-dashboard-app.js b/custom_components/audi_dashboard/frontend/audi-dashboard-app.js index 92aca88..596d5e7 100644 --- a/custom_components/audi_dashboard/frontend/audi-dashboard-app.js +++ b/custom_components/audi_dashboard/frontend/audi-dashboard-app.js @@ -2483,18 +2483,20 @@ function vHome() { const nebenzeile = restKm !== null && datum ? `voraussichtlich am ${dedat(datum)}` : t.art; - const figMarkup = artIcon - ? `
${ciSVG(artIcon, 31)}
${hauptwert}
` - : `
${hauptwert}
`; // Auf der Uebersicht wechselt zusaetzlich die Kennzahl selbst die Farbe - // sie ist hier die Aussage, nicht nur ihr Rahmen (Ansage des Eigentuemers). const ueber = terminUeberschritten(datum, t.datum); + // Immer eine fig-zeile, auch ohne Icon: die Marke steht neben der Kennzahl + // (Nutzerwunsch 07.09.2026 - die Kachel soll durch sie nicht hoeher werden), + // und ohne diese Zeile haette sie dort keinen Platz. + const figMarkup = `
${artIcon ? ciSVG(artIcon, 31) : ""}` + + `
${hauptwert}
` + + `${ueber ? UEBERSCHRITTEN_MARKE : ""}
`; return `
${kmZeile} @@ -2667,16 +2669,16 @@ function vAudi() { if (fm.ts == null && fm.km == null) { const x = terminText(t); const ueber = terminUeberschritten(t.ziel, t.datum); - return `
+ return `
${t.art}${t.art === "Inspektion" ? eigen : ""}
-
${x.haupt}${ueber ? UEBERSCHRITTEN_MARKE : ""}${x.neben ? `${x.neben}` : ""}
`; +
${ueber ? UEBERSCHRITTEN_MARKE : ""}${x.haupt}${x.neben ? `${x.neben}` : ""}
`; } const haupt = fm.ts ? dedat(new Date(fm.ts)) : ""; const neben = fm.km != null ? "in " + de(fm.km) + " km" : ""; const ueber = terminUeberschritten(fm.ts, t.ziel, t.datum); - return `
+ return `
${t.art}${eigen}
-
${haupt}${ueber ? UEBERSCHRITTEN_MARKE : ""}${neben ? `${neben}` : ""}
`; +
${ueber ? UEBERSCHRITTEN_MARKE : ""}${haupt}${neben ? `${neben}` : ""}
`; }).join("")}