MarcoE/SteUP_Dotnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Porta l'azione "nuova ispezione" dentro la barra di navigazione

Browse Source 
Il "+" non galleggia piu' sopra la barra e non sta piu' nella testata: e'
la casella centrale della barra, alla stessa altezza delle altre due e
sotto il pollice. La barra guadagna un margine interno, cosi' le voci non
toccano il bordo stondato e la pastiglia d'accento e' concentrica al
guscio invece che incollata sopra.

L'azione vale la stessa cosa in ogni schermata, e senza rete resta al suo
posto spenta: una casella che scompare sposterebbe le altre due sotto il
dito.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Elefante
2026-09-17 15:16:52 +02:00
parent e3c9880d86
commit 9703fca306
3 changed files with 87 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SteUp.Shared/wwwroot/css/components.css
+56 -3
View File
@@ -520,11 +520,15 @@
z-index: var(--z-navbar);
display: flex;
align-items: stretch;
gap: var(--space-4);
height: var(--navbar-height);
border-radius: 24px;
/* Il guscio ha il suo margine interno: le voci non toccano il bordo
stondato, e l'azione in mezzo puo' essere una pastiglia piena senza
sembrare una toppa incollata sulla barra. */
padding: var(--space-6);
border-radius: 26px;
background-color: var(--surface);
border: 1px solid var(--divider);
overflow: hidden;
transition: transform var(--duration-base) var(--ease-out),
opacity var(--duration-base) var(--ease-out);
}
@@ -543,6 +547,7 @@
justify-content: center;
gap: var(--space-2);
min-width: var(--touch-min);
border-radius: 20px;
color: var(--ink-muted);
text-decoration: none;
background: none;
@@ -555,13 +560,52 @@
display: flex;
align-items: center;
justify-content: center;
width: 56px;
width: 100%;
max-width: 64px;
height: 30px;
border-radius: var(--radius-pill);
font-size: 20px;
transition: background-color var(--duration-base) var(--ease-out);
}
/* L'azione al centro: e' una casella della barra come le altre, alla stessa
altezza, solo piena d'accento. L'unico accento della schermata sta sul solo
comando che crea qualcosa. */
.navbar__action {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-6);
min-width: var(--touch-min);
padding-inline: var(--space-md);
border: none;
border-radius: 20px;
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);
}
.navbar__action i { font-size: 22px; }
.navbar__action:active { transform: scale(0.96); background-color: var(--primary-pressed); }
/* Senza rete l'ispezione non si puo' aprire: il tasto lo dice stando spento,
non sparendo. Una casella che scompare sposta le altre due sotto il dito. */
.navbar__action:disabled {
background-color: var(--surface-muted);
color: var(--ink-muted);
}
@media (prefers-reduced-motion: reduce) {
.navbar__action:active { transform: none; }
}
.navbar__label {
font-size: var(--label-md-size);
line-height: 1.2;
@@ -596,6 +640,15 @@
.navbar__item { flex: 0 0 auto; padding-block: var(--space-xs); }
/* In colonna l'azione va in cima: e' il primo comando della barra, non
qualcosa incastrato fra due destinazioni. */
.navbar__action {
order: -1;
align-self: stretch;
height: 48px;
margin-bottom: var(--space-xs);
}
.app-shell { padding-left: calc(96px + var(--space-lg)); }
.page-body { padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); }
}