mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
search.php: semantic HTML overhaul of répertoire index and results view
- Replace 4x <div class="repertoire-col"> with <section>; remove .repertoire-col__header class, CSS now targets section > h2 - Wrap all index link groups in <ul>/<li>; delete the four per-column link classes (year-index-item, cat-index-item, student-index-item, keyword-index-item); active state switches from .active to aria-current="page" on the <a> - Add <h1 class="sr-only">Répertoire</h1> so the index view has a page-level heading (WCAG 2.4.6) - Remove redundant <div class="search-results-view"> wrapper; padding moved to .results-grid and .search-results-header directly - Replace <div class="results-grid"> with <ul class="results-grid">; each result card becomes <li><a class="result-card"> - Replace <span class="result-card__meta"> with <small> (ancillary metadata per HTML spec) - Replace result-count <p> with <output role="status"> (computed value) - Replace 3x <div class="search-filter-group"><label>…</label><select> with <label> directly wrapping <select> (implicit association, removes .search-filter-group divs); CSS updated to display:flex on the label itself - Pagination wrapper changed to <nav aria-label="Pagination">; page-info span gets aria-current="page" - search.css: delete .search-results-view, four index-item classes, .cat-index-group, .search-filter-group; consolidate years/other column link styles under .repertoire-col:first-child ul a and .repertoire-col:not(:first-child) ul a selectors; add ul reset rule
This commit is contained in:
@@ -129,8 +129,7 @@ $extraCss = ['assets/search.css'];
|
||||
<form class="search-controls" method="GET" action="search.php">
|
||||
<input type="hidden" name="query" value="<?= htmlspecialchars($_GET['query'] ?? '') ?>">
|
||||
|
||||
<div class="search-filter-group">
|
||||
<label class="search-filter-label" for="filter-year">Année</label>
|
||||
<label class="search-filter-label" for="filter-year">Année
|
||||
<select class="search-filter-select" name="year" id="filter-year">
|
||||
<option value="">Toutes</option>
|
||||
<?php foreach ($years as $y): ?>
|
||||
@@ -139,10 +138,9 @@ $extraCss = ['assets/search.css'];
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="search-filter-group">
|
||||
<label class="search-filter-label" for="filter-orientation">Orientation</label>
|
||||
<label class="search-filter-label" for="filter-orientation">Orientation
|
||||
<select class="search-filter-select" name="orientation" id="filter-orientation">
|
||||
<option value="">Toutes</option>
|
||||
<?php foreach ($orientations as $o): ?>
|
||||
@@ -152,10 +150,9 @@ $extraCss = ['assets/search.css'];
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="search-filter-group">
|
||||
<label class="search-filter-label" for="filter-ap">AP</label>
|
||||
<label class="search-filter-label" for="filter-ap">AP
|
||||
<select class="search-filter-select" name="ap_program" id="filter-ap">
|
||||
<option value="">Tous</option>
|
||||
<?php foreach ($apPrograms as $ap): ?>
|
||||
@@ -165,91 +162,96 @@ $extraCss = ['assets/search.css'];
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<button type="submit" class="search-apply-btn">Filtrer</button>
|
||||
<a href="search.php" class="search-reset-link">Réinitialiser</a>
|
||||
</form>
|
||||
|
||||
<main class="search-main" id="main-content">
|
||||
<div class="search-results-view">
|
||||
<p class="search-results-header"><?= $totalItems ?> résultat<?= $totalItems > 1 ? 's' : '' ?></p>
|
||||
<output class="search-results-header" role="status"><?= $totalItems ?> résultat<?= $totalItems > 1 ? 's' : '' ?></output>
|
||||
|
||||
<?php if (!empty($results)): ?>
|
||||
<div class="results-grid">
|
||||
<ul class="results-grid">
|
||||
<?php foreach ($results as $item): ?>
|
||||
<a href="tfe.php?id=<?= (int)$item['id'] ?>" class="result-card">
|
||||
<li><a href="tfe.php?id=<?= (int)$item['id'] ?>" class="result-card">
|
||||
<span class="result-card__authors"><?= htmlspecialchars($item['authors'] ?? '') ?></span>
|
||||
<span class="result-card__title"><?= htmlspecialchars($item['title']) ?></span>
|
||||
<span class="result-card__meta"><?= htmlspecialchars($item['year']) ?><?php if (!empty($item['orientation'])): ?> · <?= htmlspecialchars($item['orientation']) ?><?php endif; ?></span>
|
||||
</a>
|
||||
<small class="result-card__meta"><?= htmlspecialchars($item['year']) ?><?php if (!empty($item['orientation'])): ?> · <?= htmlspecialchars($item['orientation']) ?><?php endif; ?></small>
|
||||
</a></li>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<?php if ($totalPages > 1): ?>
|
||||
<div class="pagination-wrap">
|
||||
<nav class="pagination-wrap" aria-label="Pagination">
|
||||
<a href="?<?= http_build_query(array_merge($_GET, ['page' => max(1, $page - 1)])) ?>"
|
||||
class="pagination-btn<?= $page <= 1 ? ' disabled' : '' ?>"
|
||||
<?= $page <= 1 ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||||
aria-label="Page précédente">‹</a>
|
||||
<span class="pagination-info"><?= $page ?> / <?= $totalPages ?></span>
|
||||
<span class="pagination-info" aria-current="page"><?= $page ?> / <?= $totalPages ?></span>
|
||||
<a href="?<?= http_build_query(array_merge($_GET, ['page' => min($totalPages, $page + 1)])) ?>"
|
||||
class="pagination-btn<?= $page >= $totalPages ? ' disabled' : '' ?>"
|
||||
<?= $page >= $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||||
aria-label="Page suivante">›</a>
|
||||
</div>
|
||||
</nav>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php else: ?>
|
||||
<p class="search-empty">Aucun résultat pour cette recherche.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php else: ?>
|
||||
<!-- ── RÉPERTOIRE INDEX VIEW ─────────────────────────── -->
|
||||
<main class="search-main" id="main-content">
|
||||
<h1 class="sr-only">Répertoire</h1>
|
||||
<div class="repertoire-index">
|
||||
|
||||
<!-- ANNÉES -->
|
||||
<div class="repertoire-col">
|
||||
<h2 class="repertoire-col__header">Années</h2>
|
||||
<section class="repertoire-col">
|
||||
<h2>Années</h2>
|
||||
<ul>
|
||||
<?php foreach ($years as $y): ?>
|
||||
<a href="search.php?year=<?= (int)$y ?>"
|
||||
class="year-index-item <?= (isset($_GET['year']) && $_GET['year'] == $y) ? 'active' : '' ?>">
|
||||
<li><a href="search.php?year=<?= (int)$y ?>"
|
||||
<?= (isset($_GET['year']) && $_GET['year'] == $y) ? 'aria-current="page"' : '' ?>>
|
||||
<?= (int)$y ?>
|
||||
</a>
|
||||
</a></li>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- CATÉGORIES -->
|
||||
<div class="repertoire-col">
|
||||
<h2 class="repertoire-col__header">Catégories</h2>
|
||||
<section class="repertoire-col">
|
||||
<h2>Catégories</h2>
|
||||
|
||||
<?php if (!empty($orientations)): ?>
|
||||
<span class="cat-index-label">Orientation</span>
|
||||
<ul>
|
||||
<?php foreach ($orientations as $o): ?>
|
||||
<a href="search.php?orientation=<?= urlencode($o['name']) ?>"
|
||||
class="cat-index-item <?= (isset($_GET['orientation']) && $_GET['orientation'] == $o['name']) ? 'active' : '' ?>">
|
||||
<li><a href="search.php?orientation=<?= urlencode($o['name']) ?>"
|
||||
<?= (isset($_GET['orientation']) && $_GET['orientation'] == $o['name']) ? 'aria-current="page"' : '' ?>>
|
||||
<?= htmlspecialchars($o['name']) ?>
|
||||
</a>
|
||||
</a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($apPrograms)): ?>
|
||||
<span class="cat-index-label">Ateliers Pluridisciplinaires</span>
|
||||
<ul>
|
||||
<?php foreach ($apPrograms as $ap): ?>
|
||||
<a href="search.php?ap_program=<?= urlencode($ap['name']) ?>"
|
||||
class="cat-index-item <?= (isset($_GET['ap_program']) && $_GET['ap_program'] == $ap['name']) ? 'active' : '' ?>">
|
||||
<li><a href="search.php?ap_program=<?= urlencode($ap['name']) ?>"
|
||||
<?= (isset($_GET['ap_program']) && $_GET['ap_program'] == $ap['name']) ? 'aria-current="page"' : '' ?>>
|
||||
<?= htmlspecialchars($ap['name']) ?>
|
||||
</a>
|
||||
</a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ÉTUDIANTES -->
|
||||
<div class="repertoire-col">
|
||||
<h2 class="repertoire-col__header">Étudiantes</h2>
|
||||
<section class="repertoire-col">
|
||||
<h2>Étudiantes</h2>
|
||||
<?php
|
||||
// Build unique author → thesis list
|
||||
$authorMap = [];
|
||||
@@ -264,23 +266,28 @@ $extraCss = ['assets/search.css'];
|
||||
}
|
||||
}
|
||||
ksort($authorMap);
|
||||
foreach ($authorMap as $name => $id): ?>
|
||||
<a href="tfe.php?id=<?= (int)$id ?>" class="student-index-item">
|
||||
?>
|
||||
<ul>
|
||||
<?php foreach ($authorMap as $name => $id): ?>
|
||||
<li><a href="tfe.php?id=<?= (int)$id ?>">
|
||||
<?= htmlspecialchars($name) ?>
|
||||
</a>
|
||||
</a></li>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- MOTS-CLÉS -->
|
||||
<div class="repertoire-col">
|
||||
<h2 class="repertoire-col__header">Mots-clés</h2>
|
||||
<section class="repertoire-col">
|
||||
<h2>Mots-clés</h2>
|
||||
<ul>
|
||||
<?php foreach ($keywords as $kw): ?>
|
||||
<a href="search.php?keyword=<?= urlencode($kw['name']) ?>"
|
||||
class="keyword-index-item <?= (isset($_GET['keyword']) && $_GET['keyword'] == $kw['name']) ? 'active' : '' ?>">
|
||||
<li><a href="search.php?keyword=<?= urlencode($kw['name']) ?>"
|
||||
<?= (isset($_GET['keyword']) && $_GET['keyword'] == $kw['name']) ? 'aria-current="page"' : '' ?>>
|
||||
<?= htmlspecialchars($kw['name']) ?>
|
||||
</a>
|
||||
</a></li>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user