Batterie-Messwertliste: Zeilen sehen nicht mehr klickbar aus (Cursor/Presshighlight)
.leaf (Panel) und .dm-listenzeile (companion-app) galten fuer echte Navigations-Buttons UND fuer die reine <div>-Messwertliste gleichermassen - Hand-Cursor und Tipp-Rueckmeldung suggerierten dort faelschlich Klickbarkeit, obwohl die Liste nur Wischen-zum-Loeschen unterstuetzt. Beide Regeln jetzt auf button.leaf/button.dm-listenzeile beschraenkt - echte Zeilen-Buttons (Fahrten, Tankvorgaenge, Servicebuch) bleiben unveraendert klickbar. Version 2026.8.27.22, live verifiziert (Cursor auto statt pointer bei der Messwertliste, pointer weiterhin bei echten Zeilen-Buttons). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3909,6 +3909,36 @@ minimum, `12.149` at `09:44:00Z`), correctly skipping that same day's `15.439` m
|
||||
three preceding fully-out-of-border days (`2026-08-23`/`24`/`25`, both min and max pinned at `13.988`, always
|
||||
excluded).
|
||||
|
||||
## AA. Battery measurement list rows looked clickable but weren't (2026.8.27.22)
|
||||
|
||||
Owner report: "The line items at messwerte seem to be clickable. But they shall not be clickable" - the
|
||||
Batterie-Messwerteliste (`vBatterieliste()`/`BatterieListe.tsx`) only supports swipe-to-delete, no per-row
|
||||
navigation, but the rows visually signaled otherwise.
|
||||
|
||||
Root cause, identical shape in both codebases: the shared list-row CSS class (`.leaf` in the panel,
|
||||
`.dm-listenzeile` in companion-app) is used for two genuinely different kinds of rows - real navigable
|
||||
buttons (`<button class="leaf" data-go="...">` for trips/refuels/service-book entries) *and* this one plain,
|
||||
non-navigating `<div class="leaf">`/`<div className="dm-listenzeile">` (battery measurements, swipe-delete
|
||||
only). The CSS never distinguished the two: `cursor: pointer` (both stylesheets) and, in the panel,
|
||||
`.leaf:active { background: var(--tile-2) }` (a tap/press highlight) applied to every `.leaf`/
|
||||
`.dm-listenzeile` element regardless of whether it was a `<button>` or a plain `<div>` - so the battery list
|
||||
rows got the hand cursor and the press-highlight "something happens on tap" affordance despite having no
|
||||
click handler at all.
|
||||
|
||||
Fixed by scoping both rules to the element type that's actually clickable: `button.leaf`/
|
||||
`button.dm-listenzeile` instead of the bare class selector, in `audi-dashboard.css` and
|
||||
`companion-app/src/stile/screens.css`. No markup changes needed in either codebase - `vBatterieliste()` and
|
||||
`BatterieListe.tsx` already rendered their rows as plain `<div>`s, only the shared CSS was too broad. Every
|
||||
other `.leaf`/`dm-listenzeile` usage (trips, refuels, service book) is already a real `<button>`, so they
|
||||
keep the cursor/press-highlight unchanged.
|
||||
|
||||
Verified: companion-app `tsc --noEmit` clean, full suite green at 146/146; panel `node --check` clean;
|
||||
manifest bumped to `2026.8.27.22`, `audi_ha_test` restarted and confirmed clean via log. Confirmed live via
|
||||
the panel's own shadow DOM (`getComputedStyle`, navigating through the real `data-go` click chain, not just
|
||||
reading source): the battery list's `<div class="leaf">` now computes `cursor: auto` (was `pointer`), while
|
||||
a genuinely navigable trip row (`<button class="leaf">`) still correctly computes `cursor: pointer` -
|
||||
confirming the fix is properly scoped, not a blanket removal.
|
||||
|
||||
---
|
||||
|
||||
## Working conventions (observed — keep them)
|
||||
|
||||
@@ -577,6 +577,13 @@ button.dm-sicherheitszeile:active { background: var(--tile-2); }
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Cursor nur für echte Zeilen-Buttons (navigieren bei Klick, Fahrten.tsx/
|
||||
Tanken.tsx) - BatterieListe.tsx ist bewusst ein reines <div>, keine
|
||||
Zeilennavigation, nur Wischen zum Löschen; ein Hand-Cursor würde dort
|
||||
fälschlich "hier passiert beim Klick etwas" versprechen. */
|
||||
button.dm-listenzeile {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -458,7 +458,6 @@ button.sicherheitszeile:active { background: var(--tile-2); }
|
||||
font-family: inherit; text-align: left;
|
||||
padding: 14px 0 14px 40px;
|
||||
min-height: 56px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: inherit;
|
||||
}
|
||||
@@ -466,8 +465,13 @@ button.sicherheitszeile:active { background: var(--tile-2); }
|
||||
.leaf .k small { font-size: 12px; color: var(--fg3); }
|
||||
.leaf .v { font-size: 13px; color: var(--fg2); text-align: right; display: flex; flex-direction: column; flex: 0 0 auto; }
|
||||
.leaf .v small { font-size: 12px; color: var(--fg3); }
|
||||
.leaf { transition: background .15s; }
|
||||
.leaf:active { background: var(--tile-2); }
|
||||
/* cursor/:active nur für echte .leaf-Buttons (data-go, navigieren bei Klick)
|
||||
- die Batterie-Messwertliste (vBatterieliste()) ist bewusst ein reines
|
||||
<div class="leaf">, keine Zeilennavigation, nur Wischen zum Löschen; sie
|
||||
soll deshalb weder den Hand-Cursor noch die Tipp-Rückmeldung zeigen, die
|
||||
sonst "hier passiert beim Klick etwas" versprechen. */
|
||||
button.leaf { cursor: pointer; transition: background .15s; }
|
||||
button.leaf:active { background: var(--tile-2); }
|
||||
.chev { width: 6px; height: 10px; color: var(--fg3); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; }
|
||||
|
||||
/* ------------------------------------------------------------- Status */
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"domain": "audi_dashboard",
|
||||
"name": "Audi Dashboard",
|
||||
"version": "2026.8.27.21",
|
||||
"version": "2026.8.27.22",
|
||||
"documentation": "https://gitea.nothaft.cloud/paul/audi-app/src/branch/main/README.md",
|
||||
"issue_tracker": "https://gitea.nothaft.cloud/paul/audi-app/issues",
|
||||
"codeowners": ["@paul"],
|
||||
|
||||
Reference in New Issue
Block a user