diff --git a/design/README.md b/design/README.md index 4d521f0..375946c 100644 --- a/design/README.md +++ b/design/README.md @@ -16,7 +16,7 @@ Das ist der **Entwurf**, nicht der lauffähige Code. Umgesetzt wird er später i | `DataMetric360 Board.dc.html` | Vergleichsansicht: dieselbe App gleichzeitig als Smartphone- und Großbildschirm-Rahmen nebeneinander, mit Bildschirm-/Theme-Umschalter. Steuert beide Rahmen per `postMessage`. | | `dm360-host.html` | Lädt `audi-dashboard-app.js` in einem eigenen ``, hängt danach `audi-dashboard-ios.css` in dessen Shadow-Root - der eigentliche Träger hinter dem Board. | | `ios-frame.jsx` | iOS-26-Gerätekachel (Statusleiste, Dynamic Island, Home-Indikator) - reine Optik, keine App-Logik. | -| `audi-dashboard-ios.css` | **Die eigentliche Neuerung dieses Exports.** Optik-Auflage über `audi-dashboard.css`: iOS-natives Erscheinungsbild (44-px-Zeilen, transluzente Tab-Leiste, iOS-Schalter) plus - wichtig - die responsive Großbildschirm-Umsetzung per `@container (min-width:860px)` (Tab-Leiste wird zur seitlichen Navigation). Nach eigener Aussage der Datei rein additiv, rührt `audi-dashboard.css` und die App-Logik nicht an. **Nicht verifiziert, ob das zutrifft** - noch nicht in `homeassistant/www/` scharf geschaltet. | +| `audi-dashboard-ios.css` | **Die eigentliche Neuerung dieses Exports.** Optik-Auflage über `audi-dashboard.css`: iOS-natives Erscheinungsbild (44-px-Zeilen, transluzente Tab-Leiste, iOS-Schalter) plus - wichtig - die responsive Großbildschirm-Umsetzung per `@container (min-width:860px)` (Tab-Leiste wird zur seitlichen Navigation). **Seit 2026-08-11 in `homeassistant/www/` scharf geschaltet und im Docker-Testcontainer bei 375px und 1280px verifiziert** - rührt `audi-dashboard-app.js` nicht an, wie behauptet. | | `datametric360-ios.css` | Dieselbe Optik-Auflage, aber für die `@audi-dash/ui`-Komponentenklassen (`.ads-*`) statt für die Panel-eigenen Klassen - für später, wenn `companion-app/` eine UI bekommt. | | `support.js` | Hilfsfunktionen des Entwurfs | | `assets/` | Icons, Logos, Typenschilder und Schriften, die der Entwurf verwendet | @@ -44,8 +44,30 @@ Anpassungen - u. a. fehlen die Vier-Kacheln-Kurzwahl auf der Übersicht (Fahrzeu Reifen/Tanken), die füllstandsabhängige Balkenfarbe und die Resttank-in-Liter-Angabe. **Deshalb wurde nur `audi-dashboard-ios.css` übernommen (reine CSS-Auflage, keine Logik) - `audi-dashboard-app.js` selbst wurde NICHT aus diesem Export übernommen**, um diese bereits fertigen Funktionen nicht zu -verlieren. Bevor diese Auflage produktiv geschaltet wird, muss geklärt werden, ob/wie sie mit dem -aktuellen `audi-dashboard-app.js` zusammenpasst. +verlieren. + +**Aktivierung 2026-08-11:** `audi-dashboard-ios.css` ist jetzt in +`../homeassistant/www/audi-dashboard-app.js` (Stylesheet-Loader, ~Zeile 3098) fest verdrahtet - als +zweiter `` neben `audi-dashboard.css`, rein additiv. Im Docker-Testcontainer bei 375px +(Handy: `.phone` bleibt `flex`, Tab-Leiste unten) und 1280px (Desktop: `.phone` wird `grid`, +264px-Seitennavigation, Inhalt bis 860px begrenzt) verifiziert. + +Dabei zwei Fixes nötig, die für künftige Arbeit an dieser Datei wichtig sind: +1. **`:host`-Selektoren werden von diesem Browser innerhalb von `@container`-Blöcken verworfen** + (unbedingtes `:host > div{...}` parst und wirkt, dasselbe innerhalb `@container(){}` verschwindet + spurlos aus dem CSSOM - kein Syntaxfehler, die Regel fehlt einfach). Der alten `:host > div`- + Zentrierung aus `audi-dashboard.css` (`max-width:412px`, für die alte Einzelgröße gedacht) musste + deshalb **unbedingt** statt bedingt (nur ab 860px) die Deckelung genommen werden - auf schmalen + Bildschirmen macht der Viewport selbst die Breite eng genug, das ist folgenlos. +2. **`audi-dashboard-version.json` muss bei jeder CSS-/JS-Änderung im Testcontainer hochgezählt + werden**, sonst liefert der Browser die alte Datei aus dem HTTP-Cache aus, obwohl der Server + längst die neue hat (an `audi-dashboard-panel.js`'s eigenem Cache-Busting-Mechanismus erkennbar, + siehe dessen Kommentar). Zusätzlich cacht `window.__audiDashboardStarten` das Ladeergebnis pro + Browser-Tab - eine SPA-interne Navigation zur selben Panel-URL lädt nicht neu; ein neuer Tab + (oder echter Hard-Reload) ist bei Verifikationen nötig. + +Bevor diese Auflage weitergehend produktiv genutzt wird, muss noch geklärt werden, ob/wie sie mit +zukünftigen Änderungen am aktuellen `audi-dashboard-app.js` zusammenpasst. Dieser Ordner wird beim nächsten Export komplett ersetzt. diff --git a/homeassistant/www/audi-dashboard-app.js b/homeassistant/www/audi-dashboard-app.js index ec44b1e..eaaaa73 100644 --- a/homeassistant/www/audi-dashboard-app.js +++ b/homeassistant/www/audi-dashboard-app.js @@ -3100,6 +3100,13 @@ class AudiDashboardPanel extends HTMLElement { link.href = `/local/audi-dashboard.css?v=${CSS_VERSION}`; ROOT.appendChild(link); + /* iOS-native Optik + responsive Grossbildschirm-Layout (@container ab + 860px), rein additive Auflage aus dem Claude-Design-Entwurf 2026-08-11. */ + const linkIos = document.createElement("link"); + linkIos.rel = "stylesheet"; + linkIos.href = `/local/audi-dashboard-ios.css?v=${CSS_VERSION}`; + ROOT.appendChild(linkIos); + const wrapper = document.createElement("div"); wrapper.innerHTML = `
diff --git a/homeassistant/www/audi-dashboard-ios.css b/homeassistant/www/audi-dashboard-ios.css index 767a53f..50fdb45 100644 --- a/homeassistant/www/audi-dashboard-ios.css +++ b/homeassistant/www/audi-dashboard-ios.css @@ -42,8 +42,13 @@ body{padding:0;background:var(--canvas)} html,body{height:100%} -/* Der von _aufbauen() eingefuegte Wrapper zwischen Host und .phone */ -:host > div{height:100%} +/* Der von _aufbauen() eingefuegte Wrapper zwischen Host und .phone. Die + 412px-Deckelung aus audi-dashboard.css (fuer die alte Einzelgroesse + gedacht) wird hier unbedingt aufgehoben, nicht nur ab 860px: auf + schmalen Bildschirmen macht der Viewport selbst die Breite eng genug, + :host-Selektoren innerhalb @container werden von diesem Browser aber + offenbar verworfen - deshalb unbedingt statt bedingt. */ +:host > div{height:100%;max-width:none} .phone{width:100%;max-width:none;height:100%;border-radius:0; font-family:"Audi Type",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;letter-spacing:0} diff --git a/homeassistant/www/audi-dashboard-version.json b/homeassistant/www/audi-dashboard-version.json index 8920e24..9c94edd 100644 --- a/homeassistant/www/audi-dashboard-version.json +++ b/homeassistant/www/audi-dashboard-version.json @@ -1 +1 @@ -{"version": 1786377886} +{"version": 1786377887}