mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
tfe.php: full semantic HTML overhaul
- 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
149
public/tfe.php
149
public/tfe.php
@@ -28,174 +28,179 @@ $extraCss = ['assets/tfe.css'];
|
||||
<?php include APP_ROOT . '/templates/search-bar.php'; ?>
|
||||
|
||||
<main class="tfe-main" id="main-content">
|
||||
<div class="tfe-layout">
|
||||
<article class="tfe-layout">
|
||||
|
||||
<!-- LEFT: info -->
|
||||
<div class="tfe-left">
|
||||
<h1 class="tfe-author"><?= htmlspecialchars($data['authors'] ?? 'Auteur inconnu') ?></h1>
|
||||
<!-- LEFT: info — article header -->
|
||||
<header class="tfe-left">
|
||||
<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']) ?>
|
||||
<?php if (!empty($data['subtitle'])): ?>
|
||||
– <?= htmlspecialchars($data['subtitle']) ?>
|
||||
<?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'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Orientation :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['orientation']) ?></span>
|
||||
<div>
|
||||
<dt>Orientation :</dt>
|
||||
<dd><?= htmlspecialchars($data['orientation']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['ap_program'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Atelier pluridisciplinaire :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['ap_program']) ?></span>
|
||||
<div>
|
||||
<dt>Atelier pluridisciplinaire :</dt>
|
||||
<dd><?= htmlspecialchars($data['ap_program']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['year'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Date :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['year']) ?></span>
|
||||
<div>
|
||||
<dt>Date :</dt>
|
||||
<dd><?= htmlspecialchars($data['year']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['languages'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Langue :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['languages']) ?></span>
|
||||
<div>
|
||||
<dt>Langue :</dt>
|
||||
<dd><?= htmlspecialchars($data['languages']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['formats'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Format :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['formats']) ?></span>
|
||||
<div>
|
||||
<dt>Format :</dt>
|
||||
<dd><?= htmlspecialchars($data['formats']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['file_size_info'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Durée :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['file_size_info']) ?></span>
|
||||
<div>
|
||||
<dt>Durée :</dt>
|
||||
<dd><?= htmlspecialchars($data['file_size_info']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['keywords'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Mots-clés :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['keywords']) ?></span>
|
||||
<div>
|
||||
<dt>Mots-clés :</dt>
|
||||
<dd><?= htmlspecialchars($data['keywords']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['jury_president'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Président·e du jury :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['jury_president']) ?></span>
|
||||
<div>
|
||||
<dt>Président·e du jury :</dt>
|
||||
<dd><?= htmlspecialchars($data['jury_president']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['jury_promoteurs'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Promoteur·ice :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['jury_promoteurs']) ?></span>
|
||||
<div>
|
||||
<dt>Promoteur·ice :</dt>
|
||||
<dd><?= htmlspecialchars($data['jury_promoteurs']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['jury_lecteurs'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Lecteur·ices :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['jury_lecteurs']) ?></span>
|
||||
<div>
|
||||
<dt>Lecteur·ices :</dt>
|
||||
<dd><?= htmlspecialchars($data['jury_lecteurs']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['access_type'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Accès :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['access_type']) ?></span>
|
||||
<div>
|
||||
<dt>Accès :</dt>
|
||||
<dd><?= htmlspecialchars($data['access_type']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['license_type'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Licence :</span>
|
||||
<span class="value"><?= htmlspecialchars($data['license_type']) ?></span>
|
||||
<div>
|
||||
<dt>Licence :</dt>
|
||||
<dd><?= htmlspecialchars($data['license_type']) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['context_note'])): ?>
|
||||
<div class="tfe-meta-item" style="align-items:start;">
|
||||
<span class="label">Note :</span>
|
||||
<span class="value" style="font-style:italic;"><?= nl2br(htmlspecialchars($data['context_note'])) ?></span>
|
||||
<div class="tfe-meta-note">
|
||||
<dt>Note :</dt>
|
||||
<dd class="tfe-note-value"><?= nl2br(htmlspecialchars($data['context_note'])) ?></dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($data['baiu_link'])): ?>
|
||||
<div class="tfe-meta-item">
|
||||
<span class="label">Contact :</span>
|
||||
<span class="value">
|
||||
<div>
|
||||
<dt>Contact :</dt>
|
||||
<dd>
|
||||
<a href="<?= htmlspecialchars($data['baiu_link']) ?>" target="_blank" rel="noopener">
|
||||
<?= htmlspecialchars($data['baiu_link']) ?>
|
||||
<span class="sr-only">(ouvre dans un nouvel onglet)</span>
|
||||
</a>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<?php if (!empty($data['synopsis'])): ?>
|
||||
<div class="tfe-synopsis-text">
|
||||
<p class="tfe-synopsis-text">
|
||||
<?= nl2br(htmlspecialchars($data['synopsis'])) ?>
|
||||
</div>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
|
||||
<div style="margin-top:1.5rem;">
|
||||
<a href="index.php" style="font-size:.88rem;color:#666;text-decoration:underline;text-underline-offset:2px;">
|
||||
← Retour
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: media -->
|
||||
<div class="tfe-right">
|
||||
<!-- RIGHT: media — supplementary aside -->
|
||||
<aside class="tfe-right">
|
||||
<?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;
|
||||
$isInterdit = ($accessTypeId === 3);
|
||||
?>
|
||||
<?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.
|
||||
</p>
|
||||
<?php elseif (!empty($data['files'])): ?>
|
||||
<?php foreach ($data['files'] as $file): ?>
|
||||
<?php $ext = strtolower(pathinfo($file['file_path'], PATHINFO_EXTENSION)); ?>
|
||||
<div class="tfe-media-block">
|
||||
<figure class="tfe-media-block">
|
||||
<?php if ($ext === 'pdf'): ?>
|
||||
<embed src="/media.php?path=<?= urlencode($file['file_path']) ?>"
|
||||
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'])): ?>
|
||||
<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'): ?>
|
||||
<video width="100%" controls>
|
||||
<source src="/media.php?path=<?= urlencode($file['file_path']) ?>" type="video/mp4">
|
||||
</video>
|
||||
<?php endif; ?>
|
||||
<?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; ?>
|
||||
</div>
|
||||
</figure>
|
||||
<?php endforeach; ?>
|
||||
<?php else: ?>
|
||||
<p class="tfe-no-files">Aucun fichier disponible pour ce TFE.</p>
|
||||
<?php endif; // end !$isInterdit ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user