Togli il + dalla barra e porta le azioni nella testata
Il "+" stava incastrato a destra nella barra di navigazione, che per il resto contiene destinazioni. Cambiava significato da una schermata all'altra senza mai dichiararlo, e su Ispezioni apriva un menu per far scegliere fra una cosa sola. Il documento di stile esclude esplicitamente il FAB di serie, e la barra torna a contenere solo le due destinazioni. Su Ispezioni l'azione e' un bottone con il suo nome nella testata, e porta dritta alla scelta del punto vendita senza passaggi intermedi. Lo stato vuoto offre lo stesso comando invece di spiegare dove trovarlo. Su Ispezione le azioni sono tre e con pesi diversi: restano in un bottom sheet, aperto dalla testata. Eliminare un'ispezione ora chiede conferma — prima un tocco cancellava ispezione e schede senza appello. Le azioni vivono nella pagina che le esegue, quindi i messaggi che le rimbalzavano dalla barra (NewSchedaService, CompleteInspectionService) non hanno piu' mittente e se ne vanno. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -565,39 +565,18 @@
|
||||
.navbar__label {
|
||||
font-size: var(--label-md-size);
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Icona piena e pastiglia di selezione sulla voce attiva. */
|
||||
.navbar__item.active { color: var(--primary-dark); }
|
||||
.navbar__item.active .navbar__label { font-weight: 600; }
|
||||
.navbar__item.active .navbar__icon { background-color: var(--info-surface); }
|
||||
|
||||
.navbar__item:active .navbar__icon { transform: scale(0.94); }
|
||||
|
||||
/* Azione primaria della schermata, dentro la barra e a portata di pollice. */
|
||||
.navbar__fab {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 44px;
|
||||
margin: 12px var(--space-sm) 12px 0;
|
||||
border: none;
|
||||
border-radius: var(--radius-control);
|
||||
background-color: var(--primary);
|
||||
color: var(--on-primary);
|
||||
font-size: 26px;
|
||||
transition: transform var(--duration-fast) var(--ease-out),
|
||||
background-color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.navbar__fab:active { transform: scale(0.94); background-color: var(--primary-pressed); }
|
||||
.navbar__fab:disabled { background-color: var(--divider); color: var(--ink-muted); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.navbar__item:active .navbar__icon,
|
||||
.navbar__fab:active { transform: none; }
|
||||
.navbar__item:active .navbar__icon { transform: none; }
|
||||
}
|
||||
|
||||
/* Da 720px la navigazione diventa una colonna laterale (rail). */
|
||||
@@ -617,13 +596,6 @@
|
||||
|
||||
.navbar__item { flex: 0 0 auto; padding-block: var(--space-xs); }
|
||||
|
||||
.navbar__fab {
|
||||
order: -1;
|
||||
width: 56px;
|
||||
height: 48px;
|
||||
margin: var(--space-xs) auto var(--space-sm);
|
||||
}
|
||||
|
||||
.app-shell { padding-left: calc(96px + var(--space-lg)); }
|
||||
.page-body { padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); }
|
||||
}
|
||||
@@ -1123,3 +1095,93 @@
|
||||
.skeleton--line { height: 15px; width: 100%; }
|
||||
.skeleton--line-short { height: 15px; width: 40%; }
|
||||
.skeleton--badge { height: 24px; width: 110px; border-radius: var(--radius-pill); }
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Azioni della testata
|
||||
L'azione primaria di una schermata sta qui, con il suo nome: dice cosa fa
|
||||
prima di essere toccata, e resta la stessa cosa in ogni pagina. Il vecchio
|
||||
"+" dentro la barra di navigazione cambiava significato da una schermata
|
||||
all'altra e non lo dichiarava mai.
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
.appbar__action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-6);
|
||||
min-height: 40px;
|
||||
padding: 0 var(--space-14) 0 var(--space-sm);
|
||||
border: none;
|
||||
border-radius: var(--radius-pill);
|
||||
background-color: var(--primary);
|
||||
color: var(--on-primary);
|
||||
font-family: inherit;
|
||||
font-size: var(--label-lg-size);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
transition: transform var(--duration-fast) var(--ease-out),
|
||||
background-color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.appbar__action i { font-size: 20px; }
|
||||
|
||||
.appbar__action:active { transform: scale(0.96); background-color: var(--primary-pressed); }
|
||||
.appbar__action:disabled { background-color: var(--divider); color: var(--ink-muted); }
|
||||
|
||||
/* Variante a sola icona, per le schermate dove le azioni sono piu' d'una e
|
||||
vivono in un bottom sheet. */
|
||||
.appbar__icon-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--touch-min);
|
||||
height: var(--touch-min);
|
||||
border: none;
|
||||
border-radius: var(--radius-pill);
|
||||
background: none;
|
||||
color: var(--ink);
|
||||
font-size: 22px;
|
||||
transition: background-color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.appbar__icon-action:active { background-color: var(--surface-muted); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.appbar__action:active { transform: none; }
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Riga di scelta di un punto vendita
|
||||
E' una card, ma si comporta da riga: testo a sinistra, chevron a destra.
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
.shop-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.shop-card__text {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shop-card__chevron {
|
||||
flex: 0 0 auto;
|
||||
font-size: 22px;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* L'indirizzo serve a distinguere due negozi con lo stesso nome, non a essere
|
||||
letto per intero: due righe bastano e tengono l'elenco scorrevole. */
|
||||
.shop-card .list-card__meta {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user