EU-Data-Act-Reste bereinigt, Slider-Bug behoben, zwei Design-Audit-Runden umgesetzt
Entfernt die letzten Verweise auf die abgeloeste TommiG1/HA_VAG-EU-Data-Act- Integration (Versionstile, Testumgebungs-Fixture) und ersetzt sie durch die FMM003-Werte. Behebt eine CSS-Spezifitaetskollision, durch die alle iOS- Toggle-Switches viel zu breit gerendert wurden. Dokumentiert und behebt sieben Layout-Befunde aus zwei Design-Audit-Runden (Zahnrad-Ueberlauf auf breiten Bildschirmen, zu kleine Ringe als mobiler Einstellungen-Zugang, zu breite Popups, Kopfzeilen-Versatz, ueberlappende Kachel-Pfeile, fehlender Editierbarkeits-Hinweis bei Auswahlfeldern, Haekchen-artige Auf/Zu-Pfeile) - siehe DESIGN_AUDIT_2026-08-13.md fuer Root-Cause und Beleg je Befund. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
# AGENTS.md — Project state, review findings, open items, and working rules
|
||||
|
||||
**Last updated: 2026-08-13** (merged the `umsetzung-datametric360` branch — companion app phases
|
||||
1–10 done, see `UMSETZUNGSPLAN.md`). This file is the entry point for every new agent
|
||||
1–10 done, see `UMSETZUNGSPLAN.md`; later the same day: cleaned up remaining EU Data Act residue,
|
||||
fixed oversized toggle switches, and fixed a desktop-layout audit (settings button / rings logo /
|
||||
popups overflowing past the capped content column) — see `DESIGN_AUDIT_2026-08-13.md` and section
|
||||
C). This file is the entry point for every new agent
|
||||
session: what this repo is, what is finished, what is missing, and how to work here. Detail lives in
|
||||
the linked documents — this file points, it does not duplicate.
|
||||
|
||||
@@ -528,6 +531,76 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed
|
||||
Abbrechen/Speichern and the "Einrichten"/"Setup"/"Fertig" buttons in Einstellungen render with
|
||||
the corrected fills at both mobile and desktop widths, switches render green, no console
|
||||
errors.
|
||||
- [x] Clean up remaining "EU Data Act" residue from the FMM003 pivot (2026-08-13) — the
|
||||
Einstellungen "Version" tile in `audi-dashboard-app.js` hardcoded `Fahrzeugdaten: EU Data
|
||||
Act / Abruf alle 15 Minuten` and `Position: iPhone / Companion App`, both stale: vehicle data
|
||||
and position now come exclusively from the FMM003 (`ZUENDUNG_SENSOR`, `BATTERIE_SENSOR`,
|
||||
`STANDORT_TRACKER` in `einstellungen.py`), not the abandoned HACS integration or the iPhone.
|
||||
Both rows now read `FMM003`. Also fixed `testumgebung/konfiguration.yaml` +
|
||||
`testumgebung/README.md`: the `input_text.test_wlan` / `iPhone WiFi Connection` template
|
||||
sensor simulated WLAN-based trip detection, fully removed 2026-08-12 (`fahrzeug.wlan_ssid` no
|
||||
longer exists anywhere) — its "Fahrt auslösen" example was non-functional. Replaced with
|
||||
`input_boolean.test_zuendung` driving a `binary_sensor.testzone_fmm003_engine_ignition_or_acc_status`
|
||||
template sensor matching the real `ZUENDUNG_SENSOR` entity ID, so trip detection stays
|
||||
testable. The remaining KM/Tank/Range/door/window/lock template sensors correctly still
|
||||
describe the abandoned `TommiG1/HA_VAG-EU-Data-Act` integration (per `einstellungen.py`) and
|
||||
were left in place — those fields are blank by default but stay manually mappable via the
|
||||
Setup menu, so the fixtures remain useful for testing that path; comments updated to make
|
||||
this distinction explicit.
|
||||
- [x] Fix oversized toggle switches ("Slider") across the app (2026-08-13) — `.feld label` in
|
||||
`audi-dashboard.css` (`flex: 1 1 auto`, meant to let the *text* label grow so the control
|
||||
lands at the row's right edge) unintentionally also matched `<label class="switch">`, since
|
||||
the toggle switch is itself implemented as a `<label>` — its own `.switch { flex-shrink: 0;
|
||||
width: 46px }` rule lost because `.feld label` has equal-or-higher specificity and comes
|
||||
later in the file. Every switch inside a `.feld` (Einstellungen, Tanken, Reifen, ...)
|
||||
stretched to fill the row (~260-300px measured live, instead of 46-51px). Fixed by excluding
|
||||
switches from the selector: `.feld label:not(.switch)`. Verified live in `audi_ha_test` at
|
||||
mobile (375px) and desktop widths — switches render at the correct ~51px iOS size, no
|
||||
console errors.
|
||||
- [x] Fix desktop (≥860px container) layout audit findings (2026-08-13, see
|
||||
`DESIGN_AUDIT_2026-08-13.md` for full detail) — user-reported: (1) the settings gear button
|
||||
sat far past the right edge of the visible content column on wide screens because `.topbar`
|
||||
(grid-column:2, same track as `main#view`) had no `max-width:860px` while `main#view` did —
|
||||
the track itself is `minmax(0,1fr)` and stretches to the full remaining window width, so
|
||||
`.head{flex:1}` pushed `.profilbtn` to the track's far edge, ~450px past where `main#view`
|
||||
visually ends. Fixed by giving `.topbar`/`.phone:has(.back.on) .topbar`/`.ptr` the same
|
||||
`max-width:860px`. (2) In phone width the Audi rings (`#marke`/`.rings`) are, per existing
|
||||
code comment, the *only* access to Einstellungen (the gear icon is hidden there) but were
|
||||
42×24px — well under the 44px minimum touch target every sibling icon-button uses. Bumped to
|
||||
58×32px. (3) Found while verifying (1): `.setup-popup`, `.sdpopup`, `.sheet`, and
|
||||
`.standortmenu` are all `position:absolute` with `left`/`right` relative to the *full*
|
||||
`.phone` box (sidebar included), not the content column, and had no desktop max-width either
|
||||
— `.setup-popup` measured 1644px wide on a 1920px window (10px margins only). Fixed with
|
||||
`max-width:560px` (`.setup-popup`/`.sdpopup`/`.sheet`) or `640px` (`.standortmenu`) plus
|
||||
`margin-left/right:auto` in the same container query — deliberately not
|
||||
`transform:translateX(-50%)`, which would fight these elements' own transform-based entry
|
||||
animations. Centering is relative to the full `.phone` width (sidebar included), not the
|
||||
860px content column exactly — a ~138px rightward offset from true content-center remains at
|
||||
1920px; fixing that precisely would require moving these overlays into grid-column 2 in the
|
||||
markup, deferred as a larger structural change. All three verified live in `audi_ha_test` at
|
||||
375px and 1920px, no console errors.
|
||||
- [x] Fix 4 more user-reported design findings (2026-08-13, same session, see
|
||||
`DESIGN_AUDIT_2026-08-13.md` "Runde 2" for full detail with before/after measurements):
|
||||
(1) page title sat ~30px right of the content tiles below it on wide screens — `.back`
|
||||
reserves 44px+gap in `.topbar` even when inactive (`opacity:0`, not `display:none`), fixed
|
||||
with `.back:not(.on){width:0;...}` in the desktop container query, root pages only (detail
|
||||
pages with `.back.on` unaffected, verified back-navigation still works). (2) the chevron on
|
||||
the 5 `.go`-tiles (Fahrzeug/Service/Versicherung/Reifen/Schutzbrief on Mein Audi/Versicherung)
|
||||
was vertically centered on the *entire* multi-row tile (`top:50%` in the iOS overlay) instead
|
||||
of next to the title, overlapping wrapped row text — removed the override, falls back to the
|
||||
base `top:var(--sp-5)` next-to-title position. (3) the Ölwechsel-Intervall `<select>` values
|
||||
("10.000 km"/"1 Jahr") looked like inert text — iOS overlay strips border/background from
|
||||
`.feld select` and colors it the same grey as any other secondary text; added
|
||||
`.feld select{color:var(--ios-tint)}` so picker fields read as editable the way iOS
|
||||
conventionally signals it (accent color), free-text `.feld input`s deliberately left alone.
|
||||
(4) the expand/collapse `.mark` chevron on group headers (Fahrten "2026"/"August") looked
|
||||
like a checkmark — it uses the classic "2 borders + rotate(45deg)" CSS chevron technique,
|
||||
which requires a square box; `.mark` was 6×10px (non-square, sized for the unrelated SVG-path
|
||||
`.chev`/`.go` icons), made it 8×8px. Two more reported findings ("grey box around all menu
|
||||
icons", "red partial frame on Fahrten/Tanken rows") were investigated (computed-style
|
||||
diffing across all 5 tabs in both themes, a temporary 2.5x `transform:scale()` zoom on the
|
||||
live swipe-row DOM) but could not be reproduced — documented in the audit file as open,
|
||||
pending a screenshot from the real device.
|
||||
- [ ] 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`
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
# Design Audit — 2026-08-13 (Grossbildschirm-Layout)
|
||||
|
||||
Auslöser: zwei konkrete User-Reports ("Einstellungen-Knopf sitzt am Bildschirmrand, obwohl
|
||||
die App-Spalte schon vorher endet" und "die Ringe als Einstellungen-Knopf sind zu klein").
|
||||
Beide sind bestätigt, behoben und live im `audi_ha_test`-Container verifiziert (Desktop
|
||||
1920px + Mobil 375px, Chrome-Konsole fehlerfrei bis auf die vorbestehenden, unbezogenen
|
||||
Service-Worker-/Platzhalterbild-404-Meldungen). Im Zuge der Fehlersuche wurde ein dritter,
|
||||
verwandter Fehler im selben Muster gefunden und mitbehoben.
|
||||
|
||||
Geprüft wurden Übersicht, Mein Audi, Fahrten, Statistik, Tanken und Einstellungen (inkl.
|
||||
Setup-Popup) bei 375px und 1920px. Die drei unten dokumentierten Befunde sind die einzigen
|
||||
gefundenen Abweichungen; der Rest folgt konsistent den bestehenden Tokens (`--r-tile`,
|
||||
Farbrollen aus dem iOS-Overlay, `.aktion`/`.switch`-Semantik).
|
||||
|
||||
## Befund 1 — Zahnrad/Kopfzeile sass bei breiten Fenstern am Fensterrand statt am Inhaltsrand
|
||||
|
||||
**Root Cause:** `.topbar` (enthält den Einstellungen-Knopf `.profilbtn`) liegt im
|
||||
Grossbildschirm-Raster (`@container (min-width:860px)` in `audi-dashboard-ios.css`) in
|
||||
Spalte 2 (`grid-column:2`), derselben Spalte wie `main#view`. `main#view` hat dort ein
|
||||
`max-width:860px`, `.topbar` hatte keins - die Spalte selbst ist aber `minmax(0,1fr)`, füllt
|
||||
also die volle restliche Fensterbreite. `.head{flex:1}` in der Kopfzeile hat den Rest der
|
||||
Zeile aufgefüllt und `.profilbtn` bis an den rechten Rand der vollen Spalte geschoben, weit
|
||||
hinter das Ende des sichtbaren Inhalts.
|
||||
|
||||
**Beleg (1920px Fenster):** `main#view` endete bei `x=1380`, `.topbar` ging bis `x=1920`,
|
||||
`.profilbtn` sass bei `x=1832-1876` - eine Lücke von über 450px zwischen Inhaltsende und
|
||||
Knopf.
|
||||
|
||||
**Fix:** `.topbar`, `.phone:has(.back.on) .topbar` und `.ptr` bekommen im
|
||||
860px-Container-Query dasselbe `max-width:860px` wie `main#view`. Nach dem Fix enden
|
||||
`.topbar` und `main#view` an derselben Kante (`x=1380`), der Knopf sitzt bei `x=1292-1336`,
|
||||
sichtbar über dem Inhalt.
|
||||
|
||||
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
|
||||
|
||||
## Befund 2 — Audi-Ringe als einziger Einstellungen-Zugang in Telefonbreite zu klein
|
||||
|
||||
**Root Cause:** In Telefonbreite blendet die iOS-Auflage das Zahnrad-Icon (`.profilbtn`) aus
|
||||
- die Audi-Ringe (`#marke`/`.rings`) sind dort laut eigenem Code-Kommentar "der einzige
|
||||
Zugang zu den Einstellungen" und seit einer früheren Session bewusst ein echter,
|
||||
tastaturbedienbarer Knopf. Die Knopfgrösse war mit 42×24px aber deutlich kleiner als jeder
|
||||
andere Symbol-Knopf in derselben Kopfzeile (`.themebtn`/`.profilbtn`/`.back` sind alle
|
||||
44×44px) und lag unter der üblichen 44px-Mindestgrösse für Tippflächen.
|
||||
|
||||
**Fix:** `.rings` von 42×24px auf 58×32px vergrössert (Seitenverhältnis beibehalten,
|
||||
`.rings svg{width:58px}`). Funktion (Klick navigiert zu Einstellungen) unverändert getestet.
|
||||
|
||||
**Datei:** `homeassistant/www/audi-dashboard.css`
|
||||
|
||||
## Befund 3 — Popups/Sheets auf breiten Bildschirmen fast bildschirmbreit (gleiches Muster wie Befund 1)
|
||||
|
||||
Beim Nachprüfen von Befund 1 fiel derselbe Fehler bei vier weiteren Elementen auf: sie sind
|
||||
`position:absolute` mit `left`/`right` relativ zu `.phone` (der vollen Rasterbreite,
|
||||
Seitenspalte inklusive) statt zur schmaleren Inhaltsspalte, ohne eigenes `max-width` für
|
||||
grosse Bildschirme:
|
||||
|
||||
- `.setup-popup` (Sensor-Zuordnung) - **bestätigt live:** 1644px breit bei 1920px Fenster
|
||||
(nur 10px Rand auf jeder Seite), praktisch bildschirmfüllend statt eines ruhigen Dialogs.
|
||||
- `.sdpopup` (SmartDeal-Aktivierung)
|
||||
- `.sheet` (Action-Sheet, ersetzt confirm()/alert() beim Löschen)
|
||||
- `.standortmenu` (Standort-Bottom-Sheet auf der Kartenansicht)
|
||||
|
||||
**Fix:** Im selben 860px-Container-Query `max-width:560px` (Popups/Sheet) bzw. `max-width:
|
||||
640px` (Standortmenü, mehr Inhalt) plus `margin-left/right:auto` ergänzt - zentriert die
|
||||
Elemente innerhalb ihres bestehenden `left`/`right`-Abstands, ohne die
|
||||
Transform-basierte Einblend-Animation dieser Elemente anzufassen (eine
|
||||
`transform:translateX(-50%)`-Zentrierung hätte mit der `sheet-rein`-Keyframe-Animation
|
||||
kollidiert, die am Ende selbst `transform:none` setzt). `border-radius` bleibt jeweils
|
||||
unverändert (`.standortmenu` behält oben abgerundete/unten eckige Kanten, passend zur
|
||||
weiterhin am unteren Fensterrand andockenden Bauweise).
|
||||
|
||||
**Beleg nach Fix (Setup-Popup, 1920px Fenster):** 560px breit, zentriert bei `x=808-1368`.
|
||||
|
||||
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
|
||||
|
||||
## Nicht verändert (bewusst ausserhalb dieses Audits)
|
||||
|
||||
- `.bildmenu` (Kontextmenü bei Fahrzeugbildern) ist bereits `min-width:160px` und wächst
|
||||
nicht mit der Fensterbreite - kein Fehler.
|
||||
- Zentrierung der Popups erfolgt relativ zur vollen `.phone`-Breite (Seitenspalte
|
||||
inklusive), nicht exakt zur Mitte der 860px-Inhaltsspalte - bei 1920px ein Versatz von
|
||||
ca. 138px nach rechts gegenüber echter Inhaltsmitte. Sichtbar besser als der vorige
|
||||
Zustand (praktisch volle Fensterbreite), aber für pixelgenaue Zentrierung müssten die
|
||||
Popups im Markup in die Grid-Spalte 2 verschoben werden statt als Geschwister von
|
||||
`main#view` direkt in `.phone` zu liegen - eine grössere strukturelle Änderung, hier
|
||||
bewusst zurückgestellt.
|
||||
|
||||
## Runde 2 — sechs weitere User-Findings
|
||||
|
||||
Vier bestätigt, ursächlich geklärt und behoben; zwei trotz gezielter Suche (Computed-Style-
|
||||
Vergleich, 2.5x-Zoom per temporärem `transform:scale()` auf das Live-DOM, Tag- und
|
||||
Nacht-Theme) nicht reproduzierbar - siehe unten.
|
||||
|
||||
### Befund 4 — Kopfzeile (Übersicht/Fahrten/...) auf breiten Bildschirmen 30px zu weit rechts
|
||||
|
||||
**Root Cause:** `.back` (Zurück-Pfeil) ist auch inaktiv (`opacity:0`, kein `.on`) weiterhin
|
||||
ein 44px breites Flex-Element in `.topbar` plus `gap`. Auf Wurzelseiten ohne Zurück-Pfeil
|
||||
(Übersicht, Fahrten, ...) schiebt dieser unsichtbare Platzhalter `.head`/`.title` sichtbar
|
||||
weiter nach rechts als `main#view` darunter beginnt.
|
||||
|
||||
**Beleg:** `.title` links bei `x=594`, die erste Kachel in `main#view` links bei `x=564` -
|
||||
30px Versatz.
|
||||
|
||||
**Fix:** `.back:not(.on){width:0;min-width:0;margin:0;overflow:hidden}` im
|
||||
860px-Container-Query. Nur für Wurzelseiten relevant; auf Detailseiten (`.back.on`, z. B.
|
||||
Einzelfahrt) bleibt der Knopf unverändert 44px breit und funktionsfähig - live getestet
|
||||
(Klick navigiert zurück zur Liste).
|
||||
|
||||
**Beleg nach Fix:** Versatz auf 4px reduziert (der verbleibende `gap` zum nächsten
|
||||
Flex-Element, nicht mehr wahrnehmbar).
|
||||
|
||||
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
|
||||
|
||||
### Befund 5 — Graue Pfeile auf "Mein Audi" (Fahrzeug/Service/Versicherung/Reifen) überlappen Text
|
||||
|
||||
**Root Cause:** `.tilebtn .go{top:50%;margin-top:-5px}` zentriert den Kachel-Chevron
|
||||
vertikal auf die **gesamte** Kachelhöhe. Diese fünf Kacheln sind aber keine Einzeiler,
|
||||
sondern `<span class="label">Titel</span>` + Chevron + eine ganze `dl.rows`-Liste darunter -
|
||||
die 50%-Mitte der gesamten Kachel liegt damit mitten in der Zeilenliste statt neben dem
|
||||
Titel, und überlappt besonders bei mehrzeilig umgebrochenen Werten (z. B. "2.9 TFSI quattro
|
||||
· 331 kW · 450 PS") sichtbar den Text.
|
||||
|
||||
**Fix:** `top:50%;margin-top:-5px` aus der iOS-Auflage entfernt - fällt zurück auf
|
||||
`top:var(--sp-5)` aus der Basis, die den Chevron wieder neben den Titel oben in der Kachel
|
||||
setzt (dafür existiert dort bereits extra Padding: `.tile:has(> .go) > .label:first-child
|
||||
{padding-right:44px}`).
|
||||
|
||||
**Betroffen:** alle 5 `.go`-Kacheln (Fahrzeug, Service, Versicherung/Steuer, Reifen,
|
||||
Schutzbrief Mobilität) - identisches Markup-Muster überall.
|
||||
|
||||
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
|
||||
|
||||
### Befund 6 — "10.000 km" / "1 Jahr" (Ölwechsel-Intervall) sehen nicht editierbar aus
|
||||
|
||||
**Root Cause:** Beide Werte sind echte `<select>`-Dropdowns, aber die iOS-Auflage entfernt
|
||||
Rahmen und Fläche komplett (`background:transparent;border:0`) und färbt den Wert in
|
||||
`--fg2` - demselben gedämpften Grau wie jeder andere Fliesstext. Kombiniert mit
|
||||
`appearance:none` (entfernt zusätzlich den nativen Auswahlpfeil des Browsers, base-CSS) gibt
|
||||
es keinerlei visuellen Hinweis, dass hier eine Auswahl möglich ist.
|
||||
|
||||
**Fix:** `.feld select{color:var(--ios-tint)}` ergänzt - der Wert erscheint jetzt in der
|
||||
Marken-Akzentfarbe (Rot), dem iOS-üblichen Signal "hier gibt es eine Auswahl" bei
|
||||
Picker-artigen Feldern (anders als bei freien Texteingaben, die bewusst unverändert bleiben).
|
||||
|
||||
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
|
||||
|
||||
### Befund 7 — Auf/Zu-Pfeile bei Gruppenkopfzeilen (z. B. "2026", "August" in Fahrten) sehen wie Häkchen aus
|
||||
|
||||
**Root Cause:** `.mark` baut den Chevron aus der klassischen "zwei Kanten + 45°-Drehung"-
|
||||
CSS-Technik (`border-right`+`border-bottom`, `transform:rotate(-45deg/45deg)`). Diese
|
||||
Technik braucht zwingend ein **Quadrat** für eine saubere Pfeilform - `.mark` war aber
|
||||
6×10px (für die SVG-Chevrons `.chev`/`.go` gedacht, die eine eigene, absichtlich
|
||||
nicht-quadratische Pfad-Form nutzen). Die ungleich langen Kantenabschnitte (10px vs. 6px)
|
||||
ergeben verdreht eine Form, die eher wie ein Häkchen als ein Pfeil aussieht - besonders im
|
||||
per Default aufgeklappten Zustand (`rotate(45deg)`), in dem "2026"/"August" standardmässig
|
||||
starten.
|
||||
|
||||
**Fix:** `.mark` auf 8×8px quadratisch gesetzt.
|
||||
|
||||
**Datei:** `homeassistant/www/audi-dashboard.css`
|
||||
|
||||
### Nicht reproduziert — Befund A: "Alle Menü-Icons haben eine graue Box"
|
||||
|
||||
Programmatisch geprüft (`.tab`, `.tabpille`, `.tab svg`: `background`, `border`,
|
||||
`box-shadow`, `outline` für alle 5 Tabs sowohl im Seitenmenü (Desktop) als auch in der
|
||||
Tableiste unten (375px)): nur der **aktive** Tab hat eine (sehr dezente, 7% Deckkraft)
|
||||
graue Füllung - `.tab.on .tabpille{background:var(--tile-2)}`/`.tab.on{background:
|
||||
var(--ios-fill)}`, exakt wie beabsichtigt. Die vier inaktiven Tabs sind computed
|
||||
`rgba(0,0,0,0)` (vollständig transparent) auf allen geprüften Ebenen. Falls auf dem
|
||||
tatsächlichen Gerät etwas anderes zu sehen ist (z. B. alle 5 Icons mit sichtbarer Box),
|
||||
bräuchte es einen Screenshot vom echten Gerät/Browser, um die Abweichung von diesem
|
||||
Testcontainer einzugrenzen.
|
||||
|
||||
### Nicht reproduziert — Befund B: "Roter Teilrahmen rechts an jeder Zeile" (Fahrten/Tanken)
|
||||
|
||||
Geprüft: `.swipe-content{background:var(--tile-deckend)}` (deckend, #171B21 Nacht /
|
||||
#FFFFFF Tag) deckt den dahinterliegenden roten Löschen-Button (`.swipe-delete`,
|
||||
`rgb(255,69,58)`) vollständig ab - beide Boxen exakt deckungsgleich (`x`/`width`/`right`
|
||||
identisch bis auf Subpixel), kein CSS-seitiger Spalt gefunden. Bei 2.5x-Zoom (temporärer
|
||||
`transform:scale()` auf das Live-DOM, nicht deploybar, nur zur Inspektion) war am rechten
|
||||
Rand in Tag- und Nacht-Theme kein Rot sichtbar. Möglich, dass dies nur unter bestimmten
|
||||
Bedingungen auftritt (Swipe-Geste mitten in der Transition, ein bestimmter Zoom-/DPI-Stand
|
||||
auf dem echten Gerät) - ein Screenshot oder eine genauere Beschreibung, wann genau es
|
||||
auftritt (beim Laden, nach einer Wischgeste, permanent?), würde helfen.
|
||||
|
||||
## Deployment
|
||||
|
||||
Alle sieben Fixes deployed und verifiziert im `audi_ha_test`-Docker-Container
|
||||
(`audi-dashboard-version.json` → `1786744000`), nach `homeassistant/installationspaket/`
|
||||
synchronisiert. Konsole fehlerfrei bis auf die vorbestehenden, unbezogenen
|
||||
Service-Worker-/Platzhalterbild-404-Meldungen.
|
||||
@@ -1925,8 +1925,8 @@ function vEinst() {
|
||||
<div class="tile"><span class="label">Version</span>
|
||||
<dl class="rows">
|
||||
<div class="row"><dt>Dashboard</dt><dd>${esc(CONFIG.version)}</dd></div>
|
||||
<div class="row"><dt>Fahrzeugdaten</dt><dd>EU Data Act<small>Abruf alle 15 Minuten</small></dd></div>
|
||||
<div class="row" style="border-bottom:0"><dt>Position</dt><dd>iPhone<small>Companion App</small></dd></div>
|
||||
<div class="row"><dt>Fahrzeugdaten</dt><dd>FMM003<small>Zündung · Batterie</small></dd></div>
|
||||
<div class="row" style="border-bottom:0"><dt>Position</dt><dd>FMM003<small>GPS-Tracker</small></dd></div>
|
||||
</dl>
|
||||
${(() => {
|
||||
const s = UPDATE_STATUS;
|
||||
|
||||
@@ -91,7 +91,14 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
|
||||
.tile{padding:16px 18px;margin-bottom:14px;border-radius:var(--r-tile)}
|
||||
.tile.flat{padding:0}
|
||||
.tilebtn:hover{background:var(--tile-2)}
|
||||
.tilebtn .go{top:50%;margin-top:-5px;right:18px;stroke:var(--ios-grau);stroke-width:1.6}
|
||||
/* top/margin-top NICHT von der Basis uebernehmen: alle .go-Kacheln
|
||||
(Fahrzeug/Service/Versicherung/Reifen/Schutzbrief) sind mehrzeilige
|
||||
Kacheln mit .label oben plus einer ganzen dl.rows-Liste darunter - eine
|
||||
vertikale 50%-Zentrierung landet dann mitten in der Zeilenliste statt
|
||||
neben dem Titel und ueberlappt umgebrochenen Zeilentext (Design-Audit
|
||||
2026-08-13). Bleibt bei top:var(--sp-5) aus der Basis, nur rechter
|
||||
Abstand/Farbe werden fuer die iOS-Optik angepasst. */
|
||||
.tilebtn .go{right:18px;stroke:var(--ios-grau);stroke-width:1.6}
|
||||
.label{font-size:13px;letter-spacing:.01em;text-transform:none;color:var(--fg3)}
|
||||
.row{min-height:44px;padding:11px 0;border-bottom:1px solid var(--ios-sep)}
|
||||
.row dt{font-size:16px;color:var(--fg)}
|
||||
@@ -131,6 +138,12 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
|
||||
.feld label{font-size:16px;color:var(--fg)}
|
||||
.feld input,.feld select{background:transparent;border:0;border-radius:8px;font-size:16px;
|
||||
padding:8px 4px;color:var(--fg2)}
|
||||
/* Design-Audit 2026-08-13: ein <select> (z.B. Oelwechsel-Intervall "10.000 km"/
|
||||
"1 Jahr") sah wie reiner, nicht editierbarer Text aus, seit hier Rahmen/
|
||||
Flaeche entfernt wurden - anders als bei freien Texteingaben zeigt iOS bei
|
||||
Picker-Feldern wie diesem ueblicherweise die Akzentfarbe statt Fliesstext-
|
||||
Grau als Hinweis "hier gibt es eine Auswahl". */
|
||||
.feld select{color:var(--ios-tint)}
|
||||
.feld input:focus,.feld select:focus{background:var(--ios-fill);color:var(--fg)}
|
||||
.mitEinheit input{background:var(--ios-fill);padding:8px 10px}
|
||||
.notiz{background:var(--ios-fill);border:0;border-radius:12px;font-size:16px}
|
||||
@@ -207,12 +220,22 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
|
||||
:host > div{height:calc(100dvh - 24px)}
|
||||
.phone{display:grid;grid-template-columns:264px minmax(0,1fr);
|
||||
grid-template-rows:auto auto minmax(0,1fr)}
|
||||
.topbar{grid-column:2;grid-row:1;padding:38px 44px 8px}
|
||||
.phone:has(.back.on) .topbar{grid-column:2;grid-row:1;padding:34px 44px 8px;justify-content:flex-start}
|
||||
/* max-width:860px muss zu main#view passen, sonst treibt der Flex-Inhalt
|
||||
(.head{flex:1} schiebt .profilbtn nach rechts) das Zahnrad bis an den
|
||||
Rand der vollen Grid-Spalte statt an den Rand der Inhaltsspalte darunter -
|
||||
auf breiten Bildschirmen klaffte da eine sichtbare Luecke. */
|
||||
.topbar{grid-column:2;grid-row:1;padding:38px 44px 8px;max-width:860px}
|
||||
.phone:has(.back.on) .topbar{grid-column:2;grid-row:1;padding:34px 44px 8px;justify-content:flex-start;max-width:860px}
|
||||
/* Design-Audit 2026-08-13: .back ist auch inaktiv (opacity:0) noch ein
|
||||
44px breites Flex-Element plus Gap - auf Wurzelseiten ohne Zurueck-Pfeil
|
||||
schob das die Kopfzeile (.head/.title) sichtbar weiter nach rechts als
|
||||
main#view darunter beginnt. Auf Detailseiten (.back.on) bleibt der Platz
|
||||
bewusst reserviert, das ist dort ein echter, bedienbarer Knopf. */
|
||||
.back:not(.on){width:0;min-width:0;margin:0;overflow:hidden}
|
||||
.phone:has(.back.on) .head{align-items:flex-start}
|
||||
.phone:has(.back.on) .title{font-size:26px;text-align:left}
|
||||
.title{font-size:34px}
|
||||
.ptr{grid-column:2;grid-row:2}
|
||||
.ptr{grid-column:2;grid-row:2;max-width:860px}
|
||||
main#view{--seitenrand:44px;grid-column:2;grid-row:3;padding:8px var(--seitenrand) 48px;max-width:860px}
|
||||
|
||||
.tabbar{grid-column:1;grid-row:1 / 4;display:flex;flex-direction:column;gap:4px;
|
||||
@@ -247,6 +270,16 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
|
||||
.carfix.klein,.bildbox.carfix.klein{height:220px}
|
||||
.bildgrid{grid-template-columns:repeat(4,1fr)}
|
||||
.quad{gap:14px}
|
||||
|
||||
/* Design-Audit 2026-08-13: .setup-popup/.sdpopup/.sheet/.standortmenu sind
|
||||
position:absolute relativ zu .phone (der vollen Rasterbreite, nicht nur
|
||||
der Inhaltsspalte) mit left/right auf einen festen Abstand - auf breiten
|
||||
Bildschirmen ergab das einen fast bildschirmbreiten Dialog statt einer
|
||||
ruhigen Karte. max-width + margin:auto zentriert sie innerhalb des
|
||||
bestehenden left/right-Abstands, ohne die transform-basierte
|
||||
Einblend-Animation dieser Elemente zu beruehren. */
|
||||
.setup-popup,.sdpopup,.sheet{max-width:560px;margin-left:auto;margin-right:auto}
|
||||
.standortmenu{max-width:640px;margin-left:auto;margin-right:auto}
|
||||
}
|
||||
|
||||
/* Fahrzeugbild randlos wie in einer Fahrzeug-App: der Platzhalter bleibt
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version": 1786730400}
|
||||
{"version": 1786744000}
|
||||
|
||||
@@ -173,8 +173,13 @@
|
||||
bedienbar. Auf grossen Bildschirmen gibt es damit zwei Wege in die
|
||||
Einstellungen (Ringe und Zahnrad) - unschaedlich, und der Zugang haengt
|
||||
nicht mehr davon ab, ob audi-dashboard-ios.css geladen wurde. */
|
||||
.rings { width: 42px; height: 24px; color: var(--fg); }
|
||||
.rings svg { width: 42px; height: auto; }
|
||||
/* Design-Audit 2026-08-13: in Telefonbreite ist dies der einzige Zugang zu
|
||||
den Einstellungen (siehe Kommentar oben), war mit 42px aber deutlich
|
||||
kleiner als jeder andere Symbol-Knopf in der Kopfzeile (.themebtn/
|
||||
.profilbtn/.back sind alle 44px) und lag damit unter der ueblichen
|
||||
44px-Mindestgroesse fuer Tippflaechen. */
|
||||
.rings { width: 58px; height: 32px; color: var(--fg); }
|
||||
.rings svg { width: 58px; height: auto; }
|
||||
|
||||
/* Der Markenklon in der Seitenleiste wird vom Skript unbedingt in die
|
||||
Menueleiste gehaengt; sichtbar macht ihn erst die iOS-Auflage ab 860px.
|
||||
@@ -490,7 +495,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
min-height: 56px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.feld label { font-size: 14px; color: var(--fg2); flex: 1 1 auto; min-width: 0; line-height: 1.35; }
|
||||
/* :not(.switch): der Schalter (Tanken/Einstellungen etc.) ist selbst ein
|
||||
<label class="switch">, kein Textlabel - ohne den Ausschluss erbte er
|
||||
dieselbe flex:1 1 auto-Regel und zog sich über die ganze Zeilenbreite. */
|
||||
.feld label:not(.switch) { font-size: 14px; color: var(--fg2); flex: 1 1 auto; min-width: 0; line-height: 1.35; }
|
||||
/* Eingaben nie breiter als die Kachel: die im Markup gesetzten festen
|
||||
Breiten (width:132px) bleiben Obergrenze, schrumpfen aber mit. */
|
||||
.feld input, .feld select, .notiz {
|
||||
@@ -619,7 +627,12 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
.acc-h { transition: background .15s; }
|
||||
.acc-h:active { background: var(--tile-2); }
|
||||
.mark {
|
||||
width: 6px; height: 10px;
|
||||
/* Design-Audit 2026-08-13: die Border-Ecken-Technik (zwei Kanten +
|
||||
45deg-Drehung) braucht ein Quadrat, um einen sauberen Chevron zu
|
||||
ergeben - bei 6x10px (nicht quadratisch, wie fuer die SVG-Chevrons
|
||||
.chev/.go gedacht) sind die beiden Kantenlaengen ungleich lang und das
|
||||
Ergebnis sah eher wie ein Haekchen als ein Pfeil aus. */
|
||||
width: 8px; height: 8px;
|
||||
border-right: 1.4px solid var(--fg3);
|
||||
border-bottom: 1.4px solid var(--fg3);
|
||||
transform: rotate(-45deg);
|
||||
|
||||
+18
-17
@@ -29,33 +29,34 @@ authentifizierten Tests.
|
||||
|
||||
## Was nachgebildet wird
|
||||
|
||||
`konfiguration.yaml` bildet die Entitäten der HACS-Integration
|
||||
`TommiG1/HA_VAG-EU-Data-Act` als Template-Sensoren nach, damit das Backend echte
|
||||
Werte sieht. Steuerbar zur Laufzeit über Helfer — damit lassen sich die
|
||||
`@state_trigger`-Abläufe wirklich auslösen:
|
||||
`konfiguration.yaml` bildet zwei Datenquellen als Template-Sensoren nach, damit
|
||||
das Backend echte Werte sieht. Steuerbar zur Laufzeit über Helfer — damit
|
||||
lassen sich die `@state_trigger`-Abläufe wirklich auslösen:
|
||||
|
||||
| Helfer | Steuert | Wofür |
|
||||
|---|---|---|
|
||||
| `input_number.test_kilometerstand` | `sensor.audi_rs_4_avant_mileage` | Reifenzähler, Fahrtabschluss-Screening |
|
||||
| `input_number.test_tankfuellstand` | `sensor.audi_rs_4_avant_fuel_level` | automatische Tankerkennung |
|
||||
| `input_number.test_reichweite` | `sensor.audi_rs_4_avant_range_primary` | Übersichtsanzeige |
|
||||
| `input_text.test_wlan` | `sensor.iphone_wifi_connection` | Fahrterkennung (Start/Ende) |
|
||||
| `input_boolean.test_tuer_vl` | Tür vorne links | „sicher abgestellt" |
|
||||
| `input_boolean.test_fenster_vl` | Fenster vorne links | „sicher abgestellt" |
|
||||
| `input_boolean.test_entriegelt` | Türschloss vorne links | „sicher abgestellt" |
|
||||
| `input_boolean.test_zuendung` | `binary_sensor.testzone_fmm003_engine_ignition_or_acc_status` | Fahrterkennung (Start/Ende, `einstellungen.ZUENDUNG_SENSOR`) |
|
||||
| `input_number.test_kilometerstand` | `sensor.audi_rs_4_avant_mileage` | Reifenzähler, Fahrtabschluss-Screening (nur bei manueller Zuordnung über das Setup-Menü, `KM_SENSOR` ist per Default leer) |
|
||||
| `input_number.test_tankfuellstand` | `sensor.audi_rs_4_avant_fuel_level` | automatische Tankerkennung (nur bei manueller Zuordnung, `TANK_SENSOR` ist per Default leer) |
|
||||
| `input_number.test_reichweite` | `sensor.audi_rs_4_avant_range_primary` | Übersichtsanzeige (nur bei manueller Zuordnung, `RANGE_SENSOR` ist per Default leer) |
|
||||
| `input_boolean.test_tuer_vl` | Tür vorne links | „sicher abgestellt" (nur bei manueller Zuordnung) |
|
||||
| `input_boolean.test_fenster_vl` | Fenster vorne links | „sicher abgestellt" (nur bei manueller Zuordnung) |
|
||||
| `input_boolean.test_entriegelt` | Türschloss vorne links | „sicher abgestellt" (nur bei manueller Zuordnung) |
|
||||
|
||||
Beispiel — Fahrt auslösen (WLAN des Fahrzeugs verbinden, dann trennen):
|
||||
Die Kilometerstand-/Tankfüllstand-/Reichweite- und Tür-/Fenster-/Schloss-Sensoren
|
||||
bilden die Entitäten der abgelösten HACS-Integration `TommiG1/HA_VAG-EU-Data-Act`
|
||||
nach (siehe `einstellungen.py`) — für den Standardbetrieb ohne Bedeutung, aber
|
||||
weiterhin nützlich, um die manuelle Zuordnung über das Setup-Menü zu testen.
|
||||
|
||||
Beispiel — Fahrt auslösen (Zündung/ACC an, dann aus):
|
||||
|
||||
```bash
|
||||
T=$(grep VITE_TEST_TOKEN ../companion-app/.env.local | cut -d= -f2)
|
||||
curl -X POST -H "Authorization: Bearer $T" -H "Content-Type: application/json" \
|
||||
-d '{"entity_id":"input_text.test_wlan","value":"Audi_MMI"}' \
|
||||
http://localhost:18123/api/services/input_text/set_value
|
||||
-d '{"entity_id":"input_boolean.test_zuendung"}' \
|
||||
http://localhost:18123/api/services/input_boolean/turn_on
|
||||
```
|
||||
|
||||
Der WLAN-Name muss zu `fahrzeug.wlan_ssid` in
|
||||
`audi_dashboard/fahrzeugprofil.json` passen.
|
||||
|
||||
## Aufräumen
|
||||
|
||||
```bash
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
# Wegwerf-Testinstanz fuer DataMetric360.
|
||||
# Bildet die Entitaeten der HACS-Integration TommiG1/HA_VAG-EU-Data-Act nach,
|
||||
# damit das pyscript-Backend echte Werte sieht. Ueber die input_*-Helfer sind
|
||||
# die Werte zur Laufzeit aenderbar (Fahrterkennung, Reifenzaehler, Tankerkennung
|
||||
# haengen an @state_trigger).
|
||||
# Bildet zwei Datenquellen nach: den FMM003-Zuendungssensor (Fahrterkennung,
|
||||
# aktiv per Standard in einstellungen.py) sowie die Entitaeten der
|
||||
# abgeloesten HACS-Integration TommiG1/HA_VAG-EU-Data-Act (Kilometerstand,
|
||||
# Tankfuellstand, Tueren/Fenster/Schloesser - in einstellungen.py per Default
|
||||
# leer, aber ueber das Setup-Menue weiterhin manuell zuordenbar). Ueber die
|
||||
# input_*-Helfer sind die Werte zur Laufzeit aenderbar (Fahrterkennung,
|
||||
# Reifenzaehler, Tankerkennung haengen an @state_trigger).
|
||||
|
||||
default_config:
|
||||
|
||||
@@ -51,13 +54,9 @@ input_number:
|
||||
initial: 385
|
||||
mode: box
|
||||
|
||||
input_text:
|
||||
test_wlan:
|
||||
name: Test WLAN
|
||||
initial: Zuhause
|
||||
max: 60
|
||||
|
||||
input_boolean:
|
||||
test_zuendung:
|
||||
name: Test Zuendung/ACC
|
||||
test_tuer_vl:
|
||||
name: Test Tuer vorne links
|
||||
test_fenster_vl:
|
||||
@@ -66,10 +65,11 @@ input_boolean:
|
||||
name: Test entriegelt
|
||||
|
||||
template:
|
||||
- binary_sensor:
|
||||
- name: "Testzone FMM003 Engine Ignition Or Acc Status"
|
||||
unique_id: test_fmm003_zuendung
|
||||
state: "{{ is_state('input_boolean.test_zuendung', 'on') }}"
|
||||
- sensor:
|
||||
- name: "iPhone WiFi Connection"
|
||||
unique_id: test_iphone_wifi
|
||||
state: "{{ states('input_text.test_wlan') }}"
|
||||
- name: "Audi RS 4 Avant Mileage"
|
||||
unique_id: test_audi_mileage
|
||||
state: "{{ states('input_number.test_kilometerstand') | int(0) }}"
|
||||
|
||||
Reference in New Issue
Block a user