mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 11:09:18 +02:00
ac872c1fe0
Replace presentational divs in index.php and main.css with elements that carry correct semantic meaning, fixing multiple WCAG 2.1 AA issues: index.php: - <div class="cards-container"> → <ul class="cards-container"> (list of navigable items) - <a class="card-link"><div class="card">…</div></a> → <li class="card"><a> (block link is the <a>, <li> is the container; removes the redundant .card div wrapper) - <div class="card__media"> → <figure class="card__media"> when wrapping an <img>; gradient placeholder stays as <div> (presentational, aria-hidden) - Improved alt text: "Couverture — [title] par [authors]" instead of bare title - Removed <div class="card__info"> wrapper; caption is now a bare <p class="card__caption"> directly inside the <a> - <div class="filter-info"> → <p class="filter-info" role="status"> (live-region semantics; announces filter state to screen readers) - ✕ symbol in clear-filter link wrapped in <span aria-hidden="true"> - Gradient placeholder div gets aria-hidden="true" (decorative; caption below carries text) - Empty-state <p style="…"> → <li class="cards-empty"> (removes inline style) - <div class="pagination-wrap"> → <nav class="pagination-wrap" aria-label="Pagination"> with <ul>/<li> children; page-info <span> → <li aria-current="page"> main.css: - .cards-container: add list-style:none; margin:0; padding:0 (reset <ul> defaults) - Remove .card-link rule; replace with .card > a (block flex link, no separate class) - .card__media: add margin:0 to reset <figure> default margin - Remove .card__info rules; rename .authors to .card__caption with same styles - Add .cards-empty rule (removes last inline style from index.php) - .pagination-wrap: restructured for <nav>/<ul>; inner <ul> carries the flex layout - prefers-reduced-motion: add .card__media--gradient guard WCAG criteria addressed: 1.1.1 (alt text), 1.3.1 (info & relationships via semantic list/figure), 2.4.1 (filter-info now live region), role="status" on filter banner.
169 lines
7.2 KiB
PHP
169 lines
7.2 KiB
PHP
<?php
|
||
// Load configuration
|
||
require_once __DIR__ . '/../config/bootstrap.php';
|
||
require_once APP_ROOT . '/src/Database.php';
|
||
|
||
$page = isset($_GET["page"]) ? max(1, intval($_GET["page"])) : 1;
|
||
$year = isset($_GET["year"]) ? intval($_GET["year"]) : null;
|
||
$itemsPerPage = 24;
|
||
|
||
// Default home view: random theses from latest year (no year filter, no explicit page)
|
||
$isDefaultView = (!$year && $page === 1);
|
||
|
||
try {
|
||
$db = Database::getInstance();
|
||
$offset = ($page - 1) * $itemsPerPage;
|
||
$availableYears = $db->getAvailableYears();
|
||
|
||
if ($year) {
|
||
$itemsToLoad = $db->searchTheses(['year' => $year], $itemsPerPage, $offset);
|
||
$totalItems = $db->countSearchResults(['year' => $year]);
|
||
} elseif ($isDefaultView) {
|
||
$latestYear = $db->getLatestPublishedYear();
|
||
$itemsToLoad = $db->getLatestYearTheses($itemsPerPage);
|
||
$totalItems = count($itemsToLoad); // no pagination on default view
|
||
} else {
|
||
$itemsToLoad = $db->getPublishedTheses($itemsPerPage, $offset);
|
||
$totalItems = $db->countPublishedTheses();
|
||
}
|
||
|
||
$totalPages = $isDefaultView ? 1 : (int)ceil($totalItems / $itemsPerPage);
|
||
|
||
// Batch-load cover images for theses that have no banner_path
|
||
$coverMap = [];
|
||
if (!empty($itemsToLoad)) {
|
||
$needCover = array_column(
|
||
array_filter($itemsToLoad, fn($t) => empty($t['banner_path'])),
|
||
'id'
|
||
);
|
||
$coverMap = $db->getCoverPathsForTheses($needCover);
|
||
}
|
||
} catch (Exception $e) {
|
||
error_log("Error loading theses: " . $e->getMessage());
|
||
$itemsToLoad = [];
|
||
$totalPages = 0;
|
||
$availableYears = [];
|
||
$totalItems = 0;
|
||
$latestYear = null;
|
||
$isDefaultView = false;
|
||
$coverMap = [];
|
||
}
|
||
|
||
$currentNav = '';
|
||
$pageTitle = 'Posterg – Mémoires de l\'ERG';
|
||
$metaDescription = 'Posterg répertorie et valorise les mémoires de fin d\'études (TFE) de l\'erg – École de Recherches Graphiques de Bruxelles.';
|
||
$ogTags = [
|
||
'type' => 'website',
|
||
'title' => $pageTitle,
|
||
'description' => $metaDescription,
|
||
'url' => 'https://posterg.erg.be/',
|
||
'site_name' => 'Posterg – ERG',
|
||
];
|
||
$extraCss = ['assets/main.css'];
|
||
?>
|
||
<?php include APP_ROOT . '/templates/public/head.php'; ?>
|
||
<body class="home-body">
|
||
<a href="#main-content" class="skip-link">Aller au contenu principal</a>
|
||
|
||
<?php include APP_ROOT . '/templates/nav.php'; ?>
|
||
<?php include APP_ROOT . '/templates/search-bar.php'; ?>
|
||
|
||
<?php if ($year): ?>
|
||
<p class="filter-info" role="status">
|
||
Année : <?= htmlspecialchars($year) ?>
|
||
<a href="index.php" class="clear-filter"><span aria-hidden="true">✕</span> Réinitialiser</a>
|
||
</p>
|
||
<?php elseif ($isDefaultView && !empty($latestYear)): ?>
|
||
<p class="filter-info home-latest-label" role="status">
|
||
Découvrez les TFE de <?= (int)$latestYear ?> — sélection aléatoire
|
||
</p>
|
||
<?php endif; ?>
|
||
|
||
<main class="home-main" id="main-content">
|
||
<ul class="cards-container">
|
||
<?php foreach ($itemsToLoad as $item): ?>
|
||
<li class="card">
|
||
<a href="tfe.php?id=<?= (int)$item["id"] ?>">
|
||
<?php
|
||
// Resolve thumbnail: banner_path → cover file → gradient placeholder
|
||
$thumb = null;
|
||
|
||
// 1. Banner path (dedicated home thumbnail)
|
||
if (!empty($item['banner_path'])) {
|
||
$thumb = $item['banner_path'];
|
||
}
|
||
|
||
// 2. Cover image from thesis_files (batch-loaded above)
|
||
if (!$thumb && isset($coverMap[$item['id']])) {
|
||
$thumb = $coverMap[$item['id']];
|
||
}
|
||
|
||
// 3. Fall through to gradient
|
||
?>
|
||
<?php if ($thumb): ?>
|
||
<figure class="card__media">
|
||
<img src="/media.php?path=<?= urlencode($thumb) ?>"
|
||
alt="Couverture — <?= htmlspecialchars($item['title']) ?> par <?= htmlspecialchars($item['authors'] ?? '') ?>"
|
||
loading="lazy">
|
||
</figure>
|
||
<?php else: ?>
|
||
<?php
|
||
$hue = ($item['id'] * 47 + 160) % 360;
|
||
$hue2 = ($hue + 40) % 360;
|
||
?>
|
||
<div class="card__media card__media--gradient"
|
||
style="background:linear-gradient(135deg,hsl(<?= $hue ?>,55%,40%),hsl(<?= $hue2 ?>,50%,28%));"
|
||
aria-hidden="true">
|
||
<span class="card__gradient-author"><?= htmlspecialchars($item['authors'] ?? '') ?></span>
|
||
<span class="card__gradient-title"><?= htmlspecialchars($item['title']) ?></span>
|
||
</div>
|
||
<?php endif; ?>
|
||
<p class="card__caption"><?= htmlspecialchars($item["authors"] ?? '') ?><?php if (!empty($item['authors']) && !empty($item['title'])): ?> – <?php endif; ?><?= htmlspecialchars($item["title"]) ?></p>
|
||
</a>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
|
||
<?php if (empty($itemsToLoad)): ?>
|
||
<li class="cards-empty">Aucun mémoire trouvé.</li>
|
||
<?php endif; ?>
|
||
</ul>
|
||
|
||
<?php if ($totalPages > 1): ?>
|
||
<nav class="pagination-wrap" aria-label="Pagination">
|
||
<?php $yearParam = $year ? '&year=' . (int)$year : ''; ?>
|
||
<ul>
|
||
<li>
|
||
<a href="?page=1<?= $yearParam ?>"
|
||
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
|
||
<?= $page <= 1 ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||
aria-label="Première page">«</a>
|
||
</li>
|
||
<li>
|
||
<a href="?page=<?= max(1, $page - 1) . $yearParam ?>"
|
||
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
|
||
<?= $page <= 1 ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||
aria-label="Page précédente">‹</a>
|
||
</li>
|
||
<li class="pagination-info" aria-current="page">
|
||
<span class="page-current"><?= $page ?></span> / <?= $totalPages ?>
|
||
</li>
|
||
<li>
|
||
<a href="?page=<?= min($totalPages, $page + 1) . $yearParam ?>"
|
||
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
|
||
<?= $page >= $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||
aria-label="Page suivante">›</a>
|
||
</li>
|
||
<li>
|
||
<a href="?page=<?= $totalPages . $yearParam ?>"
|
||
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
|
||
<?= $page >= $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||
aria-label="Dernière page">»</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<?php endif; ?>
|
||
</main>
|
||
|
||
</body>
|
||
</html>
|