Calendario: le sette colonne dei giorni tutte della stessa larghezza

Chiesto da Adriano. La tabella era in layout automatico, quindi il browser
dimensionava ogni colonna sul contenuto: il sabato, che porta la nota «solo
il 12 settembre», veniva largo quasi il doppio, e i giorni senza class si
stringevano. Una griglia oraria con le colonne di misure diverse si legge
male proprio dove serve — nell'incrocio fra un giorno e un'ora.

`table-layout: fixed` piu' una larghezza sulla sola colonna delle ore
(64px): tutto il resto viene diviso in parti uguali fra le sette dei giorni.

E' lo stesso criterio che il PDF applica da sempre — la' le colonne sono
`(larghezzaUtile - larghezzaOra) / GIORNI.length` — quindi adesso le due
versioni dello stesso foglio si somigliano invece di divergere.

La colonna delle ore resta piu' stretta dei giorni, come nel PDF: ci sta
dentro «12.15» e nient'altro.

185 test verdi.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Adriano Dal Pastro
2026-09-01 08:55:14 +00:00
parent 4f031cf571
commit 718ca499c4
+10 -1
View File
@@ -173,7 +173,13 @@ const disciplinePresenti = (cal: Calendario) =>
/* La griglia ha otto colonne: su telefono scorre in orizzontale invece di comprimersi /* La griglia ha otto colonne: su telefono scorre in orizzontale invece di comprimersi
fino a diventare illeggibile, e la colonna delle ore resta ferma. */ fino a diventare illeggibile, e la colonna delle ore resta ferma. */
.cal-tab { border-collapse: collapse; width: 100%; min-width: 720px; } /* `table-layout: fixed` e' quello che rende le sette colonne dei giorni ESATTAMENTE
uguali: in automatico il browser le dimensiona sul contenuto, cosi' il sabato con la
nota «solo il 12 settembre» diventava largo il doppio e i giorni vuoti si stringevano.
Con il layout fisso basta dare una larghezza alla colonna delle ore: tutto il resto
viene diviso in parti uguali fra le sette rimanenti. E' lo stesso criterio del PDF,
dove le colonne sono `(larghezzaUtile - larghezzaOra) / 7` da sempre. */
.cal-tab { border-collapse: collapse; width: 100%; min-width: 720px; table-layout: fixed; }
.cal-tab th, .cal-tab td { border: 1px solid #e4e0d9; padding: 9px 10px; text-align: left; } .cal-tab th, .cal-tab td { border: 1px solid #e4e0d9; padding: 9px 10px; text-align: left; }
.cal-tab thead th { .cal-tab thead th {
background: var(--c-bg-alt); background: var(--c-bg-alt);
@@ -184,6 +190,9 @@ const disciplinePresenti = (cal: Calendario) =>
display: block; font-size: .62rem; letter-spacing: .06em; text-transform: none; display: block; font-size: .62rem; letter-spacing: .06em; text-transform: none;
color: var(--c-text-light); font-weight: 400; color: var(--c-text-light); font-weight: 400;
} }
/* L'unica larghezza dichiarata: la colonna delle ore. Resta piu' stretta dei giorni,
come nel PDF — ci sta dentro «12.15» e nient'altro. */
.cal-tab__ora-h, .cal-tab__ora { width: 64px; }
.cal-tab__ora-h { color: var(--c-accent-dark) !important; } .cal-tab__ora-h { color: var(--c-accent-dark) !important; }
.cal-tab__ora { .cal-tab__ora {
background: var(--c-bg); background: var(--c-bg);