PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 19:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

tfe.php: full semantic HTML overhaul

Browse Source 
- Replace <div class="tfe-layout"> with <article>, <div class="tfe-left"> with
  <header>, <div class="tfe-right"> with <aside> (supplementary media column)
- Fix inverted heading hierarchy: <h1> is now the thesis title (primary topic);
  author demoted to <p class="tfe-author"> (metadata, not a heading)
- Replace <div class="tfe-meta-list"> / <div class="tfe-meta-item"> / <span class="label">
  / <span class="value"> with <dl> / <dt> / <dd> (WCAG 1.3.1 info & relationships)
- Replace <div class="tfe-media-block"> with <figure>; <p class="tfe-file-caption">
  with <figcaption>; PDF <embed> gets .tfe-pdf-fallback download link (WCAG 4.1.2)
- Move back link to top of left column; extract inline styles to .tfe-back-link,
  .tfe-note-value, .tfe-restricted CSS classes
- Fix image alt text: description column used when populated, fallback to
  "Title — Author" instead of raw filename (WCAG 1.1.1)
- Add sr-only new-tab warning on baiu_link (WCAG 1.3.1 / 2.4.4)
- Fix PDF embed height: clamp(300px, 80vh, 700px) prevents horizontal overflow
  on small screens (WCAG 1.4.10 reflow)
- tfe.css: update all selectors to match new structure; remove inline styles;
  unify .tfe-restricted and .tfe-no-files; add .tfe-pdf-fallback, .tfe-back-link
This commit is contained in:
Pontoporeia
2026-03-28 19:12:01 +01:00
parent a84d6d560a
commit 126703f340
6 changed files with 459 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

628
TODO.md
View File

File diff suppressed because it is too large Load Diff

95
public/assets/tfe.css
View File

@@ -15,7 +15,7 @@
padding: 2rem 1.5rem 3rem; padding: 2rem 1.5rem 3rem;
} }
/* Two-column layout */ /* Two-column article layout */
.tfe-layout { .tfe-layout {
display: grid; display: grid;
grid-template-columns: 1fr 1.4fr; grid-template-columns: 1fr 1.4fr;
@@ -23,24 +23,22 @@
max-width: 1200px; max-width: 1200px;
} }
/* Left column */ /* Left column — article header */
.tfe-left { .tfe-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1.5rem;
} }
/* Student name — large */ /* Back link — top of left column */
.tfe-author { .tfe-back-link {
font-size: 1.9rem; font-size: .88rem;
font-weight: 400; color: #666;
color: var(--black); text-decoration: underline;
margin: 0; text-underline-offset: 2px;
line-height: 1.15;
letter-spacing: -0.01em;
} }
/* Title — very large, slightly spaced */ /* Title (h1) — primary heading, very large */
.tfe-title { .tfe-title {
font-size: 2.2rem; font-size: 2.2rem;
font-weight: 400; font-weight: 400;
@@ -50,55 +48,79 @@
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
/* Metadata list */ /* Author (p) — large but secondary */
.tfe-author {
font-size: 1.9rem;
font-weight: 400;
color: var(--black);
margin: 0;
line-height: 1.15;
letter-spacing: -0.01em;
}
/* Metadata description list */
.tfe-meta-list { .tfe-meta-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.45rem; gap: 0.45rem;
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.4; line-height: 1.4;
margin: 0;
} }
.tfe-meta-item { /* Each dt/dd pair grouped in a <div> inside <dl> */
.tfe-meta-list > div {
display: flex; display: flex;
gap: 0.4rem; gap: 0.4rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.tfe-meta-item .label { .tfe-meta-list dt {
color: var(--black); color: var(--black);
font-weight: 400; font-weight: 400;
flex-shrink: 0; flex-shrink: 0;
} }
.tfe-meta-item .value { .tfe-meta-list dd {
color: var(--black); color: var(--black);
font-weight: 700; font-weight: 700;
margin: 0;
} }
.tfe-meta-item .value a { .tfe-meta-list dd a {
color: inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
/* Synopsis text */ /* Note field: align dt/dd to top, value in italics */
.tfe-meta-note {
align-items: start;
}
.tfe-note-value {
font-style: italic;
}
/* Synopsis paragraph */
.tfe-synopsis-text { .tfe-synopsis-text {
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.7; line-height: 1.7;
color: var(--black); color: var(--black);
margin-top: 0.5rem; margin: 0;
} }
/* Right column — media */ /* Right column — aside (supplementary media) */
.tfe-right { .tfe-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1.5rem;
} }
/* Each file display unit */
.tfe-media-block { .tfe-media-block {
overflow: hidden; overflow: hidden;
margin: 0;
} }
.tfe-media-block img { .tfe-media-block img {
@@ -119,9 +141,10 @@
} }
.tfe-media-block embed { .tfe-media-block embed {
height: 700px; height: clamp(300px, 80vh, 700px);
} }
/* figcaption under media */
.tfe-file-caption { .tfe-file-caption {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--text-muted); color: var(--text-muted);
@@ -129,10 +152,26 @@
font-style: italic; font-style: italic;
} }
/* PDF fallback download link */
.tfe-pdf-fallback {
font-size: 0.85rem;
margin: 0.4rem 0 0;
}
.tfe-pdf-fallback a {
color: var(--black);
text-decoration: underline;
text-underline-offset: 2px;
}
/* "Not available" and "no files" notices */
.tfe-restricted,
.tfe-no-files { .tfe-no-files {
font-size: 0.95rem; font-size: 0.95rem;
color: var(--text-muted); color: var(--text-muted);
font-style: italic;
padding: 1rem 0; padding: 1rem 0;
margin: 0;
} }
/* Responsive */ /* Responsive */
@@ -142,13 +181,13 @@
gap: 2rem; gap: 2rem;
} }
.tfe-author {
font-size: 1.5rem;
}
.tfe-title { .tfe-title {
font-size: 1.7rem; font-size: 1.7rem;
} }
.tfe-author {
font-size: 1.5rem;
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@@ -156,11 +195,11 @@
padding: 1.5rem 1rem 2rem; padding: 1.5rem 1rem 2rem;
} }
.tfe-author {
font-size: 1.25rem;
}
.tfe-title { .tfe-title {
font-size: 1.4rem; font-size: 1.4rem;
} }
.tfe-author {
font-size: 1.25rem;
}
} }

149
public/tfe.php
View File

@@ -28,174 +28,179 @@ $extraCss = ['assets/tfe.css'];
<?php include APP_ROOT . '/templates/search-bar.php'; ?> <?php include APP_ROOT . '/templates/search-bar.php'; ?>
<main class="tfe-main" id="main-content"> <main class="tfe-main" id="main-content">
<div class="tfe-layout"> <article class="tfe-layout">
<!-- LEFT: info --> <!-- LEFT: info — article header -->
<div class="tfe-left"> <header class="tfe-left">
<h1 class="tfe-author"><?= htmlspecialchars($data['authors'] ?? 'Auteur inconnu') ?></h1> <a href="index.php" class="tfe-back-link">← Retour</a>
<h2 class="tfe-title"> <!-- Title is the primary heading; author is metadata -->
<h1 class="tfe-title">
<?= htmlspecialchars($data['title']) ?> <?= htmlspecialchars($data['title']) ?>
<?php if (!empty($data['subtitle'])): ?> <?php if (!empty($data['subtitle'])): ?>
– <?= htmlspecialchars($data['subtitle']) ?> – <?= htmlspecialchars($data['subtitle']) ?>
<?php endif; ?> <?php endif; ?>
</h2> </h1>
<div class="tfe-meta-list"> <p class="tfe-author"><?= htmlspecialchars($data['authors'] ?? 'Auteur inconnu') ?></p>
<dl class="tfe-meta-list">
<?php if (!empty($data['orientation'])): ?> <?php if (!empty($data['orientation'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Orientation :</span> <dt>Orientation :</dt>
<span class="value"><?= htmlspecialchars($data['orientation']) ?></span> <dd><?= htmlspecialchars($data['orientation']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['ap_program'])): ?> <?php if (!empty($data['ap_program'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Atelier pluridisciplinaire :</span> <dt>Atelier pluridisciplinaire :</dt>
<span class="value"><?= htmlspecialchars($data['ap_program']) ?></span> <dd><?= htmlspecialchars($data['ap_program']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['year'])): ?> <?php if (!empty($data['year'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Date :</span> <dt>Date :</dt>
<span class="value"><?= htmlspecialchars($data['year']) ?></span> <dd><?= htmlspecialchars($data['year']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['languages'])): ?> <?php if (!empty($data['languages'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Langue :</span> <dt>Langue :</dt>
<span class="value"><?= htmlspecialchars($data['languages']) ?></span> <dd><?= htmlspecialchars($data['languages']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['formats'])): ?> <?php if (!empty($data['formats'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Format :</span> <dt>Format :</dt>
<span class="value"><?= htmlspecialchars($data['formats']) ?></span> <dd><?= htmlspecialchars($data['formats']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['file_size_info'])): ?> <?php if (!empty($data['file_size_info'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Durée :</span> <dt>Durée :</dt>
<span class="value"><?= htmlspecialchars($data['file_size_info']) ?></span> <dd><?= htmlspecialchars($data['file_size_info']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['keywords'])): ?> <?php if (!empty($data['keywords'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Mots-clés :</span> <dt>Mots-clés :</dt>
<span class="value"><?= htmlspecialchars($data['keywords']) ?></span> <dd><?= htmlspecialchars($data['keywords']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['jury_president'])): ?> <?php if (!empty($data['jury_president'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Président·e du jury :</span> <dt>Président·e du jury :</dt>
<span class="value"><?= htmlspecialchars($data['jury_president']) ?></span> <dd><?= htmlspecialchars($data['jury_president']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['jury_promoteurs'])): ?> <?php if (!empty($data['jury_promoteurs'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Promoteur·ice :</span> <dt>Promoteur·ice :</dt>
<span class="value"><?= htmlspecialchars($data['jury_promoteurs']) ?></span> <dd><?= htmlspecialchars($data['jury_promoteurs']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['jury_lecteurs'])): ?> <?php if (!empty($data['jury_lecteurs'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Lecteur·ices :</span> <dt>Lecteur·ices :</dt>
<span class="value"><?= htmlspecialchars($data['jury_lecteurs']) ?></span> <dd><?= htmlspecialchars($data['jury_lecteurs']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['access_type'])): ?> <?php if (!empty($data['access_type'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Accès :</span> <dt>Accès :</dt>
<span class="value"><?= htmlspecialchars($data['access_type']) ?></span> <dd><?= htmlspecialchars($data['access_type']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['license_type'])): ?> <?php if (!empty($data['license_type'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Licence :</span> <dt>Licence :</dt>
<span class="value"><?= htmlspecialchars($data['license_type']) ?></span> <dd><?= htmlspecialchars($data['license_type']) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['context_note'])): ?> <?php if (!empty($data['context_note'])): ?>
<div class="tfe-meta-item" style="align-items:start;"> <div class="tfe-meta-note">
<span class="label">Note :</span> <dt>Note :</dt>
<span class="value" style="font-style:italic;"><?= nl2br(htmlspecialchars($data['context_note'])) ?></span> <dd class="tfe-note-value"><?= nl2br(htmlspecialchars($data['context_note'])) ?></dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data['baiu_link'])): ?> <?php if (!empty($data['baiu_link'])): ?>
<div class="tfe-meta-item"> <div>
<span class="label">Contact :</span> <dt>Contact :</dt>
<span class="value"> <dd>
<a href="<?= htmlspecialchars($data['baiu_link']) ?>" target="_blank" rel="noopener"> <a href="<?= htmlspecialchars($data['baiu_link']) ?>" target="_blank" rel="noopener">
<?= htmlspecialchars($data['baiu_link']) ?> <?= htmlspecialchars($data['baiu_link']) ?>
<span class="sr-only">(ouvre dans un nouvel onglet)</span>
</a> </a>
</span> </dd>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </dl>
<?php if (!empty($data['synopsis'])): ?> <?php if (!empty($data['synopsis'])): ?>
<div class="tfe-synopsis-text"> <p class="tfe-synopsis-text">
<?= nl2br(htmlspecialchars($data['synopsis'])) ?> <?= nl2br(htmlspecialchars($data['synopsis'])) ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
</header>
<div style="margin-top:1.5rem;"> <!-- RIGHT: media — supplementary aside -->
<a href="index.php" style="font-size:.88rem;color:#666;text-decoration:underline;text-underline-offset:2px;"> <aside class="tfe-right">
← Retour
</a>
</div>
</div>
<!-- RIGHT: media -->
<div class="tfe-right">
<?php <?php
// Determine effective access: need raw access_type_id
// The view exposes 'access_type' (name string). Fetch raw id for gate.
$accessTypeId = $db->getThesisAccessTypeId($thesisId) ?? 1; $accessTypeId = $db->getThesisAccessTypeId($thesisId) ?? 1;
$isInterdit = ($accessTypeId === 3); $isInterdit = ($accessTypeId === 3);
?> ?>
<?php if ($isInterdit): ?> <?php if ($isInterdit): ?>
<p class="tfe-no-files" style="color:#999;font-style:italic;"> <p class="tfe-restricted">
Ce TFE n'est pas disponible en ligne. Ce TFE n'est pas disponible en ligne.
</p> </p>
<?php elseif (!empty($data['files'])): ?> <?php elseif (!empty($data['files'])): ?>
<?php foreach ($data['files'] as $file): ?> <?php foreach ($data['files'] as $file): ?>
<?php $ext = strtolower(pathinfo($file['file_path'], PATHINFO_EXTENSION)); ?> <?php $ext = strtolower(pathinfo($file['file_path'], PATHINFO_EXTENSION)); ?>
<div class="tfe-media-block"> <figure class="tfe-media-block">
<?php if ($ext === 'pdf'): ?> <?php if ($ext === 'pdf'): ?>
<embed src="/media.php?path=<?= urlencode($file['file_path']) ?>" <embed src="/media.php?path=<?= urlencode($file['file_path']) ?>"
type="application/pdf" width="100%" height="700px"> type="application/pdf" width="100%" height="700px">
<p class="tfe-pdf-fallback">
<a href="/media.php?path=<?= urlencode($file['file_path']) ?>&download=1">
Télécharger le PDF
</a>
</p>
<?php elseif (in_array($ext, ['jpg','jpeg','png','gif','bmp','webp'])): ?> <?php elseif (in_array($ext, ['jpg','jpeg','png','gif','bmp','webp'])): ?>
<img src="/media.php?path=<?= urlencode($file['file_path']) ?>" <img src="/media.php?path=<?= urlencode($file['file_path']) ?>"
alt="<?= htmlspecialchars($file['file_name']) ?>"> alt="<?= htmlspecialchars(
!empty($file['description'])
? $file['description']
: ($data['title'] . ' — ' . ($data['authors'] ?? ''))
) ?>">
<?php elseif ($ext === 'mp4'): ?> <?php elseif ($ext === 'mp4'): ?>
<video width="100%" controls> <video width="100%" controls>
<source src="/media.php?path=<?= urlencode($file['file_path']) ?>" type="video/mp4"> <source src="/media.php?path=<?= urlencode($file['file_path']) ?>" type="video/mp4">
</video> </video>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($file['description'])): ?> <?php if (!empty($file['description'])): ?>
<p class="tfe-file-caption"><?= htmlspecialchars($file['description']) ?></p> <figcaption class="tfe-file-caption"><?= htmlspecialchars($file['description']) ?></figcaption>
<?php endif; ?> <?php endif; ?>
</div> </figure>
<?php endforeach; ?> <?php endforeach; ?>
<?php else: ?> <?php else: ?>
<p class="tfe-no-files">Aucun fichier disponible pour ce TFE.</p> <p class="tfe-no-files">Aucun fichier disponible pour ce TFE.</p>
<?php endif; // end !$isInterdit ?> <?php endif; ?>
</div> </aside>
</div> </article>
</main> </main>
</body> </body>

2
src/cache/rate_limit/ad921d60486366258809553a3db49a4a.json vendored
View File

@@ -1 +1 @@
[1774717688] [1774721459]

BIN
storage/posterg.db
View File

Binary file not shown.

BIN
storage/test.db
View File

Binary file not shown.