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:
@@ -173,7 +173,13 @@ const disciplinePresenti = (cal: Calendario) =>
|
||||
|
||||
/* La griglia ha otto colonne: su telefono scorre in orizzontale invece di comprimersi
|
||||
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 thead th {
|
||||
background: var(--c-bg-alt);
|
||||
@@ -184,6 +190,9 @@ const disciplinePresenti = (cal: Calendario) =>
|
||||
display: block; font-size: .62rem; letter-spacing: .06em; text-transform: none;
|
||||
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 {
|
||||
background: var(--c-bg);
|
||||
|
||||
Reference in New Issue
Block a user