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

Ridisegna la schermata di accesso

Browse Source 
Ogni campo era un riquadro dentro il riquadro, con l'etichetta che saltava
sopra il testo al primo tocco: un modulo web, non una schermata. Ora i tre
campi stanno in un pannello solo diviso da una linea, come le liste del resto
dell'app, e l'etichetta sta ferma sopra il campo.

Lo sfondo passa alla superficie di lavoro, la stessa dello splash e della prima
schermata: l'avvio non cambia colore tre volte. L'errore di accesso usa il
riquadro di avviso gia' in uso dentro l'app invece di uno stile suo.

Non verificata sul terminale: la sessione sul dispositivo e' aperta e non l'ho
chiusa per non far perdere l'accesso.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Elefante
2026-09-17 12:47:36 +02:00
parent 4e61dc011f
commit 66ed92299b
2 changed files with 93 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SteUp.Shared/wwwroot/css/components.css
+57 -17
View File
@@ -881,7 +881,7 @@
padding: var(--space-lg);
padding-top: calc(var(--space-lg) + env(safe-area-inset-top, 0px));
padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
background-color: var(--surface-muted);
background-color: var(--workspace);
}
.onboarding__panel {
@@ -892,40 +892,80 @@
}
.onboarding__logo {
height: 128px;
height: 104px;
object-fit: contain;
margin-inline: auto;
}
/* Un pannello solo, tre righe divise da una linea: la stessa forma delle
liste dell'app, invece di tre riquadri che galleggiano separati. */
.onboarding__fields {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-top: var(--space-xl);
background-color: var(--surface);
border-radius: var(--radius-surface);
overflow: hidden;
}
.onboarding__field {
background-color: var(--surface);
border: 1px solid var(--divider);
border-radius: var(--radius-control);
padding: var(--space-xs) var(--space-md);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
display: block;
padding: var(--space-sm) var(--space-md);
transition: background-color var(--duration-fast) var(--ease-out);
}
.onboarding__field:focus-within {
border-color: var(--primary-dark);
box-shadow: inset 0 0 0 1px var(--primary-dark);
.onboarding__field + .onboarding__field { border-top: 1px solid var(--divider); }
.onboarding__field:focus-within { background-color: var(--surface-muted); }
/* L'etichetta sta sopra il campo e non si muove: niente testo che scivola
quando appoggi il dito. */
.onboarding__label {
display: block;
font-size: var(--label-md-size);
line-height: 1.25;
font-weight: 500;
color: var(--ink-muted);
}
.onboarding__error {
margin-top: var(--space-lg);
text-align: center;
.onboarding__input-row {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.onboarding__input {
width: 100%;
min-width: 0;
min-height: 34px;
border: none;
background: none;
outline: none;
font-family: inherit;
font-size: var(--body-lg-size);
font-weight: 600;
color: var(--danger-ink);
font-weight: 500;
color: var(--ink);
}
.onboarding__reveal {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: var(--touch-min);
height: var(--touch-min);
margin-right: calc(var(--space-xs) * -1);
border: none;
border-radius: var(--radius-pill);
background: none;
color: var(--ink-muted);
font-size: 20px;
}
.onboarding__reveal:active { background-color: var(--surface-muted); }
.onboarding__error { margin-top: var(--space-md); }
/* Bottone a pillola, alto 52: e' l'unico gesto della schermata. */
.onboarding__submit {
display: flex;