Correzioni alla UI dopo la verifica sul terminale
Prime correzioni fatte guardando l'app su un Honeywell EDA52 (720x1440 @320dpi, cioe' 360 punti logici di larghezza) invece che a occhio. - Barra di stato: era tinta di corallo da colorPrimaryDark, cioe' l'accento usato come decorazione della cornice di sistema. Ora si fonde con lo sfondo dell'app, con icone scure (WindowInsetsController). - Gradino compatto sotto i 380px: la scala di STILE_UI e' tarata su telefoni piu' larghi, e a misura piena i titoli si troncavano e in una schermata entrava pochissimo lavoro. Le proporzioni restano, cambia la taglia. Sui telefoni normali non cambia nulla. - Icone delle azioni costruttive: usavano il fondo del tono danger, quindi "Nuova scheda" e "Aggiungi una foto" erano identiche a "Elimina ispezione". Ora usano il tono info. Un --primary-surface non risolveva: il primario di SteUP e' gia' un rosso, quindi un suo fondo tenue resta indistinguibile da quello danger. - Testata: il titolo puo' andare su due righe prima di troncare. Il nome del punto vendita e' l'ancora del compito, "D11-PRIMO PREZ..." non aiuta. - Schermata ispezione: il nome del punto vendita non e' piu' ripetuto nel pannello di riepilogo, dove era gia' in testata. - Padding dei gruppi di form e della barra azioni ridotti su schermo stretto. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,12 @@
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
/* Su schermo stretto il form e' lungo: ogni pixel di padding e' una riga di
|
||||
lavoro in meno visibile a colpo d'occhio. */
|
||||
@media (max-width: 380px) {
|
||||
.form-group { padding: var(--space-sm) var(--space-14); }
|
||||
}
|
||||
|
||||
.form-group__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -317,7 +323,11 @@
|
||||
}
|
||||
|
||||
.action-tile__icon--neutral { background-color: var(--neutral-surface); color: var(--neutral-ink); }
|
||||
.action-tile__icon--primary { background-color: var(--danger-surface); color: var(--primary); }
|
||||
/* Le azioni costruttive secondarie non portano l'accento: il corallo resta del
|
||||
pulsante primario. Un fondo corallo tenue sarebbe comunque indistinguibile
|
||||
dal tono danger, perche' il primario di SteUP e' gia' un rosso — ed e'
|
||||
esattamente cosi' che "Nuova scheda" finiva identica a "Elimina ispezione". */
|
||||
.action-tile__icon--primary { background-color: var(--info-surface); color: var(--info-ink); }
|
||||
.action-tile__icon--success { background-color: var(--success-surface); color: var(--success-ink); }
|
||||
.action-tile__icon--danger { background-color: var(--danger-surface); color: var(--danger-ink); }
|
||||
.action-tile__icon--info { background-color: var(--info-surface); color: var(--info-ink); }
|
||||
|
||||
Reference in New Issue
Block a user