mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-07 03:29:19 +02:00
répertoire: rename search.php, 6-column layout, HTMX filter, faded entries disabled, URL-shareable
This commit is contained in:
Pontoporeia
@@ -1,5 +1,5 @@
|
||||
/* ============================================================
|
||||
RÉPERTOIRE / SEARCH PAGE (search.php)
|
||||
RÉPERTOIRE / SEARCH PAGE (repertoire.php)
|
||||
============================================================ */
|
||||
|
||||
@import url("./variables.css");
|
||||
@@ -18,16 +18,33 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ---- 4-column index layout ---- */
|
||||
/* ---- 6-column index layout ---- */
|
||||
.repertoire-index {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 2fr 1.5fr;
|
||||
grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr;
|
||||
gap: 0;
|
||||
padding: 0 1.5rem;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 1024px) {
|
||||
.repertoire-index {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 0 1rem;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.repertoire-col {
|
||||
border-right: 1px solid var(--border-secondary);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.repertoire-col:nth-child(3n) {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.repertoire-index {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0 1rem;
|
||||
@@ -72,50 +89,85 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Years column - big bold numbers */
|
||||
.repertoire-col:first-child ul a {
|
||||
/* ---- rep-entry: shared base (button + link variants) ---- */
|
||||
.rep-entry {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.1rem 0;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s, opacity 0.15s;
|
||||
}
|
||||
|
||||
.rep-entry:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Link variant (students col) — no underline by default */
|
||||
.rep-entry--link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Selected: accent color */
|
||||
.rep-entry--selected {
|
||||
color: var(--accent-primary) !important;
|
||||
}
|
||||
|
||||
/* Faded/disabled: muted, not interactive */
|
||||
.rep-entry--faded {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Years column — big bold numbers */
|
||||
.repertoire-col[data-col="years"] .rep-entry {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
padding: 0.1rem 0;
|
||||
transition: color 0.15s;
|
||||
letter-spacing: -0.02em;
|
||||
padding: 0.05rem 0;
|
||||
}
|
||||
|
||||
.repertoire-col:first-child ul a:hover,
|
||||
.repertoire-col:first-child ul a[aria-current] {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Categories column */
|
||||
.cat-index-label {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
margin-bottom: 0.15rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
/* Categories, students, keywords columns — shared link style */
|
||||
.repertoire-col:not(:first-child) ul a {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
/* Empty state in students column */
|
||||
.rep-empty {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.9rem;
|
||||
padding: 0.1rem 0;
|
||||
line-height: 1.4;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.repertoire-col:not(:first-child) ul a:hover,
|
||||
.repertoire-col:not(:first-child) ul a[aria-current] {
|
||||
color: var(--accent-primary);
|
||||
/* ---- HTMX loading indicator ---- */
|
||||
.rep-indicator {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--accent-primary);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rep-indicator.htmx-request {
|
||||
opacity: 1;
|
||||
animation: rep-progress 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes rep-progress {
|
||||
0% { transform: scaleX(0); transform-origin: left; }
|
||||
50% { transform: scaleX(0.7); transform-origin: left; }
|
||||
100% { transform: scaleX(1); transform-origin: left; }
|
||||
}
|
||||
|
||||
/* ---- Search results view (grid) ---- */
|
||||
@@ -165,35 +217,6 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Toggle button (index/results) */
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.view-toggle__btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.78rem;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.view-toggle__btn.active,
|
||||
.view-toggle__btn:hover {
|
||||
background: var(--accent-primary);
|
||||
color: var(--accent-foreground);
|
||||
}
|
||||
|
||||
/* Search controls bar */
|
||||
.search-controls {
|
||||
display: flex;
|
||||
@@ -205,7 +228,6 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* label now wraps the select directly — flex aligns label text + select */
|
||||
.search-filter-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -256,7 +278,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Search results pagination — reuses same token names as main.css */
|
||||
/* Search results pagination */
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
1
public/assets/js/htmx.min.js
vendored
Normal file
1
public/assets/js/htmx.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -5,7 +5,7 @@ require_once APP_ROOT . '/src/SearchController.php';
|
||||
// Build controller (performs rate-limit check; exits with HTTP 429 if exceeded)
|
||||
$ctrl = SearchController::create();
|
||||
|
||||
// Collect all view variables
|
||||
// Collect all view variables (may exit early if HTMX partial request)
|
||||
extract($ctrl->handle());
|
||||
?>
|
||||
<?php include APP_ROOT . '/templates/head.php'; ?>
|
||||
@@ -19,7 +19,7 @@ extract($ctrl->handle());
|
||||
<!-- ── RESULTS VIEW ─────────────────────────────────── -->
|
||||
|
||||
<!-- Filter controls -->
|
||||
<form class="search-controls" method="GET" action="search.php">
|
||||
<form class="search-controls" method="GET" action="repertoire.php">
|
||||
<input type="hidden" name="query" value="<?= htmlspecialchars($_GET['query'] ?? '') ?>">
|
||||
|
||||
<label class="search-filter-label" for="filter-year">Année
|
||||
@@ -58,7 +58,7 @@ extract($ctrl->handle());
|
||||
</label>
|
||||
|
||||
<button type="submit" class="search-apply-btn">Filtrer</button>
|
||||
<a href="search.php" class="search-reset-link">Réinitialiser</a>
|
||||
<a href="repertoire.php" class="search-reset-link">Réinitialiser</a>
|
||||
</form>
|
||||
|
||||
<main class="search-main" id="main-content">
|
||||
@@ -86,77 +86,10 @@ extract($ctrl->handle());
|
||||
<!-- ── RÉPERTOIRE INDEX VIEW ─────────────────────────── -->
|
||||
<main class="search-main" id="main-content">
|
||||
<h1 class="sr-only">Répertoire</h1>
|
||||
<div class="repertoire-index">
|
||||
|
||||
<!-- ANNÉES -->
|
||||
<section class="repertoire-col">
|
||||
<h2>Années</h2>
|
||||
<ul>
|
||||
<?php foreach ($years as $y): ?>
|
||||
<li><a href="search.php?year=<?= (int)$y ?>"
|
||||
<?= (isset($_GET['year']) && $_GET['year'] == $y) ? 'aria-current="page"' : '' ?>>
|
||||
<?= (int)$y ?>
|
||||
</a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- CATÉGORIES -->
|
||||
<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): ?>
|
||||
<li><a href="search.php?orientation=<?= urlencode($o['name']) ?>"
|
||||
<?= (isset($_GET['orientation']) && $_GET['orientation'] == $o['name']) ? 'aria-current="page"' : '' ?>>
|
||||
<?= htmlspecialchars($o['name']) ?>
|
||||
</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): ?>
|
||||
<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></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
|
||||
<!-- ÉTUDIANTES -->
|
||||
<section class="repertoire-col">
|
||||
<h2>Étudiantes</h2>
|
||||
<ul>
|
||||
<?php foreach ($authorMap as $name => $id): ?>
|
||||
<li><a href="tfe.php?id=<?= (int)$id ?>">
|
||||
<?= htmlspecialchars($name) ?>
|
||||
</a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- MOTS-CLÉS -->
|
||||
<section class="repertoire-col">
|
||||
<h2>Mots-clés</h2>
|
||||
<ul>
|
||||
<?php foreach ($keywords as $kw): ?>
|
||||
<li><a href="search.php?keyword=<?= urlencode($kw['name']) ?>"
|
||||
<?= (isset($_GET['keyword']) && $_GET['keyword'] == $kw['name']) ? 'aria-current="page"' : '' ?>>
|
||||
<?= htmlspecialchars($kw['name']) ?>
|
||||
</a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<span id="rep-indicator" class="rep-indicator htmx-indicator" aria-hidden="true"></span>
|
||||
<?php include APP_ROOT . '/templates/partials/repertoire-index.php'; ?>
|
||||
</main>
|
||||
<script src="/assets/js/htmx.min.js"></script>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php include APP_ROOT . '/templates/footer.php'; ?>
|
||||
Reference in New Issue
Block a user