iOS-Optik: Rot-Semantik korrigiert, Popup-Radius vereinheitlicht
Zwei unabhaengig vom iOS-Entscheid offene Befunde aus DESIGN_REVIEW_2026-08-13.md §B behoben: - .aktion (audi-dashboard-ios.css) fuellte bisher JEDE Aktion rot statt nur destruktive - jetzt neutrale --ios-fill-Flaeche fuer die Sekundaeraktion, neue .aktion.primaer-Regel traegt die rote Fuellung als einzige Stelle (deckt sich mit dem Sekundaer/Primaer/Loeschen-Schema, das die Basis-CSS schon vorgibt). Gleiche Ursache auch bei Schalter-Ein-Zustand (jetzt --ok gruen statt rot, echtes iOS-Systemgruen) und aktiver Desktop-Sidebar- Navigation (Flaeche jetzt neutral, Rot bleibt Text-/Icon-Akzent). - Zwei Balkensegmente in audi-dashboard-app.js nutzten --red fuer eine neutrale Kategorie (Arbeitsweg-Fahrten, Versicherungsbeitrag-Aufteilung) - jetzt wie die Nachbarsegmente auf --fg umgestellt. - .setup-popup/.standortmenu (audi-dashboard.css) hatten 20px als Literal statt var(--r-tile) - folgen jetzt dem Token wie alle anderen Kacheln. Im Docker-Testcontainer verifiziert: Setup-Popup, Einstellungen (mobil und Desktop-Sidebar), Schalter - korrekte Fuellungen, keine Konsolenfehler.
This commit is contained in:
@@ -510,10 +510,24 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed
|
||||
purely additive overlay loaded after `audi-dashboard.css` in `_aufbauen()`
|
||||
(`audi-dashboard-app.js` ~line 3990) — the Audi-CI base values are still fully intact in the
|
||||
unmodified base stylesheet, untouched by this decision. Reverting is just: stop loading the
|
||||
overlay `<link>`. Two findings from the same review are still open and unaffected by this
|
||||
decision (they're implementation bugs, not direction questions): §B red-semantics inversion
|
||||
(`.aktion` fills every primary action red, not just destructive ones) and the `.setup-popup`/
|
||||
`.standortmenu` hardcoded `border-radius: 20px` vs. the new 16px token.
|
||||
overlay `<link>`.
|
||||
- [x] Fix the two implementation bugs from the same review, independent of the direction decision
|
||||
above — done 2026-08-13. **§B, red-semantics inversion:** `audi-dashboard-ios.css` `.aktion`
|
||||
no longer fills every action red; base `.aktion` is now a neutral `--ios-fill` secondary
|
||||
button, a new `.aktion.primaer` rule is the only one filled with `--ios-tint` (red), matching
|
||||
the `.aktion`/`.primaer`/`.loeschen` semantics the base stylesheet already defined (outline
|
||||
secondary / filled primary / destructive). Also fixed as part of the same finding: switch
|
||||
on-state now uses `--ok` (iOS system green) instead of red; the desktop-sidebar active-tab
|
||||
background (`.tab.on`) is now the neutral `--ios-fill` instead of a red tint, red stays only
|
||||
as the accent text/icon color; two chart-bar segments in `audi-dashboard-app.js` that used
|
||||
`--red` for a neutral data category ("Arbeitsweg" trips, first segment of the insurance
|
||||
contribution bar) now use `--fg` like their sibling segments. **Radius inconsistency:**
|
||||
`.setup-popup` and `.standortmenu` in `audi-dashboard.css` now reference `var(--r-tile)`
|
||||
instead of a hardcoded `20px` literal, so both track whichever design (iOS 16px or, if
|
||||
reverted, Audi-CI 20px) is actually active. Verified live in `audi_ha_test`: Setup-popup
|
||||
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.
|
||||
- [ ] 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`
|
||||
|
||||
@@ -1623,7 +1623,7 @@ function vVers() {
|
||||
<dd>${eur(t.betrag)} €<small>${v.beitrag ? de(t.betrag / v.beitrag * 100, 0) : 0} %</small></dd></div>`).join("")}
|
||||
</dl>
|
||||
<div class="bar" style="margin-top:18px">
|
||||
${v.teile.map((t, i) => `<i style="flex:${t.betrag || 0.01};background:${["var(--red)", "var(--fg2)", "var(--fg3)"][i] || "var(--fg3)"}"></i>`).join("")}
|
||||
${v.teile.map((t, i) => `<i style="flex:${t.betrag || 0.01};background:${["var(--fg)", "var(--fg2)", "var(--fg3)"][i] || "var(--fg3)"}"></i>`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile"><span class="label">Vertrag</span>
|
||||
@@ -2418,8 +2418,8 @@ function vStat() {
|
||||
<span><i style="background:var(--fg3)"></i>Nacht · ${de(nachtKm)} km</span></div>
|
||||
<span class="label" style="margin-top:16px">Nacht = ${CONFIG.nachtVon} bis ${CONFIG.nachtBis} Uhr</span>`)}
|
||||
${statTile("s5", "Art der Fahrten", kmJahr > 0 ? de(Math.round((arbeitKm / kmJahr) * 100)) : "–", "% Arbeitsweg", de(arbeitKm) + " km",
|
||||
`<div class="bar"><i style="flex:${arbeitKm};background:var(--red)"></i><i style="flex:${privatKm};background:var(--fg3)"></i></div>
|
||||
<div class="legend"><span><i style="background:var(--red)"></i>Arbeitsweg · ${de(arbeitKm)} km</span>
|
||||
`<div class="bar"><i style="flex:${arbeitKm};background:var(--fg)"></i><i style="flex:${privatKm};background:var(--fg3)"></i></div>
|
||||
<div class="legend"><span><i style="background:var(--fg)"></i>Arbeitsweg · ${de(arbeitKm)} km</span>
|
||||
<span><i style="background:var(--fg3)"></i>Privat · ${de(privatKm)} km</span></div>
|
||||
<dl class="rows" style="margin-top:18px">
|
||||
<div class="row"><dt>Fahrten Arbeitsweg</dt><dd>${de(arbeitFahrten.length)}</dd></div>
|
||||
|
||||
@@ -115,10 +115,15 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
|
||||
letter-spacing:0;text-transform:none;color:var(--fg2)}
|
||||
.seg button.on{background:var(--tile-2);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.25)}
|
||||
|
||||
/* Rot bleibt Akzent/Primäraktion/destruktiv, nicht Flächenfarbe jeder Aktion
|
||||
(Design-Review 2026-08-13 §B): .aktion allein ist die neutrale
|
||||
Sekundäraktion, .primaer die einzige rot gefüllte Fläche. */
|
||||
.aktion{margin-top:18px;padding:15px;border:0;border-radius:14px;
|
||||
background:var(--ios-tint);color:#fff;font-size:16px;font-weight:400;
|
||||
background:var(--ios-fill);color:var(--fg);font-size:16px;font-weight:400;
|
||||
letter-spacing:0;text-transform:none}
|
||||
.aktion:hover{filter:brightness(1.08)}
|
||||
.aktion:hover{background:var(--tile-2)}
|
||||
.aktion.primaer{background:var(--ios-tint);color:#fff}
|
||||
.aktion.primaer:hover{filter:brightness(1.08)}
|
||||
.aktion.loeschen{background:var(--ios-fill);color:var(--bad);border:0}
|
||||
.aktion.loeschen:hover{background:var(--bad);color:#fff;filter:none}
|
||||
|
||||
@@ -133,7 +138,10 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
|
||||
.switch{width:51px;height:31px}
|
||||
.switch .track{background:var(--ios-fill);border:0}
|
||||
.switch .track::before{left:2px;top:2px;width:27px;height:27px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
|
||||
.switch input:checked+.track{background:var(--ios-tint)}
|
||||
/* Grün statt Rot: Schalter-Ein-Zustand ist kein destruktiver/Primär-Akzent,
|
||||
sondern ein neutrales "an" - deckt sich mit dem echten iOS-Systemgrün, das
|
||||
--ok hier ohnehin schon trägt (Design-Review §B). */
|
||||
.switch input:checked+.track{background:var(--ok)}
|
||||
.switch input:checked+.track::before{transform:translateX(20px)}
|
||||
|
||||
.pill{font-size:12px;letter-spacing:.01em;text-transform:none;padding:5px 11px;
|
||||
@@ -218,7 +226,9 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
|
||||
.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)}
|
||||
/* Aktive Navigation: Rot bleibt Text-/Icon-Akzent, die Fläche wird neutral
|
||||
statt rosa hinterlegt (Design-Review §B - Rot nicht als Flächenfarbe). */
|
||||
.tab.on{background:var(--ios-fill);color:var(--ios-tint)}
|
||||
.tabbar.ohne .tab span{display:block}
|
||||
.tabbar.ohne .tab{padding:12px 14px;gap:14px}
|
||||
.tabbar.ohne .tab svg{width:22px;height:22px}
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version": 1786726800}
|
||||
{"version": 1786730400}
|
||||
|
||||
@@ -741,7 +741,7 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
--standort-peek: 96px;
|
||||
/* Deckend, nicht durchscheinend - unter dem Blatt liegt die Karte. */
|
||||
background: var(--tile-deckend, var(--canvas));
|
||||
border-radius: 20px 20px 0 0;
|
||||
border-radius: var(--r-tile) var(--r-tile) 0 0;
|
||||
box-shadow: 0 -6px 24px rgba(0,0,0,.35);
|
||||
padding: 0 20px max(18px, env(safe-area-inset-bottom));
|
||||
transform: translateY(calc(100% - var(--standort-peek)));
|
||||
@@ -892,7 +892,7 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
einen blickdichten Hintergrund, gleiches Muster wie .standortmenu
|
||||
oben. */
|
||||
background: var(--tile-deckend, var(--canvas));
|
||||
border-radius: 20px;
|
||||
border-radius: var(--r-tile);
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: sheet-rein .24s cubic-bezier(.22,.61,.36,1);
|
||||
|
||||
Reference in New Issue
Block a user