mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 11:09:18 +02:00
feat: add year filter to main index
- Footer now displays all available years horizontally with scroll
- Click on year filters thesis list to that year
- Active year highlighted in footer
- 'Tous' link to reset filter
- Filter info banner shows when year selected with reset button
- Pagination preserves year filter
- Styled with horizontal scroll, smooth scrollbar
- Tests passing ✅
This commit is contained in:
@@ -22,7 +22,6 @@
|
||||
/* } */
|
||||
|
||||
body {
|
||||
background-color: yellow;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -82,7 +81,7 @@ label[type="button"] {
|
||||
margin-top: 2rem;
|
||||
font-size: 16px;
|
||||
border-radius: 10px;
|
||||
padding: 2ch;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
a {
|
||||
color: black;
|
||||
|
||||
@@ -13,7 +13,8 @@ main {
|
||||
height: 60vh;
|
||||
}
|
||||
footer {
|
||||
height: 20vh;
|
||||
height: 10vh;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -51,6 +52,33 @@ header .title, header section, header nav {
|
||||
text-decoration: none;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
/* Filter info banner */
|
||||
.filter-info {
|
||||
background: rgba(149, 87, 181, 0.9);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.clear-filter {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 15px;
|
||||
font-size: 0.85rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.clear-filter:hover {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
main {
|
||||
height: 60vh;
|
||||
|
||||
@@ -80,6 +108,57 @@ main {
|
||||
|
||||
footer {
|
||||
background: #222222ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Years navigation in footer */
|
||||
.years-nav {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.years-scroll {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-behavior: smooth;
|
||||
padding: 0.5rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Hide scrollbar but keep functionality */
|
||||
.years-scroll::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.years-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.years-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.year-link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.year-link:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.year-link.active {
|
||||
background: #9557b5ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* .card { */
|
||||
|
||||
@@ -5,23 +5,43 @@ require_once APP_ROOT . '/src/Database.php';
|
||||
|
||||
$pageTitle = "Liste des TFE";
|
||||
$page = isset($_GET["page"]) ? intval($_GET["page"]) : 1;
|
||||
$year = isset($_GET["year"]) ? intval($_GET["year"]) : null;
|
||||
$itemsPerPage = 10;
|
||||
|
||||
try {
|
||||
$db = Database::getInstance();
|
||||
$offset = ($page - 1) * $itemsPerPage;
|
||||
$itemsToLoad = $db->getPublishedTheses($itemsPerPage, $offset);
|
||||
$totalItems = $db->countPublishedTheses();
|
||||
|
||||
// Get available years for footer
|
||||
$availableYears = $db->getAvailableYears();
|
||||
|
||||
// Filter by year if specified
|
||||
if ($year) {
|
||||
$itemsToLoad = $db->searchTheses(['year' => $year], $itemsPerPage, $offset);
|
||||
$totalItems = $db->countSearchResults(['year' => $year]);
|
||||
} else {
|
||||
$itemsToLoad = $db->getPublishedTheses($itemsPerPage, $offset);
|
||||
$totalItems = $db->countPublishedTheses();
|
||||
}
|
||||
|
||||
$totalPages = ceil($totalItems / $itemsPerPage);
|
||||
} catch (Exception $e) {
|
||||
error_log("Error loading theses: " . $e->getMessage());
|
||||
$itemsToLoad = [];
|
||||
$totalPages = 0;
|
||||
$availableYears = [];
|
||||
}
|
||||
|
||||
include APP_ROOT . '/templates/header.php';
|
||||
?>
|
||||
|
||||
<?php if ($year): ?>
|
||||
<div class="filter-info">
|
||||
Année : <?= htmlspecialchars($year) ?>
|
||||
<a href="index.php" class="clear-filter">✕ Réinitialiser</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<main>
|
||||
<?php foreach ($itemsToLoad as $item): ?>
|
||||
<a href="memoire.php?id=<?= (int)$item["id"] ?>" class="card-link">
|
||||
@@ -42,12 +62,15 @@ include APP_ROOT . '/templates/header.php';
|
||||
|
||||
<?php if ($totalPages > 1): ?>
|
||||
<nav class="pagination">
|
||||
<?php
|
||||
$yearParam = $year ? '&year=' . (int)$year : '';
|
||||
?>
|
||||
<?php if ($page > 1): ?>
|
||||
<a href="?page=<?= (int)($page - 1) ?>" class="pagination-previous">Précédent</a>
|
||||
<a href="?page=<?= (int)($page - 1) . $yearParam ?>" class="pagination-previous">Précédent</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($page < $totalPages): ?>
|
||||
<a href="?page=<?= (int)($page + 1) ?>" class="pagination-next">Suivant</a>
|
||||
<a href="?page=<?= (int)($page + 1) . $yearParam ?>" class="pagination-next">Suivant</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<span class="pagination-info">Page <?= (int)$page ?> sur <?= (int)$totalPages ?></span>
|
||||
|
||||
@@ -1 +1 @@
|
||||
[1770894924]
|
||||
[1770895586]
|
||||
@@ -1,11 +1,17 @@
|
||||
<!-- footer.php -->
|
||||
<footer>
|
||||
<div>
|
||||
<button>Année</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>Cursus</button>
|
||||
</div>
|
||||
<nav class="years-nav">
|
||||
<div class="years-scroll">
|
||||
<?php if (!empty($availableYears)): ?>
|
||||
<a href="index.php" class="year-link <?= !isset($year) ? 'active' : '' ?>">Tous</a>
|
||||
<?php foreach ($availableYears as $y): ?>
|
||||
<a href="index.php?year=<?= (int)$y ?>" class="year-link <?= isset($year) && $year == $y ? 'active' : '' ?>">
|
||||
<?= htmlspecialchars($y) ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user