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

Rimetti i reparti richiudibili e il "+" sul reparto

Browse Source 
Le schede di un reparto erano un elenco fisso: con quattro reparti aperti
la pagina diventava un rotolo, e per aggiungere una scheda a un reparto
preciso bisognava passare dal comando generale e ridichiarare il reparto.

La testata del reparto torna a essere un comando: si tocca per richiudere
il gruppo, e la freccia dice da che parte sta. I conteggi salgono nella
testata ("3 schede · 1 da inviare · 1 da completare") invece di stare nel
corpo: un reparto compattato non deve nascondere quello che gli manca.

Accanto torna il "+", che apre la scheda nuova con il reparto gia'
scelto. E' l'unica differenza con il "+" della barra, ed e' quella che
toglie un passaggio a chi sta lavorando su un reparto alla volta.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Elefante
2026-09-17 16:45:50 +02:00
parent b9de075f45
commit 70a0d0f5fa
2 changed files with 177 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SteUp.Shared/wwwroot/css/components.css
+92
View File
@@ -140,6 +140,98 @@
.section-header__aside { flex: 0 0 auto; }
/* -----------------------------------------------------------------------------
Reparto — gruppo di schede richiudibile
La testata e' un comando a tutta riga: si tocca ovunque per chiudere il
gruppo. I conteggi stanno nella testata e non nel corpo, cosi' restano
leggibili anche da chiuso.
-------------------------------------------------------------------------- */
.reparto__head {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-sm);
}
.reparto__toggle {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-4);
min-height: var(--touch-min);
padding: 0;
border: none;
background: none;
font-family: inherit;
text-align: left;
color: var(--ink);
}
.reparto__chevron {
flex: 0 0 auto;
font-size: 24px;
color: var(--ink-muted);
transition: transform var(--duration-base) var(--ease-out);
}
.reparto--collapsed .reparto__chevron { transform: rotate(-90deg); }
.reparto__text {
flex: 1 1 auto;
min-width: 0;
}
.reparto__title {
display: block;
font-size: var(--title-lg-size);
line-height: var(--title-lg-height);
font-weight: 700;
letter-spacing: -0.01em;
}
.reparto__meta {
display: block;
margin-top: var(--space-2);
font-size: var(--body-md-size);
line-height: var(--body-md-height);
font-weight: 400;
color: var(--ink-muted);
}
.reparto__actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--space-6);
}
/* Il "+" del reparto non porta l'accento: l'accento e' del comando principale
della schermata, e qui i bottoni sono due in fila. */
.reparto__add {
display: flex;
align-items: center;
justify-content: center;
width: var(--touch-min);
height: var(--touch-min);
flex: 0 0 auto;
border: 1px solid var(--divider);
border-radius: var(--radius-pill);
background-color: var(--surface);
color: var(--ink);
font-size: 22px;
transition: transform var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.reparto__add:active { transform: scale(0.94); background-color: var(--surface-muted); }
.reparto__add:disabled { color: var(--ink-muted); background-color: var(--surface-muted); }
@media (prefers-reduced-motion: reduce) {
.reparto__add:active { transform: none; }
}
/* -----------------------------------------------------------------------------
§6.4 Badge — stato in pillola
Mai il solo colore: sempre icona + etichetta.