fix(répertoire): colonnes différenciées, scrollbars discrètes, fontes conformes maquette, AP entre crochets

- grid-template-columns: années=0.4fr, orientations=1.2fr, AP/finalité/intermédiaires
- scrollbars: WebKit 5px transparent + Firefox scrollbar-width:thin global
- rep-entry: BBBDMSans Regular 398, --step--1
- années: BBBDMSans Medium 498 (semi-bold)
- titres colonnes: Ductus Regular 398, text-secondary, letter-spacing 0.12em
- AP: diminutifs entre crochets (ex: Design et Politique du Multiple [DPM])
- TODO: marquer les 4 correctifs répertoire comme faits
This commit is contained in:
Pontoporeia
2026-06-08 10:50:15 +02:00
parent df70fba5d4
commit 9a8f0cad65
4 changed files with 59 additions and 10 deletions

View File

@@ -7,3 +7,7 @@
- [x] Fix `.gitignore`: anchor `vendor/` to root (`/vendor/`) so `app/public/assets/js/vendor/` (htmx, OverType, FilePond) is tracked - [x] Fix `.gitignore`: anchor `vendor/` to root (`/vendor/`) so `app/public/assets/js/vendor/` (htmx, OverType, FilePond) is tracked
- [x] Fix migration `025_lowercase_languages.sql`: deduplicate languages before LOWER() to avoid UNIQUE constraint violation (`Néerlandais`/`néerlandais`) - [x] Fix migration `025_lowercase_languages.sql`: deduplicate languages before LOWER() to avoid UNIQUE constraint violation (`Néerlandais`/`néerlandais`)
- [x] Fix home page: load ALL published theses grouped by year (desc), shuffled randomly within each year (instead of only ~20 from latest year) - [x] Fix home page: load ALL published theses grouped by year (desc), shuffled randomly within each year (instead of only ~20 from latest year)
- [x] Répertoire: colonnes à largeurs différenciées (Années plus étroites, Orientations/AP plus larges)
- [x] Répertoire: barres de scroll discrètes (thin + semi-transparentes)
- [x] Répertoire: fontes/graisses conformes à la maquette (Ductus pour titres colonnes, années en bold, etc.)
- [x] Répertoire: diminutifs des AP entre crochets (ex: Design et Politique du Multiple [DPM])

View File

@@ -10,6 +10,32 @@ html, body {
overflow: hidden; overflow: hidden;
} }
/* ── Discreet scrollbars ─────────────────────────────────────────── */
/* WebKit browsers */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--text-tertiary);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--text-tertiary) transparent;
}
body { body {
font-family: var(--font-body); font-family: var(--font-body);
background: var(--bg-primary); background: var(--bg-primary);

View File

@@ -11,9 +11,16 @@
} }
/* ---- 6-column index layout ---- */ /* ---- 6-column index layout ---- */
/* Column fractions: years=0.4 ap=1 or=1.2 fi=0.7 students=1 kw=1 */
.repertoire-index { .repertoire-index {
display: grid; display: grid;
grid-template-columns: repeat(6, minmax(15vw, min-content)); grid-template-columns:
minmax(3rem, 0.4fr)
minmax(7rem, 1fr)
minmax(9rem, 1.2fr)
minmax(6rem, 0.7fr)
minmax(8rem, 1fr)
minmax(7rem, 1fr);
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
gap: var(--space-s); gap: var(--space-s);
justify-content: space-between; justify-content: space-between;
@@ -72,10 +79,10 @@
grid-row: 1; grid-row: 1;
font-family: var(--font-display); font-family: var(--font-display);
font-size: var(--step--2); font-size: var(--step--2);
letter-spacing: 0.1em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-primary); color: var(--text-secondary);
font-weight: 400; font-weight: 398;
margin: 0; margin: 0;
padding: var(--space-xs) var(--space-2xs) var(--space-3xs); padding: var(--space-xs) var(--space-2xs) var(--space-3xs);
border-bottom: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary);
@@ -104,9 +111,9 @@
border: none; border: none;
padding: var(--space-3xs) 0; padding: var(--space-3xs) 0;
margin: 0; margin: 0;
font-family: inherit; font-family: var(--font-body);
font-size: var(--step-0); font-size: var(--step--1);
font-weight: normal; font-weight: 398;
color: var(--text-primary); color: var(--text-primary);
line-height: 1.4; line-height: 1.4;
cursor: pointer; cursor: pointer;
@@ -137,10 +144,10 @@
pointer-events: none; pointer-events: none;
} }
/* Years column — big bold numbers */ /* Years column — big numbers, semi-bold (BBBDMSans Medium weight) */
.repertoire-col[data-col="years"] .rep-entry { .repertoire-col[data-col="years"] .rep-entry {
font-size: var(--step-3); font-size: var(--step-3);
font-weight: normal; font-weight: 498;
line-height: 1.1; line-height: 1.1;
letter-spacing: -0.02em; letter-spacing: -0.02em;
padding: var(--space-3xs) 0; padding: var(--space-3xs) 0;

View File

@@ -30,6 +30,18 @@ ksort($studentWorks);
// ── Shared helpers ────────────────────────────────────────────────────────── // ── Shared helpers ──────────────────────────────────────────────────────────
// AP abbreviation mapping (cf. maquette: diminutifs entre crochets)
const AP_ABBREVIATIONS = [
'Atelier Pratiques Situées' => '[APS]',
'Design et Politique du Multiple' => '[DPM]',
'Lieux, Interdisciplinarités, Écologie, Nécessité, Systèmes' => '[L.I.E.N.S.]',
];
function formatApDisplay(string $name): string {
$abbr = AP_ABBREVIATIONS[$name] ?? '';
return $abbr !== '' ? "$name $abbr" : $name;
}
function repToggleUrl(array $sets, string $dim, string $value): string { function repToggleUrl(array $sets, string $dim, string $value): string {
if (in_array($value, $sets[$dim], true)) { if (in_array($value, $sets[$dim], true)) {
$sets[$dim] = array_values(array_filter($sets[$dim], fn($v) => $v !== $value)); $sets[$dim] = array_values(array_filter($sets[$dim], fn($v) => $v !== $value));
@@ -66,7 +78,7 @@ function repFilterEntry(
<button type="button" class="<?= $cls ?>" <button type="button" class="<?= $cls ?>"
aria-pressed="<?= $isActive ? 'true' : 'false' ?>" aria-pressed="<?= $isActive ? 'true' : 'false' ?>"
<?= $isFaded ? 'disabled' : "hx-get=\"" . htmlspecialchars($url) . "\" $hx" ?>> <?= $isFaded ? 'disabled' : "hx-get=\"" . htmlspecialchars($url) . "\" $hx" ?>>
<?= htmlspecialchars($val) ?> <?= htmlspecialchars($dim === 'ap' ? formatApDisplay($val) : $val) ?>
</button> </button>
</li> </li>
<?php <?php