From 17b25d492a27a2d14512b7fbba01ea40991668c0 Mon Sep 17 00:00:00 2001 From: Tobi G Date: Sun, 16 Aug 2026 20:40:14 +0200 Subject: [PATCH] Fix wheel-photo squareness bug, native select popups, image-cycle crash MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .bildbox.radbild lost to a same-specificity, later-declared .bildbox rule, so the wheel photo stayed a full-width 4:3 box despite the earlier crop fix - only which slice showed ever changed. Fixed with a compound selector and moved "Montiert" to top-left to match the now-correctly-sized photo. Native ` +popups stop rendering in the browser's default light palette against the dark app, root-caused and +fixed a JS crash in the "Mein Audi" image-cycle click handler, merged the separate "Fahrzeugbilder" +upload grid into "Bild der Übersicht" (pick a view, tap its photo to upload), and turned the back +arrow from red to the neutral headline color — see 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. @@ -926,6 +932,63 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed Deployed to `audi_ha_test` (version `1786901000`); pin fix visually confirmed live (solid teardrop pin with white car glyph, clearly over the map's "Obergurgl" label text) and the tab-bar highlight confirmed covering both icon and "Übersicht" label. +- [x] Seventh round the same day (2026-08-16) — more user-reported layout/interaction bugs: + (1) **Wheel photo (Sommerrad/Winterrad) was never actually a square, despite the fifth round's + crop-direction fix.** Root cause: `bildMitPlatzhalter()` puts the `radbild` class on *both* the + wrapping `.bildbox` div and the ``; the old `.radbild{width:96px;height:96px;...}` rule and + `.bildbox{width:100%;aspect-ratio:4/3;...}` have equal specificity (one class each), and + `.bildbox` is declared later in the file, so it silently won — the box stayed a full-width 4:3 + rectangle the whole time, `object-position:right center` just changed which slice of that wide + box showed. Fixed with a `.bildbox.radbild{width:96px;height:96px;aspect-ratio:1/1}` compound + selector (two classes, unambiguously higher specificity than plain `.bildbox`); `.radbild` alone + now only carries `object-position`. Verified live: `.bildbox.radbild` now measures exactly + 96×96px. + (2) **"Montiert" moved from top-right to top-left**, per explicit request — this was the visible + symptom of (1): the pill was anchored top-right assuming it overlaid the (accidentally) full- + width photo; once the photo is a real 96px square on the left, top-left is where it actually + needs to sit to stay over the picture. + (3) **Native `` box itself + was already themed correctly, but the *opened* native option list ignores app CSS and falls back + to the browser/OS default palette unless `color-scheme` says otherwise — this is what made + "Modell" and every other dropdown "flash" bright white against the dark app on open. Added + `color-scheme: dark` under `:host([data-theme="nacht"])` and `color-scheme: light` under + `:host([data-theme="tag"])` in `audi-dashboard-ios.css`. + (4) **Fixed a real JS crash in the "Mein Audi" image-cycle click handler.** `bildWeiter()` (fires + on tapping the hero photo) tried `box.querySelector(".platzhalter-datei").textContent = ...` — + that class was never emitted by `bildMitPlatzhalter()` (the actual class is `.platzhalter- + aktion`, and in gallery mode it deliberately shows a static "Foto hinzufügen" prompt, not a + filename). `querySelector` returned `null`, the assignment threw, and the exception aborted the + function *before* reaching the line that updates the `.dots` page indicator — so the photo + itself advanced (that line ran first) but the dots never moved, reading as "doesn't work." + Removed the dead line entirely; verified live that the `.dots` `on` class now correctly moves + with each click and no exception is thrown. + (5) **Merged the separate "Fahrzeugbilder" upload grid into "Bild der Übersicht"**, per explicit + request: pick a view from the existing "Ansicht" dropdown, then tap the (now also click-to- + upload) preview below it to upload/replace/delete that specific photo — reusing the same + generic `data-bildklick`/`bildMenuOffen` popup plumbing already used by the wheel-photo tiles, + not a new mechanism. `bildInfo()`'s existing winter-side-view special case (swaps in + `seitenansicht-winter.webp` while winter tires are marked mounted) means the winter variant + stays uploadable through the same control, gated by current tire season instead of a permanently + visible separate slot. The now-unused `BILDER_UPLOAD_SLOTS` constant and the `.bildgrid`/ + `.bildslot`/`.bildslot-label`/`.carfix.mini` CSS were removed as dead code; a new + `.bildmenu.ansicht` positions the ersetzen/löschen popup anchored to the tile's *bottom* edge + (not a fixed top offset like the other two menu variants) since this preview's height varies + with the tile's own content instead of being a fixed small thumbnail. + (6) **Back arrow changed from red (`--ios-tint`) to the neutral headline color (`--fg`)** in + `audi-dashboard-ios.css`, matching every other navigation-color decision made this project (red + stays reserved for destructive actions per Apple's HIG). + Investigated but could not reproduce: user reported that hiding tab labels ("Beschriftung in der + Menüleiste" off) makes the *entire* tab bar disappear. Traced the full CSS cascade and the exact + commit that added the sixth round's icon+label highlight (`git show` on the relevant lines) — + the new rules are correctly scoped to `:not(.ohne)` and provably never touched the icon-only + path; live DOM/computed-style testing (toggle the switch, click the actual label, navigate away + and back, both mobile and desktop container widths) showed the tab bar staying visible, correctly + sized, and correctly classed in every case tried in the in-app Chromium browser. Left unchanged + pending a repro (screenshot or the exact device/browser) from the user, since no defect could be + located to fix. + Deployed to `audi_ha_test`; wheel-photo squareness, Montiert position, back-arrow color, and the + image-cycle dots all confirmed live via direct DOM/computed-style checks (no visual screenshot + tool available this session — see running note below). - [ ] 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` diff --git a/homeassistant/installationspaket/www/audi-dashboard-app.js b/homeassistant/installationspaket/www/audi-dashboard-app.js index 3f4133a..b2d5689 100644 --- a/homeassistant/installationspaket/www/audi-dashboard-app.js +++ b/homeassistant/installationspaket/www/audi-dashboard-app.js @@ -207,10 +207,6 @@ const BILDER = [ ]; let bild = 0; const SEITE_WINTER = { label: "Auto Seite mit Winterrädern", datei: "seitenansicht-winter.webp" }; -// Alle einzeln hochladbaren Bild-Plätze (§ Fahrzeugbilder-Upload in -// Einstellungen) - dieselben festen Dateinamen wie BILDER, plus die separat -// geführte Winter-Variante der Seitenansicht. -const BILDER_UPLOAD_SLOTS = [...BILDER, { name: "Seitenansicht (Winter)", label: SEITE_WINTER.label, datei: SEITE_WINTER.datei }]; // Bei jedem Hochladen/Löschen eines Fahrzeugfotos hochgezählt und als // Query-Parameter an alle bilder/-URLs gehängt (siehe bildInfo() // unten) - ohne das würde der Browser nach einem Upload weiter das alte Bild @@ -225,8 +221,9 @@ let bildVersion = Date.now(); Klassen erhalten, siehe carfix/carfix.klein/radbild in audi-dashboard.css). */ /* A5: Der Platzhalter nennt das Motiv und die nächste Handlung - der Dateiname ist Entwicklersprache und steht nur noch in den Einstellungen - (siehe BILDER_UPLOAD_SLOTS). Die Maße bleiben über die CSS-Klassen erhalten, - das Layout springt beim Nachliefern eines Fotos nicht. */ + (Bild der Übersicht: Ansicht wählen, dann auf das Bild tippen). Die Maße + bleiben über die CSS-Klassen erhalten, das Layout springt beim Nachliefern + eines Fotos nicht. */ function bildMitPlatzhalter(src, datei, label, klasse, imgId, dateiZeigen = false) { const idTeil = imgId ? ` id="${imgId}"` : ""; return `
@@ -294,7 +291,6 @@ function bildWeiter() { if (box) { box.classList.remove("bild-fehlt"); // neues Bild kann laden, auch wenn das vorherige fehlte box.querySelector(".platzhalter-label").textContent = info.label; - box.querySelector(".platzhalter-datei").textContent = info.datei; } const sz = ROOT.getElementById("szene"); if (sz) sz.className = "szene " + szeneKlasse(bild); @@ -2004,28 +2000,24 @@ function vEinst() {
Bild der Übersicht
-
${(() => { const info = bildInfo(startIndex()); return bildMitPlatzhalter(info.src, info.datei, info.label, "carfix"); })()}
-
-
Fahrzeugbilder - Auf ein Bild tippen, um ein eigenes Foto hochzuladen oder zu ersetzen. -
- ${BILDER_UPLOAD_SLOTS.map((s) => ` -
-
- ${bildMitPlatzhalter(`/local/bilder/${s.datei}?v=${bildVersion}`, s.datei, s.label, "carfix mini", null, true)} -
- - ${esc(s.name)} - ${bildMenuOffen === s.datei ? ` -
-
- - -
` : ""} -
`).join("")} -
+ Auf das Bild tippen, um für diese Ansicht ein eigenes Foto hochzuladen oder zu ersetzen. + ${(() => { + const info = bildInfo(startIndex()); + return `
+
+ ${bildMitPlatzhalter(info.src, info.datei, info.label, "carfix", null, true)} +
+ + ${bildMenuOffen === info.datei ? ` +
+
+ + +
` : ""} +
`; + })()}
Kraftstoff-Rabatt