fix: various styling fixes; simplify tfe.php structure and CSS with grid

TODO.md

@@ -1,36 +1,5 @@
-- [x] Remove "Mo" option from duration — keep only minutes and pages
+# TODO
-- [x] Combine pages and minutes as separate fields (both can be set simultaneously)
+
-- [x] Fix minutes input visibility (can't see what's typed)
+- [x] Simplify `tfe.php` HTML structure (remove `.tfe-layout` wrapper, remove `.tfe-synopsis-column` wrapper)
-- [x] Add `has_annexes` checkbox to form + DB column
+- [x] Simplify `tfe.css` — replace flex-column with grid where possible, merge `.tfe-layout` into `.tfe-content-row`, remove dead wrappers
-- [x] Display duration on admin backoffice recap page
+- [x] Commit changes
-- [x] Update public TFE page duration display for new combined format
-- [x] Fix `handleAutosaveResponse is not defined` — load `autosave-handler.js` on about_page edit view
-- [x] Fix `handleAutosaveResponse is not defined` in admin add/edit — function was scoped inside IIFE bundle, not on window
-- [x] Fix search result cards: title and author always below image/gradient, remove text overlay on placeholder gradient
-- [x] Change search results to 10 per page with HTMX pagination (no-JS fallback preserved)
-- [x] Bump to 15 results/page, make results area vertically scrollable, sticky pagination at viewport bottom
-- [x] Fix HTMX targetError: move #search-results wrapper inside fragment so it survives outerHTML swaps
-- [x] Add range counter to results header (e.g. "1–15 sur 112 résultats")
-- [x] Collapsible filter controls with <details>/<summary> + active filter badge on mobile
-- [x] Responsive paginator: hide first/last buttons on mobile, smaller touch targets
-- [x] Compact range counter on mobile: "1–15 / 112" instead of full "1–15 sur 112 résultats"
-- [x] Remove orientation display from search result card meta
-- [x] Add bulk select/delete to tmp cleanup dialog (like admin/index.php pattern)
-- [x] Move cleanup UI from modal to dedicated page (like add.php/edit.php)
-- [x] Replace <details> with <fieldset>/<legend> in cleanup fragments (like contenus.php)
-- [x] Standardise test group recipes: lint-php, lint-css, lint-js, test + add fix recipe + make lint pass clean
-- [x] Remove Mot de passe column from acces.php, add key.svg icon button in Actions to copy password to clipboard, reorder actions (URL/password/edit/toggle/archive), switch URL icon to link-simple.svg
-- [x] Fix CC2r: removed hidden seeds (were stale/overriding user input), render initial licence-choice from \$formData; Interne want_license unchecked clears CC2r+licence, switching from other modes preserves values; CC2r independent toggle; licence dropdown has no-licence placeholder
-- [x] Dans le formulaire admin, le contact privé ne se sauvegarde pas.
-- [x] Remove "Rendre le contact visible publiquement sur la fiche du TFE" from admin add/edit forms
-- [x] Auto-show contact on public TFE page when contact_visible is filled (no checkbox needed)
-- [x] Fix file size limits: align all layers (JS/FilepondHandler/ThesisFileHandler/validate-fragment) — video/audio 5 GB, default 500 MB, PDF 100 MB; fix JS fileValidateSizeFilter gate bug that rejected AV files >1 GB despite 8 GB per-ext cap
-- [x] Fix: deleting contact groups in apropos form not persisted (no change event after DOM removal, autosave never triggered)
-- [x] Improve h1, h2, h3 size difference in base.css heading scale
-- [x] Rework TFE page desktop layout: two columns 35vw/1fr, left = author/title/meta/synopsis, right = files, media 100% width; columns scroll independently, content fits 100vw; no bottom padding on main; add &scrollbar=0 to PDF iframe URLs
-- [x] 'Promoteur·ice ULB' remplacé par 'Promoteur·ice université' (changement juste l'étiquette)
-- [x] PDF viewer: fix page navigation buttons (prev/next) — build toolbar after canvases exist & query canvases fresh in scroll handler
-- [x] PDF viewer: render pages smaller by default (0.85× scale)
-- [x] PDF viewer: add dark transparent violet background behind pages when expanded
-- [x] pdf-viewer: expand to fill right column (not whole page), center pages, freeze column on expand
-- [x] pdf-viewer: fix toolbar width (align-self:stretch), hide sibling file items when expanded

app/public/assets/css/admin.css

@@ -59,6 +59,10 @@
   );
 }
 
+.admin-body main:not(:has(.admin-table--sticky)) {
+  padding: 2ch;
+}
+
 .admin-main--list {
   padding: 0;
 }

app/public/assets/css/base.css

@@ -43,8 +43,8 @@ body {
   color: var(--text-primary);
   background: linear-gradient(
     180deg,
-		rgba(0, 0, 0, 0) 92%,
+    rgba(0, 0, 0, 0) 85%,
-		rgba(149, 87, 181, 1) 100%
+    rgba(149, 87, 181, 0.8) 100%
   );
   display: flex;
   flex-direction: column;

app/public/assets/css/tfe.css

@@ -7,42 +7,31 @@
   flex: 1;
   min-height: 0;
   overflow: hidden;
-	padding: 0 var(--space-m) 0 var(--space-m);
-}
-
-/* Stacked article layout — fills main height */
-.tfe-layout {
-	display: flex;
-	flex-direction: column;
-	gap: var(--space-xl);
-	width: 100%;
-	height: 100%;
-	min-height: 0;
-}
-
-/* Row 1: Author above Title (kept for backward compat, no longer used) */
-.tfe-header-row {
-	display: flex;
-	flex-direction: column;
-	gap: var(--space-3xs);
 }
 
 /* Two-column layout: left 40vw (info), right fills remaining (files) */
 .tfe-content-row {
   display: grid;
-	grid-template-columns: 40vw 1fr;
+  grid-template-columns: 49vw 1fr;
-	gap: var(--space-xl);
+  /* gap: var(--space-xl); */
-	flex: 1;
+  width: 100%;
+  height: 100%;
   min-height: 0;
 }
-.tfe-left-column,
+
+.tfe-left-column {
+  display: grid;
+  overflow-y: auto;
+  min-width: 0;
+  padding: var(--space-xl) var(--space-m) var(--space-xl) var(--space-m);
+}
+
 .tfe-right-column {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   min-width: 0;
-	padding-top: var(--space-l);
+  padding: var(--space-xl) var(--space-m) var(--space-xl) var(--space-m);
-	padding-bottom: var(--space-xl);
 }
 
 /* Left column: stacks author, title, meta, synopsis — scrolls independently */
@@ -52,34 +41,36 @@
   padding-right: 0.5ch;
 }
 
-/* Files container inside right column */
+/* Files container inside right column — flex kept for PDF expand-to-fill behavior */
 .tfe-files {
-	display: flex;
+  display: grid;
-	flex-direction: column;
   gap: var(--space-m);
-	flex: 1;
+}
-	min-height: 0;
+
+.tfe-files:has(.pdf-expanded) {
+  height: 100%;
 }
 
 .tfe-file-item {
   width: 100%;
   min-width: 0;
-	overflow: hidden;
   border-radius: var(--radius);
 }
 
+.tfe-file-item:last-of-type {
+  padding-bottom: 4ch;
+}
+
 .tfe-file-item:has(.pdf-embed-wrapper) {
   overflow: visible;
 }
 
 .tfe-file-item:has(.pdf-expanded) {
-	flex: 1;
   min-height: 0;
   overflow: visible;
 }
 
 .tfe-file-item:has(.tfe-file-iframe) {
-	flex: 1;
   min-height: 0;
   overflow: visible;
 }
@@ -128,7 +119,8 @@
 }
 
 .tfe-website-link {
-	display: inline-flex;
+  display: inline-grid;
+  grid-auto-flow: column;
   align-items: center;
   gap: var(--space-3xs);
   padding: var(--space-2xs) var(--space-xs);
@@ -151,13 +143,6 @@
   font-style: italic;
 }
 
-/* Synopsis column wrapper (context note + synopsis) */
-.tfe-synopsis-column {
-	display: flex;
-	flex-direction: column;
-	gap: var(--space-xs);
-}
-
 /* Contextual note above synopsis */
 .tfe-context-note {
   font-style: italic;
@@ -170,13 +155,8 @@
   border-radius: var(--radius);
 }
 
-.tfe-synopsis-empty {
-	/* placeholder to maintain grid column */
-}
-
 /* Author (p) — inline with title */
 .tfe-author {
-	font-family: var(--font-display);
   font-size: var(--step-1);
   font-weight: 400;
   color: var(--text-primary);
@@ -187,12 +167,12 @@
 /* Title (h1) — inherits global scale from base.css */
 .tfe-title {
   margin: 0;
+  font-size: var(--step-2);
 }
 
 /* Metadata block */
 .tfe-meta {
-	display: flex;
+  display: grid;
-	flex-direction: column;
   gap: var(--space-3xs);
   font-size: var(--step--1);
   line-height: 1.4;
@@ -261,8 +241,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: var(--space-m);
-	display: flex;
+  display: grid;
-	flex-direction: column;
   gap: var(--space-m);
 }
 
@@ -281,14 +260,12 @@
 }
 
 .tfe-access-request-form {
-	display: flex;
+  display: grid;
-	flex-direction: column;
   gap: var(--space-s);
 }
 
 .tfe-access-request-form .form-group {
-	display: flex;
+  display: grid;
-	flex-direction: column;
   gap: var(--space-3xs);
 }
 
@@ -304,14 +281,9 @@
 }
 
 .tfe-btn-request-access {
-	/* deprecated alias for .btn--primary; kept for backward-compat */
   margin-top: var(--space-3xs);
 }
 
-.tfe-btn-request-access:hover:not(:disabled) {
-	/* handled by .btn--primary */
-}
-
 .tfe-btn-request-access:disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -346,13 +318,11 @@
    ============================================================ */
 
 /*── Base wrapper ───────────────────────────── */
-
 .pdf-embed-wrapper {
   position: relative;
   width: 100%;
   height: auto;
-	display: flex;
+  display: grid;
-	flex-direction: column;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -361,14 +331,11 @@
 }
 
 /* ── Collapsed state: thumbnail tile ────────── */
-
 .pdf-collapsed {
   cursor: pointer;
   overflow: hidden;
-	display: flex;
+  display: grid;
-	align-items: center;
+  place-items: center;
-	justify-content: center;
-	position: relative;
   min-height: 200px;
   max-height: 350px;
 }
@@ -381,14 +348,12 @@
 }
 
 /* ── Overlay veil + enter button ────────────── */
-
 .pdf-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
-	display: flex;
+  display: grid;
-	align-items: center;
+  place-items: center;
-	justify-content: center;
   background: rgb(0 0 0 / 0.15);
   backdrop-filter: blur(4px) saturate(0.6);
   transition: background 0.2s;
@@ -399,7 +364,6 @@
 }
 
 /* Document type pill — top-left of the overlay */
-
 .pdf-overlay-badge {
   position: absolute;
   top: var(--space-xs);
@@ -417,7 +381,8 @@
 }
 
 .pdf-enter-btn {
-	display: inline-flex;
+  display: inline-grid;
+  grid-auto-flow: column;
   align-items: center;
   gap: var(--space-2xs);
   padding: var(--space-xs) var(--space-m);
@@ -445,24 +410,21 @@ body.pdf-viewer-open {
 }
 
 .pdf-expanded {
-	/* Fill the right column from top to bottom (under the header). */
   height: 100%;
   min-height: 400px;
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior-y: contain;
   border: 2px solid var(--accent-primary);
-	display: flex;
+  display: grid;
-	flex-direction: column;
+  justify-items: center;
-	align-items: center;
   background: color-mix(in srgb, var(--accent-secondary) 22%, transparent);
 }
 
 /* ── Toolbar ────────────────────────────────── */
-
 .pdf-toolbar {
   position: sticky;
-	align-self: stretch;
+  justify-self: stretch;
   top: 0;
   z-index: 2;
   display: flex;
@@ -479,9 +441,8 @@ body.pdf-viewer-open {
 }
 
 .pdf-toolbar-btn {
-	display: inline-flex;
+  display: inline-grid;
-	align-items: center;
+  place-items: center;
-	justify-content: center;
   width: 2em;
   height: 2em;
   padding: 0;
@@ -514,8 +475,7 @@ body.pdf-viewer-open {
   min-width: 3em;
 }
 
-/* ── Scroll container ────────────────────────── */
+/* ── Canvas ─────────────────────────────────── */
-
 .pdf-canvas {
   display: block;
   width: 100%;
@@ -537,20 +497,15 @@ body.pdf-viewer-open {
   margin-top: var(--space-2xs);
 }
 
-/* Responsive */
+/* ── Responsive ─────────────────────────────── */
 @media (max-width: 900px) {
   .tfe-main {
     overflow-y: auto;
   }
 
-	.tfe-layout {
-		height: auto;
-		min-height: auto;
-	}
-
   .tfe-content-row {
     grid-template-columns: 1fr;
-		flex: none;
+    height: auto;
   }
 
   .tfe-left-column,
@@ -562,7 +517,7 @@ body.pdf-viewer-open {
     font-size: var(--step-2);
   }
 
-	/* PDF expands to full viewport height on mobile, above everything */
+  /* PDF expands to full viewport on mobile */
   .pdf-expanded {
     position: fixed;
     inset: 0;
@@ -571,6 +526,7 @@ body.pdf-viewer-open {
     min-height: unset;
     background: color-mix(in srgb, var(--accent-secondary) 92%, #000 8%);
   }
+
   .tfe-file-iframe {
     height: 100dvh;
   }

app/templates/admin/index-table.php

@@ -50,7 +50,7 @@ $sortArrow = function(string $col) use ($sortCol, $sortDir): string {
             <th scope="col"><input type="checkbox" onchange="toggleAll(this)"></th>
             <th scope="col"><a href="<?= $sortLink('identifier') ?>" class="admin-sort-link" hx-get="<?= htmlspecialchars($sortLink('identifier')) ?>" hx-target="#admin-table-wrap" hx-swap="innerHTML" hx-indicator="#admin-search-indicator" hx-push-url="true">ID<?= $sortArrow('identifier') ?></a></th>
             <th scope="col"><a href="<?= $sortLink('title') ?>" class="admin-sort-link" hx-get="<?= htmlspecialchars($sortLink('title')) ?>" hx-target="#admin-table-wrap" hx-swap="innerHTML" hx-indicator="#admin-search-indicator" hx-push-url="true">Titre<?= $sortArrow('title') ?></a></th>
-            <th scope="col"><a href="<?= $sortLink('authors') ?>" class="admin-sort-link" hx-get="<?= htmlspecialchars($sortLink('authors')) ?>" hx-target="#admin-table-wrap" hx-swap="innerHTML" hx-indicator="#admin-search-indicator" hx-push-url="true">Auteur(s)<?= $sortArrow('authors') ?></a></th>
+            <th scope="col"><a href="<?= $sortLink('authors') ?>" class="admin-sort-link" hx-get="<?= htmlspecialchars($sortLink('authors')) ?>" hx-target="#admin-table-wrap" hx-swap="innerHTML" hx-indicator="#admin-search-indicator" hx-push-url="true">Auteur·ice(s)<?= $sortArrow('authors') ?></a></th>
             <th scope="col"><a href="<?= $sortLink('year') ?>" class="admin-sort-link" hx-get="<?= htmlspecialchars($sortLink('year')) ?>" hx-target="#admin-table-wrap" hx-swap="innerHTML" hx-indicator="#admin-search-indicator" hx-push-url="true">Année<?= $sortArrow('year') ?></a></th>
             <th scope="col"><a href="<?= $sortLink('orientation') ?>" class="admin-sort-link" hx-get="<?= htmlspecialchars($sortLink('orientation')) ?>" hx-target="#admin-table-wrap" hx-swap="innerHTML" hx-indicator="#admin-search-indicator" hx-push-url="true">Orientation<?= $sortArrow('orientation') ?></a></th>
             <th scope="col"><a href="<?= $sortLink('ap_program') ?>" class="admin-sort-link" hx-get="<?= htmlspecialchars($sortLink('ap_program')) ?>" hx-target="#admin-table-wrap" hx-swap="innerHTML" hx-indicator="#admin-search-indicator" hx-push-url="true">AP<?= $sortArrow('ap_program') ?></a></th>

app/templates/public/tfe.php

@@ -1,8 +1,6 @@
 <main class="tfe-main" id="main-content">
-    <article class="tfe-layout">
+    <article class="tfe-content-row">
 
-        <!-- Two-column layout: left 40% (info), right 60% (files) -->
-        <div class="tfe-content-row">
         <div class="tfe-left-column">
 
             <p class="tfe-author"><?= htmlspecialchars(
@@ -258,7 +256,6 @@
                 <?php endif; ?>
             </div>
 
-            <div class="tfe-synopsis-column">
             <?php if (!empty($data["context_note"])): ?>
             <p class="tfe-context-note"><em>Note Contextuelle :</em><br><?= nl2br(htmlspecialchars($data["context_note"])) ?></p>
             <?php endif; ?>
@@ -270,7 +267,6 @@
             <?php else: ?>
             <div class="tfe-synopsis-text tfe-synopsis-empty"></div>
             <?php endif; ?>
-            </div>
 
             </div><!-- /tfe-left-column -->
 
@@ -469,8 +465,6 @@
 
             </div><!-- /tfe-right-column -->
 
-        </div>
-
     </article>
 </main>