From 8ee2c8a2b483b3b09f1c7b396cb396177014cce9 Mon Sep 17 00:00:00 2001 From: "Adriano (goldrake)" Date: Sat, 26 Sep 2026 13:05:32 +0000 Subject: [PATCH] =?UTF-8?q?longevity:=20layout=20e=20stile=20del=20gestion?= =?UTF-8?q?ale=20=E2=80=94=20barra=20laterale,=20tabelle,=20bottone=20d'az?= =?UTF-8?q?ione?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Variante "gestionale" di Longevity.astro (finora dichiarata e non implementata): barra laterale sul modello di StressIndex.astro, con le voci Clienti, Nuovo cliente e un link "Il mio referto". CSS nuovo in longevity.css, solo classi lg-* e solo i colori già ammessi (nessun colore letterale nuovo: il bianco del testo sul bottone pieno riusa var(--lg-surface), non un #fff aggiuntivo). Refs #2 --- apps/platforms/src/layouts/Longevity.astro | 63 ++++++++++++++---- apps/platforms/src/styles/longevity.css | 77 ++++++++++++++++++++++ 2 files changed, 128 insertions(+), 12 deletions(-) diff --git a/apps/platforms/src/layouts/Longevity.astro b/apps/platforms/src/layouts/Longevity.astro index 8ec8396..27b048b 100644 --- a/apps/platforms/src/layouts/Longevity.astro +++ b/apps/platforms/src/layouts/Longevity.astro @@ -5,8 +5,8 @@ // dentro) qui i pubblici sono due, e uno non è staff: il cliente entra tre o quattro // volte l'anno a leggere il proprio referto, non gli serve l'arredamento di uno // strumento di lavoro. Il layout prevede due forme: -// - "referto": una colonna che scorre, senza navigazione (questo task) -// - "gestionale": barra laterale come Stress Index (arriva col piano del gestionale) +// - "referto": una colonna che scorre, senza navigazione (il cliente) +// - "gestionale": barra laterale sul modello di StressIndex.astro (il trainer, Unità 2b #2) import '@fontsource/montserrat/400.css'; import '@fontsource/montserrat/500.css'; import '@fontsource/montserrat/600.css'; @@ -19,10 +19,18 @@ interface Props { title: string; /** Voci di percorso mostrate nell'intestazione, dopo "Longevity". */ crumbs?: string[]; - /** "referto" (colonna centrata, senza navigazione) o "gestionale" (barra laterale, non ancora implementata). */ + /** "referto" (colonna centrata, senza navigazione) o "gestionale" (barra laterale, per il trainer). */ variante?: 'referto' | 'gestionale'; } const { title, crumbs = [], variante = 'referto' } = Astro.props; +const path = Astro.url.pathname; + +// Le voci della barra laterale del gestionale: nasce con due pagine, non le sette di +// Stress Index — un elenco più lungo arriverà con gli sviluppi futuri (#3, #7, #8). +const NAV_GESTIONALE = [ + { href: '/longevity/gestionale', label: 'Clienti' }, + { href: '/longevity/gestionale/nuovo', label: 'Nuovo cliente' }, +]; --- @@ -34,14 +42,45 @@ const { title, crumbs = [], variante = 'referto' } = Astro.props; -
-
-

- Longevity - {crumbs.map((c) => / {c})} -

-
-
-
+ {variante === 'gestionale' ? ( + <> + + + +
+
+

+ Longevity + {crumbs.map((c) => / {c})} +

+
+
+
+ + ) : ( +
+
+

+ Longevity + {crumbs.map((c) => / {c})} +

+
+
+
+ )} diff --git a/apps/platforms/src/styles/longevity.css b/apps/platforms/src/styles/longevity.css index daaac5c..6375e52 100644 --- a/apps/platforms/src/styles/longevity.css +++ b/apps/platforms/src/styles/longevity.css @@ -116,6 +116,10 @@ .lg-field { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; } .lg-field > span { color: var(--c-heading); font-weight: 500; } .lg-field input[type="number"], +.lg-field input[type="text"], +.lg-field input[type="date"], +.lg-field input[type="email"], +.lg-field input[type="tel"], .lg-field textarea { border: 1px solid var(--lg-line); padding: 9px 11px; font: inherit; background: var(--lg-surface); } @@ -135,6 +139,79 @@ } .lg-form__nav button:disabled { opacity: .35; cursor: not-allowed; } .lg-form__nav button:last-child:not(:only-child) { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } +/* Il link "Annulla" accanto al bottone di invio (nuovo.astro, checkup.astro): stesso rigo, + peso visivo minore — non compete con l'azione che porta avanti il modulo. */ +.lg-form__nav a { align-self: center; font-size: .85rem; color: var(--c-text-light); text-decoration: none; } +.lg-form__nav a:hover { color: var(--c-heading); } + +/* --- il gestionale del trainer (Unità 2b, #2): barra laterale sul modello di + StressIndex.astro, ma nella palette di Longevity — niente sfondo scuro con colori + letterali, solo i token già ammessi qui. --- */ +.lg[data-variante="gestionale"] { justify-content: flex-start; align-items: flex-start; } + +.lg-side { + width: 240px; flex: 0 0 240px; height: 100vh; position: sticky; top: 0; overflow-y: auto; + background: var(--c-bg-alt); border-right: 1px solid var(--lg-line); + padding: 28px 20px 40px; display: flex; flex-direction: column; +} +.lg-brand { + display: block; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; + letter-spacing: .06em; text-transform: uppercase; color: var(--c-heading); text-decoration: none; line-height: 1.15; +} +.lg-brand .eyebrow { display: block; font-size: .68rem; letter-spacing: .18em; color: var(--c-accent); margin-bottom: 5px; } +.lg-home { + display: inline-block; margin: 16px 0 22px; font-family: var(--font-heading); font-size: .66rem; + font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-light); + text-decoration: none; border-bottom: 1px solid transparent; +} +.lg-home:hover { color: var(--c-heading); border-bottom-color: var(--c-accent); } + +.lg-nav { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--lg-line); padding-top: 16px; } +.lg-nav__link { + padding: 9px 12px; text-decoration: none; font-family: var(--font-heading); font-size: .72rem; + font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-light); + border-left: 3px solid transparent; +} +.lg-nav__link:hover { color: var(--c-heading); background: var(--c-bg); } +.lg-nav__link.is-active { color: var(--c-heading); background: var(--lg-surface); border-left-color: var(--c-accent); } +.lg-nav__link--referto { margin-top: 16px; border-top: 1px dashed var(--lg-tratteggio); padding-top: 16px; } + +.lg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } + +/* intestazione di pagina con un'azione a destra (es. "Nuovo cliente", "Nuovo check-up") */ +.lg-head--azioni { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } + +/* bottone pieno per un link che porta a un'azione (non un