diff --git a/SteUp.Maui/Platforms/Android/MainActivity.cs b/SteUp.Maui/Platforms/Android/MainActivity.cs index 3d1cafb..6b64ac5 100644 --- a/SteUp.Maui/Platforms/Android/MainActivity.cs +++ b/SteUp.Maui/Platforms/Android/MainActivity.cs @@ -20,6 +20,8 @@ namespace SteUp.Maui { base.OnCreate(savedInstanceState); + ApplySystemBarsAppearance(); + // Da Android 15 (API 35) il edge-to-edge e' forzato e adjustResize non ridimensiona // piu' la finestra: la tastiera si limita a coprire la WebView. Riduciamo noi il // content view dell'altezza dell'IME cosi' il layout Blazor (100vh) si ricalcola. @@ -27,6 +29,21 @@ namespace SteUp.Maui ViewCompat.SetOnApplyWindowInsetsListener(content, new ImeInsetsListener()); } + /// + /// Le barre di sistema si fondono con lo sfondo chiaro dell'app: icone + /// scure su fondo chiaro. Senza questo la barra di stato resta tinta + /// dell'accento, che nel sistema di design indica l'azione, non la + /// cornice. + /// + private void ApplySystemBarsAppearance() + { + if (Window is null) return; + + var controller = WindowCompat.GetInsetsController(Window, Window.DecorView); + controller.AppearanceLightStatusBars = true; + controller.AppearanceLightNavigationBars = true; + } + public override void OnBackPressed() { // Se la UI Blazor ha un form aperto se ne occupa lei (propone il salvataggio diff --git a/SteUp.Maui/Platforms/Android/Resources/values/colors.xml b/SteUp.Maui/Platforms/Android/Resources/values/colors.xml index 236b2f5..30a56e9 100644 --- a/SteUp.Maui/Platforms/Android/Resources/values/colors.xml +++ b/SteUp.Maui/Platforms/Android/Resources/values/colors.xml @@ -1,6 +1,8 @@ #ec4c41 - #d02315 - #d02315 + + #e9edf2 + #ec4c41 diff --git a/SteUp.Shared/Components/Pages/IspezionePage.razor b/SteUp.Shared/Components/Pages/IspezionePage.razor index 1b46069..1cefd21 100644 --- a/SteUp.Shared/Components/Pages/IspezionePage.razor +++ b/SteUp.Shared/Components/Pages/IspezionePage.razor @@ -31,10 +31,11 @@ @* §6.6 Pannello di riepilogo: primo elemento della pagina, superficie tenue, con lo stato del documento e i conteggi sempre a vista. *@
+ @* Il nome del punto vendita e' gia' nella testata: qui basta la data + e lo stato del documento, che la testata non porta. *@
-

@Titolo

-

@Ispezione.Data.ToString("d MMMM yyyy")

+

@Ispezione.Data.ToString("d MMMM yyyy")

diff --git a/SteUp.Shared/wwwroot/css/components.css b/SteUp.Shared/wwwroot/css/components.css index 44df2e1..9bed134 100644 --- a/SteUp.Shared/wwwroot/css/components.css +++ b/SteUp.Shared/wwwroot/css/components.css @@ -29,15 +29,18 @@ min-width: 0; } +/* Il titolo puo' andare su due righe prima di troncare: il nome del punto + vendita e' l'ancora del compito, tagliarlo a meta' non aiuta nessuno. */ .appbar__title { font-size: var(--headline-sm-size); line-height: var(--headline-sm-height); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } .appbar__subtitle { @@ -497,7 +500,12 @@ .action-bar > * { flex: 1 1 0; min-width: 0; } @media (max-width: 390px) { - .action-bar { flex-direction: column; gap: var(--space-xs); } + .action-bar { + flex-direction: column; + gap: var(--space-xs); + padding: var(--space-xs) var(--space-md) var(--space-sm); + padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); + } } /* ----------------------------------------------------------------------------- diff --git a/SteUp.Shared/wwwroot/css/forms.css b/SteUp.Shared/wwwroot/css/forms.css index 2a51aeb..e21c8d3 100644 --- a/SteUp.Shared/wwwroot/css/forms.css +++ b/SteUp.Shared/wwwroot/css/forms.css @@ -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); } diff --git a/SteUp.Shared/wwwroot/css/tokens.css b/SteUp.Shared/wwwroot/css/tokens.css index 44c7192..2aac3c0 100644 --- a/SteUp.Shared/wwwroot/css/tokens.css +++ b/SteUp.Shared/wwwroot/css/tokens.css @@ -165,3 +165,41 @@ /* Breakpoint (STILE_UI §3) — documentati qui, usati nelle media query: rail 720px · twoColumn 900px · contentMax 1180px */ } + +/* ============================================================================= + Gradino compatto — schermi stretti (≤380px) + + Il terminale da campo (Honeywell EDA52) ha 360 punti logici di larghezza, + molto meno dei telefoni per cui la scala di STILE_UI è tarata: a misura + piena i titoli si troncano, il testo va a capo e in una schermata entra + pochissimo lavoro. Qui la scala scende di un gradino — le proporzioni e i + rapporti restano quelli del documento, cambia solo la taglia. + + È l'"Adattamento locale" del §8: i componenti si riorganizzano sotto le + soglie invece di pretendere lo spazio che non c'è. + ========================================================================== */ + +@media (max-width: 380px) { + :root { + --headline-md-size: 28px; + --headline-sm-size: 22px; + --title-lg-size: 18px; + --title-md-size: 16px; + --body-lg-size: 15px; + --body-md-size: 14px; + --label-lg-size: 13px; + --label-md-size: 12px; + --label-sm-size: 11px; + + --space-lg: 20px; + --space-xl: 24px; + --space-18: 14px; + --space-20: 16px; + --space-22: 18px; + + --appbar-height: 64px; + --button-height: 44px; + --navbar-height: 62px; + --nav-clearance: 104px; + } +}