Rifacimento della UI secondo STILE_UI.md
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>
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
xmlns:shared="clr-namespace:SteUp.Shared;assembly=SteUp.Shared"
|
||||
x:Class="SteUp.Maui.MainPage"
|
||||
SafeAreaEdges="All"
|
||||
BackgroundColor="{DynamicResource PageBackgroundColor}">
|
||||
BackgroundColor="#E9EDF2">
|
||||
|
||||
<BlazorWebView x:Name="BlazorWebView" HostPage="wwwroot/index.html">
|
||||
<BlazorWebView.RootComponents>
|
||||
|
||||
@@ -1,53 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
|
||||
<title>SteUp.Maui</title>
|
||||
<title>SteUP</title>
|
||||
<base href="/"/>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/fonts.css"/>
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/tokens.css"/>
|
||||
|
||||
<link href="_content/SteUp.Shared/css/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="_content/SteUp.Shared/css/bootstrap/bootstrap-icons.min.css" rel="stylesheet"/>
|
||||
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet"/>
|
||||
|
||||
<link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/remixicon/remixicon.css"/>
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/app.css"/>
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/form.css"/>
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/default-theme.css"/>
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/custom-mudBlazor.css"/>
|
||||
<link rel="stylesheet" href="SteUp.Maui.styles.css"/>
|
||||
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/base.css"/>
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/components.css"/>
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/forms.css"/>
|
||||
<!-- Dopo MudBlazor: riporta i controlli di libreria allo stile condiviso. -->
|
||||
<link rel="stylesheet" href="_content/SteUp.Shared/css/mudblazor-overrides.css"/>
|
||||
<link href="SteUp.Maui.styles.css" rel="stylesheet"/>
|
||||
<link rel="icon" type="image/png" href="favicon.png"/>
|
||||
|
||||
<style>
|
||||
/* Primo fotogramma, prima che Blazor sia pronto: nessun lampo bianco,
|
||||
nessun salto di layout quando la schermata compare. */
|
||||
.boot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100dvh;
|
||||
background-color: var(--workspace, #e9edf2);
|
||||
}
|
||||
|
||||
.boot__spinner {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(0, 35, 57, 0.15);
|
||||
border-top-color: var(--primary, #ec4c41);
|
||||
animation: boot-spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes boot-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.boot__spinner { animation-duration: 2s; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="status-bar-safe-area"></div>
|
||||
|
||||
<div id="app">
|
||||
<div class="spinner-container">
|
||||
<span class="loader"></span>
|
||||
<div class="boot">
|
||||
<div class="boot__spinner" role="status" aria-label="Caricamento"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="blazor-error-ui">
|
||||
An unhandled error has occurred.
|
||||
<a href="" class="reload">Reload</a>
|
||||
Si è verificato un errore imprevisto.
|
||||
<a href="" class="reload">Ricarica</a>
|
||||
<a class="dismiss">🗙</a>
|
||||
</div>
|
||||
|
||||
<script src="_framework/blazor.webview.js" autostart="false"></script>
|
||||
<script src="_content/SteUp.Shared/js/bootstrap/bootstrap.bundle.min.js"></script>
|
||||
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
|
||||
<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
|
||||
<script src="_content/SteUp.Shared/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user