Sul fuoco si vedevano due bordi: quello del campo piu' l'anello globale che
l'input riceve per conto suo, con raggio e colore diversi. Dove e' il
contenitore a segnare il fuoco — accesso, ricerca, barcode, gruppi del form —
l'anello sull'input non serve: il fuoco resta visibile dal bordo del campo.
Campi da 74 a 56 punti: padding piu' stretto, riga del valore alta quanto il
testo che contiene. Il bottone che mostra la password sborda nel padding invece
di alzare la riga, cosi' il campo password non e' piu' alto degli altri due e
il bersaglio resta da 44.
"Accedi" disabilitato era navy pieno con testo bianco: sembrava pronto, e il
tocco a vuoto sembrava un guasto. Ora e' chiaramente inerte.
Con la tastiera aperta il marchio finiva tagliato sopra e non si poteva
risalire: il pannello si centra con i margini automatici invece che con
align-items, cosi' lo scroll arriva anche in cima. Via anche la barra di
scorrimento, come nel resto delle schermate.
Verificata sul terminale, a riposo e col campo attivo.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
La regola valeva per qualunque elemento, e la WebView sposta il fuoco anche su
contenitori non interattivi: dopo la chiusura di un dialog restava un anello
azzurro intorno al titolo della testata, che indicava un bersaglio inesistente.
Ora lo prendono link, bottoni, campi e gli elementi dichiaratamente tappabili.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Quasi tutto il testo dell'app stava fra 600 e 800: etichette, valori, indirizzi,
conteggi, voci di elenco. Un grassetto ovunque non segnala niente, e la pagina
Profilo era il caso peggiore — ogni riga gridava come un titolo.
La scala ora ha quattro gradini, documentati nei token:
400 corpo, metadati, valori descrittivi
500 etichette di campo, voci di lista, testo dei controlli
600 stati brevi (badge, voce attiva), nomi in una riga di elenco
700 titoli, uno solo per blocco
Sopra il 700 non si sale: l'800 dei titoli di card e dell'avatar e' sceso a 700.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Adotta lo stile condiviso delle app Integry: superfici piatte, raggi ampi,
spaziature a scala fissa, gerarchia data dallo spazio prima che dalla
decorazione. La palette storica di SteUP resta intatta; sono stati aggiunti
solo i ruoli che mancavano (workspace, surfaceMuted, divider, inkMuted e le
triplette dei toni semantici).
Fondamenta
- tokens.css: ruoli colore, scale di spazio/raggi/tipografia, curve di
movimento e scala z-index semantica. Unica fonte di verita': pilotano
anche le variabili CSS di MudBlazor.
- Inter variabile ospitata in locale (133KB) al posto di Nunito da Google
Fonts: l'app lavora offline, un font che arriva dalla rete in campo non
arriva.
- base.css: shell applicativa e comportamenti da app nativa — niente
selezione testo, niente menu al tocco lungo, niente lampo grigio sul tap,
niente rimbalzo elastico, niente zoom a doppio tocco, scroll con inerzia.
- mudblazor-overrides.css: MudBlazor appiattito (elevation 0, nessun tint,
target 44/48, etichette in caso naturale).
- Rimossi Bootstrap (CSS, icone e JS) e i 996 righe di CSS con ambito per
componente del vecchio sistema: erano tutti inutilizzati.
Struttura
- Navigazione flottante in basso con icona piena sulla voce attiva; da 720px
diventa colonna laterale. Il MudFabMenu e' sostituito da un bottom sheet:
stessa funzione, bersagli molto piu' grandi.
- Testata alta col titolo a sinistra, fusa con la pagina.
- Nel form scheda il salvataggio sta in una barra ancorata in fondo, non in
coda a uno scroll lungo.
- Scelta di punto vendita e articoli a schermo intero con ricerca; la
selezione multipla usa righe da 56px invece di un menu a tendina.
- Urgenza scelta a pillole invece che da una select.
Stato e riscontro
- StatusBadgeHelper: tono, icona ed etichetta di ogni stato in un punto solo,
cosi' lo stesso stato si presenta identico ovunque.
- Scheletri al posto degli spinner; l'overlay bloccante dice sempre cosa sta
facendo; gli stati vuoti suggeriscono la mossa successiva.
- Rimosso il ritardo artificiale di 250ms in InspectionCard, che non
attendeva nulla.
DESIGN.md riscritto sul nuovo sistema.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
MarcoE