From 7980f9672d50eb68e3d68d3203d020ea4f74abcc Mon Sep 17 00:00:00 2001 From: Tobi G Date: Wed, 12 Aug 2026 16:20:19 +0200 Subject: [PATCH] Desktop-Sidebar-Markenklon (.navmarke) aus Claude Design nachziehen audi-dashboard-app.js war bereits mit dem Design-Projekt identisch, aber audi-dashboard-ios.css war seit einer Weile nicht mehr neu gezogen worden: Design hatte inzwischen einen Rings-Klon oben in der Desktop-Sidebar (.navmarke) sowie einen gefuellten Pill-Stil fuer den aktiven Tab ergaenzt. Nach Byte-Diff-Pruefung (nur additive CSS-Aenderungen) komplett uebernommen, in Docker deployt und bei 402px/1400px verifiziert. Co-Authored-By: Claude Sonnet 5 --- AGENTS.md | 14 ++++++++ homeassistant/www/audi-dashboard-ios.css | 35 ++++++++++++++++--- homeassistant/www/audi-dashboard-version.json | 2 +- 3 files changed, 45 insertions(+), 6 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index b718fb6..540247e 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -286,6 +286,20 @@ capacitor/iframe/browser (`umgebung.ts`), types + entity table (`types.ts`), fac viewport-anchored, not parent-relative) inside `@container (min-width:860px)`. Verified live at both narrow (mobile tab bar, full content) and wide (1144px container, grid side-nav, navigation clicks, settings back-arrow) — screenshots taken, no regressions found. +- [x] Desktop-Sidebar-Markenklon (`.navmarke`) nachgezogen — done 2026-08-12. The user compared the + deployed app against the live Claude Design "Board" (the two-viewport comparison page, which + genuinely iframes this project's own `audi-dashboard-app.js`/`-ios.css`, not a static mockup) + and asked why the desktop Audi-rings placement differed: Design showed the rings pinned above + the sidebar nav list, ours showed them in the content header next to the title. Root cause, + confirmed via `DesignSync get_file` + byte-diff: `audi-dashboard-app.js` was already fully in + sync (identical), but `audi-dashboard-ios.css` had drifted — the Design project had since + added a `.navmarke` sidebar clone of the rings (only visible in the `@container + (min-width:860px)` block; `.rings{display:none!important}` hides the header copy there so the + mark appears once) plus a filled-pill active-tab style (`.tabpille`), neither pulled back + locally. Diffed the two full files first to confirm every change was additive/CSS-only, then + replaced the local file wholesale. Verified in `audi_ha_test` at both 402px and 1400px: rings + now sit above the nav list on desktop, gear icon alone in the content header, mobile view + unaffected, no console errors beyond the pre-existing missing-vehicle-photo 404 gap. - [x] Standort-Kachel (live vehicle GPS position on the Übersicht, above "Zuletzt") — done 2026-08-12. New tile with a real (non-fake) Leaflet mini-map, opens a fullscreen "Standort" route on tap; fullscreen has 4 floating controls (map style, center-on-vehicle, diff --git a/homeassistant/www/audi-dashboard-ios.css b/homeassistant/www/audi-dashboard-ios.css index a80cb80..f975bd7 100644 --- a/homeassistant/www/audi-dashboard-ios.css +++ b/homeassistant/www/audi-dashboard-ios.css @@ -72,7 +72,13 @@ html,body{height:100%} .sync svg{width:13px;height:13px} .themebtn{width:36px;height:36px;border:0;background:var(--ios-fill);color:var(--fg2)} .themebtn:hover{background:var(--tile-2);color:var(--fg)} +/* Telefonbreite: die Ringe stehen oben rechts und oeffnen die Einstellungen + (Stand nach dem Design-Audit). Das Zahnrad entfaellt dort, damit oben rechts + nur ein Element sitzt. */ +.rings{order:9;margin-left:8px;margin-right:-10px;pointer-events:auto;cursor:pointer; + min-width:44px;min-height:44px;height:44px;justify-content:flex-end;padding:0 10px} .rings svg{height:17px} +.profilbtn{display:none} /* Unterseite: kompakter, zentrierter Titel wie in einer iOS-Navigationsleiste */ .phone:has(.back.on) .topbar{padding:54px 16px 6px;gap:8px} .phone:has(.back.on) .head{align-items:center} @@ -158,14 +164,18 @@ main{padding:0 16px 30px;scroll-behavior:smooth} background:rgba(12,16,20,.72); -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)} :host([data-theme="tag"]) .tabbar{background:rgba(242,242,247,.78)} -.tab{border-top:0;margin-top:0;padding:9px 2px 7px;gap:3px; +.tab{border-top:0;margin-top:0;padding:7px 2px 6px;gap:3px; font-size:10px;letter-spacing:0;text-transform:none;color:var(--ios-grau)} /* Beschriftung folgt weiter dem Schalter in den Einstellungen */ .tabbar.ohne .tab span{display:none} .tab svg{width:26px;height:26px;stroke-width:1.5} -.tab.on{color:var(--ios-tint);border-top-color:transparent} -.tab.on svg polygon{fill:var(--ios-tint);stroke:var(--ios-tint)} -.tabbar.ohne .tab{padding:14px 2px 12px} +/* myAudi-Menueleiste: das aktive Symbol sitzt hell in einer gefuellten Pille, + die uebrigen bleiben grau - kein farbiger Tint, kein Oberkantenstrich. */ +.tabpille{width:63px;height:39px;border-radius:20px} +.tab.on{color:var(--fg);border-top-color:transparent} +.tab.on .tabpille{background:rgba(255,255,255,.14)} +:host([data-theme="tag"]) .tab.on .tabpille{background:rgba(0,0,0,.07)} +.tabbar.ohne .tab{padding:11px 2px 10px} :focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px} @@ -180,6 +190,9 @@ main{padding:0 16px 30px;scroll-behavior:smooth} begrenzte Spalte. Container-Abfrage statt @media, weil die App in einem eigenen Rahmen sitzt und nicht die Fensterbreite messen darf. Schwelle 860 px. ================================================================== */ +/* Klon der Ringe in der Menueleiste - nur im Spaltenlayout sichtbar */ +.navmarke{display:none} + @container (min-width:860px){ /* Ab hier keine schwebende Telefonkarte mehr - die 880px-Deckelung faellt, die App fuellt die tatsaechliche (weiterhin viewport-verankerte) Hoehe. */ @@ -202,10 +215,22 @@ main{padding:0 16px 30px;scroll-behavior:smooth} padding:12px 14px;border-radius:12px;font-size:15px;letter-spacing:0} .tab span{display:block} .tab svg{width:22px;height:22px} + .tabpille{width:auto;height:auto;border-radius:0;background:none} + .tab.on .tabpille{background:none} .tab:hover{background:var(--tile)} .tab.on{background:rgba(245,5,55,.14);color:var(--ios-tint)} .tabbar.ohne .tab span{display:block} - .tabbar.ohne .tab{padding:12px 14px} + .tabbar.ohne .tab{padding:12px 14px;gap:14px} + .tabbar.ohne .tab svg{width:22px;height:22px} + /* Marke am Kopf der Seitenspalte, dafuer keine Ringe in der Kopfzeile + (Design-Audit: die Marke soll nur einmal im Bild stehen). */ + .navmarke{display:block;margin:2px 0 26px 14px;color:var(--fg)} + .navmarke svg{width:54px;height:auto;display:block} + /* Grosser Bildschirm: Marke am Kopf der Spalte, Zahnrad wieder oben rechts */ + .profilbtn{display:inline-flex} + /* Die Kopf-Ringe setzt die App per Inline-Stil (display:inline-flex), + deshalb hier mit !important. */ + .rings{display:none !important} .duo{grid-template-columns:repeat(3,minmax(0,1fr))} .carfix,.bildbox.carfix{height:260px} diff --git a/homeassistant/www/audi-dashboard-version.json b/homeassistant/www/audi-dashboard-version.json index 62b77ca..8cc4483 100644 --- a/homeassistant/www/audi-dashboard-version.json +++ b/homeassistant/www/audi-dashboard-version.json @@ -1 +1 @@ -{"version": 1786536000} +{"version": 1786543200}