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. *@
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;
+ }
+}