UI polish batch + fix genuinely-invisible map pins, Apple HIG audit
Battery voltage stat cutoff 13.2V -> 12.8V (values above that are already alternator output, not the battery); fixed the battery chart's Y-axis "stretching" on zoom by computing it once from the full dataset; removed two explanatory paragraphs from the battery detail view; Tankfuellung now shows "X % / X l"; removed the "noch etwa X l im Tank" suffix; fuel bar color now matches the headline instead of a red/yellow/green gradient; active/primary buttons are grey again, not red (destructive stays red per HIG); select fields gained an Apple-HIG pull-down chevron (appearance:none had removed the native one with nothing replacing it); selected menu icon is white on desktop, matching mobile; Reifenfoto crops from the right edge; "Montiert" button rebuilt as a compact top-right pill with a 44px invisible tap target; tab-bar active highlight now covers icon+label, not just the icon; removed two leftover explanatory texts from Einstellungen. Root-caused the map pins looking "transparent": the CI poi-car/poi icons are pure contour forms (nonzero-fill-rule ring + thin detail lines, only 13-40% of their own bounding box actually filled). Fixed by extracting each icon's own first sub-path (the true outer balloon silhouette, verified by rasterizing it in isolation) as a solid-filled layer behind the original icon, applied to both the vehicle and station markers. Read Color/Typography/Layout/Buttons/Materials on developer.apple.com and applied the user-approved subset (11px text floor, 44px tap targets); declined items (font weight, materials) documented with rationale. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -148,7 +148,7 @@
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
font-size: 10.5px;
|
||||
font-size: 11px;
|
||||
color: var(--fg3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -443,7 +443,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
.carfix { width: 100%; aspect-ratio: 16 / 9; }
|
||||
.carfix.klein { aspect-ratio: 16 / 8; }
|
||||
.carfix.mini { width: 78px; height: 78px; aspect-ratio: auto; }
|
||||
.radbild { width: 96px; height: 96px; aspect-ratio: auto; border-radius: 50%; }
|
||||
/* Reifenfoto ist oft eine breite Aufnahme; statt beide Ränder symmetrisch
|
||||
wegzuschneiden (object-fit:cover-Standard), bleibt bewusst der rechte Rand
|
||||
des Originalfotos erhalten - dort sitzt das Rad meist im Bild. */
|
||||
.radbild { width: 96px; height: 96px; aspect-ratio: auto; border-radius: 50%; object-position: right center; }
|
||||
|
||||
.bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
|
||||
.bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||
@@ -521,7 +524,18 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
appearance: none;
|
||||
}
|
||||
.feld input:focus, .feld select:focus, .notiz:focus { outline: none; border-color: var(--red); }
|
||||
.feld select { padding-right: 30px; background-image: none; }
|
||||
/* Pull-down-Button-Optik (Apple HIG): einzelner Abwaerts-Chevron statt des
|
||||
durch appearance:none oben entfernten nativen Browser-Pfeils. */
|
||||
.feld select {
|
||||
padding-right: 30px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238a94a3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 11px center;
|
||||
background-size: 10px 10px;
|
||||
}
|
||||
:host([data-theme=tag]) .feld select {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23666666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
}
|
||||
.feld > span { flex: 0 1 auto; min-width: 0; }
|
||||
.mitEinheit { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; }
|
||||
.mitEinheit input { min-width: 0; width: 96px; text-align: right; }
|
||||
@@ -713,16 +727,20 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
}
|
||||
|
||||
.fahrzeug-pin-wrap { background: none; border: none; }
|
||||
/* poi-car aus dem CI-Satz ist eine reine Konturform in currentColor - auf
|
||||
Kartenkacheln waere sie ohne Trennung zum Untergrund kaum lesbar. Die
|
||||
gestapelten weissen drop-shadows ziehen deshalb einen Halo um die Kontur,
|
||||
der letzte Schatten gibt Tiefe. Feste Farbe statt Theme-Variable, damit die
|
||||
Nadel in Tag- und Nachtansicht gleich aussieht. */
|
||||
/* poi-car/poi aus dem CI-Satz sind reine Konturformen (Ring aus zwei
|
||||
gegenlaeufigen Randlinien + duenne Detaillinien) - eine Pixelprobe ergab
|
||||
nur 13-40% gefuellte Flaeche in der eigenen Bounding-Box und war auf
|
||||
Kartenkacheln praktisch unsichtbar (Nutzer-Feedback "Pin ist transparent").
|
||||
fahrzeugMarkerSVG()/tankstellenMarkerSVG() rendern deshalb zusaetzlich eine
|
||||
Vollton-Silhouette (CI.*Sil, exakt der aeussere Ballon-Umriss desselben
|
||||
CI-Pfads, keine Neuzeichnung) als unterste Ebene; die Iconfarbe hier ist
|
||||
deshalb weiss statt dunkel, damit Umriss und Detaillinien auf der jetzt
|
||||
massiven Flaeche lesbar bleiben. Feste Farben statt Theme-Variablen, damit
|
||||
die Nadeln in Tag- und Nachtansicht gleich aussehen. */
|
||||
.fahrzeug-pin {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #182634;
|
||||
filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)
|
||||
drop-shadow(0 0 2px #fff) drop-shadow(0 2px 4px rgba(0,0,0,.4));
|
||||
color: #fff;
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
|
||||
}
|
||||
.user-pin-wrap { background: none; border: none; }
|
||||
.user-pin {
|
||||
@@ -856,6 +874,30 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
|
||||
.radkopf { display: flex; flex-direction: column; margin-top: var(--sp-4); }
|
||||
|
||||
/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): oben rechts
|
||||
in der Kachel, obere Kante auf Höhe des Radfotos, rechter Abstand
|
||||
identisch zum linken Texteinzug (beides var(--sp-5), die Kachel-Innen-
|
||||
polsterung). */
|
||||
.montiert {
|
||||
position: absolute; top: var(--sp-5); right: var(--sp-5);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-family: inherit; font-size: 12px; letter-spacing: normal;
|
||||
color: var(--fg2);
|
||||
background: none;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--r-pill);
|
||||
padding: 7px 13px;
|
||||
cursor: pointer;
|
||||
transition: background .15s, color .15s, border-color .15s, transform .1s;
|
||||
}
|
||||
/* Optisch bleibt die Pille klein, die Tippflaeche wird per unsichtbarem
|
||||
Pseudo-Element auf Apple-HIG-Mindestmass 44x44pt gebracht (Klick auf die
|
||||
Flaeche des ::before zaehlt als Klick auf den echten Button). */
|
||||
.montiert::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: 0; right: 0; }
|
||||
.montiert:hover { background: var(--shade); }
|
||||
.montiert:active { transform: scale(.96); background: var(--shade); }
|
||||
.montiert.on { background: var(--fg); border-color: var(--fg); color: var(--canvas); }
|
||||
|
||||
/* ------------------------------------------------- B4: Action Sheet
|
||||
Ersetzt confirm()/alert(). Von unten eingeblendet, destruktive Zeile rot,
|
||||
Abbrechen abgesetzt - iOS-Muster. */
|
||||
|
||||
Reference in New Issue
Block a user