tobias
b0ec8b4982
Gemessen statt geschaut: eine Pruefroutine lief auf jedem Bildschirm und
pruefte Ueberlauf, Tippziele, abgeschnittenen Text, Bilder ohne Quelle und
WCAG-Kontrast fuer jeden Textknoten. Dazu die Live-App mit echten Daten, die
Musterseite fuer Leerzustaende und das Panel zum Abgleich.
1. Deutsche Datumsangaben wurden falsch gelesen. new Date("01.03.2025")
liest amerikanisch: Tage bis 12 wurden still vertauscht, ab Tag 13 fiel
der Wert ganz weg. Die Erstzulassung stand auf zwei Bildschirmen
unterschiedlich da. alsZeitpunkt() erkennt jetzt ISO, TT.MM.JJJJ und
MM/JJJJ, weist unmoegliche Daten ab und fuehrt die Genauigkeit mit -
aus "08/2026" wird "August 2026", kein erfundener Erster.
2. Die Hauptuntersuchung war in beiden Oberflaechen unerreichbar. Das Panel
leitete sie aus der Erstzulassung ab, aber nur bei MM/JJJJ, und benutzte
den eingetragenen Wert gar nicht. Jetzt beide: eingetragene Faelligkeit
vor Servicebuch vor Erstzulassung + 24 Monate.
3. Die Tankstellenmarke stand zweimal da, wenn der Name kein Komma hat
("Shell München Ost"). ohneMarkeVorn() nimmt sie vorn ab.
4. Bilder wurden geholt, obwohl beide wussten, dass es sie nicht gibt -
fuenf 404 fuer dieselbe Datei in einem Ladevorgang. Jetzt gar keine
Adresse bei Stand 0; nachgemessen 4 Anfragen, alle 200.
5. Ein Bildelement ohne Quelle zeigte das kaputte Bildsymbol, und onerror
greift dort nicht: ohne src gibt es keinen Ladeversuch.
Dazu: leere Klammern beim Steuersatz, leere graue Kachel bei leerer
Leistungsgruppe, Umbruch auf dem Einrichtungsbildschirm, drei
Leerdarstellungen in einer Kachel, fehlende Grundschrift.
Apple HIG: Kontrast war an einer Stelle 3,18 statt 4,5, weisse Schrift auf
der Loeschflaeche 3,41/3,55. Rot als Schrift und Rot als Flaeche sind jetzt
getrennte Token (--bad / --bad-flaeche), beide Apples systemRed fuer
erhoehten Kontrast. Tippziele: unsichtbares 44x44-Overlay, wo die sichtbare
Groesse Teil des Bildes ist, echte Mindesthoehe, wo das Element Flaeche ist -
Formulare werden dadurch sichtbar hoeher.
Neu auf Wunsch: Wischen in der Bildergalerie (beide Richtungen) und die
HIG-konforme Loeschgeste - ein voller Wisch loescht ohne zweiten Tipp, ab
55 % der Zeilenbreite, mit wachsender roter Flaeche und erhaltener
Rueckfrage. Dabei fiel auf, dass der Zugwert aus dem React-Zustand gelesen
wurde und ein schneller Wisch dadurch verlorenging; er liegt jetzt in einer
Referenz.
Paritaet: alle 26 Routen und Titel decken sich, Fahrzeugstatus zeilengleich,
zwei ungeplante Abweichungen (Datumsformatierung, Herkunft der
Hauptuntersuchung) geschlossen.
tsc sauber, 271 Tests, vite build sauber, Design-System gebaut, Panel als
Modul geparst, audi_ha_test auf 2026.9.4.23 ohne Traceback. Live nachgemessen:
Datum auf beiden Bildschirmen gleich, keine 404 mehr, Zurueck-Pfeil sichtbar
34x34 und treffbar 44x44, Galerie wischt in beide Richtungen, voller Wisch
loest die Rueckfrage aus, keine Kontrast-Unterschreitung mehr.
66 lines
1.6 KiB
CSS
66 lines
1.6 KiB
CSS
/* Werte 1:1 aus der iOS-Auflage des Panels (`.aktion` in
|
|
audi-dashboard-ios.css): gefüllte Fläche ohne Rahmen, 16px normale Schrift,
|
|
keine Großschreibung, 14px Radius. Hier stand noch die Optik von vor der
|
|
iOS-Entscheidung vom 2026-08-13 — 11px, gesperrt, GROSSGESCHRIEBEN, nur
|
|
Umriss, roter Rahmen beim Überfahren. Das betraf jeden Knopf der App
|
|
("SPEICHERN", "+ POSITION HINZUFÜGEN", ...). */
|
|
.ads-action {
|
|
display: block;
|
|
width: 100%;
|
|
font-family: inherit;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--fg);
|
|
background: var(--ios-fill);
|
|
border: 0;
|
|
border-radius: 14px;
|
|
padding: 15px;
|
|
min-height: 48px;
|
|
margin-top: 18px;
|
|
cursor: pointer;
|
|
transition: background .15s, filter .15s, transform .1s, opacity .15s;
|
|
}
|
|
|
|
/* `.aktion + .aktion` im Panel: zwei Knöpfe untereinander rücken enger. */
|
|
.ads-action + .ads-action {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.ads-action:hover:not(:disabled) {
|
|
background: var(--tile-2);
|
|
}
|
|
|
|
.ads-action:active:not(:disabled) {
|
|
transform: scale(.985);
|
|
}
|
|
|
|
.ads-action:disabled {
|
|
opacity: .4;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Hauptaktion: graue Fläche, kein Rot — Rot bleibt destruktiven Aktionen
|
|
vorbehalten (Nutzerentscheidung 2026-08-16). */
|
|
.ads-action--primary {
|
|
background: var(--fg);
|
|
color: var(--canvas);
|
|
}
|
|
|
|
.ads-action--primary:hover:not(:disabled) {
|
|
background: var(--fg);
|
|
filter: brightness(1.08);
|
|
}
|
|
|
|
.ads-action--destructive {
|
|
background: var(--ios-fill);
|
|
color: var(--bad);
|
|
}
|
|
|
|
.ads-action--destructive:hover:not(:disabled) {
|
|
background: var(--bad-flaeche, var(--bad));
|
|
color: #fff;
|
|
filter: none;
|
|
}
|