Improve card layout: move pagination inside main, add responsive grid (3 rows × 4 cols = 12 items), display keywords as tags, optimize text sizes and spacing

This commit is contained in:
Théophile Gervreau-Mercier
2026-02-12 13:12:00 +01:00
parent 73b0093b26
commit 061b2b540e
3 changed files with 172 additions and 71 deletions

View File

@@ -6,7 +6,8 @@ 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;
// Default to 12 items (4 cols × 3 rows)
$itemsPerPage = 12;
try {
$db = Database::getInstance();
@@ -43,59 +44,71 @@ include APP_ROOT . '/templates/header.php';
<?php endif; ?>
<main>
<?php foreach ($itemsToLoad as $item): ?>
<a href="tfe.php?id=<?= (int)$item["id"] ?>" class="card-link">
<div class="card">
<div class="card-content">
<h2 class="title"><?= htmlspecialchars($item["title"]) ?></h2>
<p class="authors"><?= htmlspecialchars($item["authors"]) ?></p>
<p class="year"><?= htmlspecialchars($item["year"]) ?></p>
<div class="cards-container">
<?php foreach ($itemsToLoad as $item): ?>
<a href="tfe.php?id=<?= (int)$item["id"] ?>" class="card-link">
<div class="card">
<div class="card-content">
<h2 class="title"><?= htmlspecialchars($item["title"]) ?></h2>
<p class="authors"><?= htmlspecialchars($item["authors"]) ?></p>
<p class="year"><?= htmlspecialchars($item["year"]) ?></p>
<?php if (!empty($item["keywords"])): ?>
<div class="tags">
<?php
$keywords = explode(',', $item["keywords"]);
foreach (array_slice($keywords, 0, 3) as $keyword):
?>
<span class="tag"><?= htmlspecialchars(trim($keyword)) ?></span>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
</a>
<?php endforeach; ?>
</a>
<?php endforeach; ?>
<?php if (empty($itemsToLoad)): ?>
<p>Aucun mémoire trouvé.</p>
<?php if (empty($itemsToLoad)): ?>
<p>Aucun mémoire trouvé.</p>
<?php endif; ?>
</div>
<?php if ($totalPages > 1): ?>
<nav class="pagination">
<?php
$yearParam = $year ? '&year=' . (int)$year : '';
?>
<a href="?page=1<?= $yearParam ?>"
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
<?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
</a>
<a href="?page=<?= max(1, (int)($page - 1)) . $yearParam ?>"
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
<?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
</a>
<span class="pagination-info">
<span class="page-current"><?= (int)$page ?></span>
<span class="page-separator">/</span>
<span class="page-total"><?= (int)$totalPages ?></span>
</span>
<a href="?page=<?= min($totalPages, (int)($page + 1)) . $yearParam ?>"
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
<?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
</a>
<a href="?page=<?= $totalPages . $yearParam ?>"
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
<?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
</a>
</nav>
<?php endif; ?>
</main>
<?php if ($totalPages > 1): ?>
<nav class="pagination">
<?php
$yearParam = $year ? '&year=' . (int)$year : '';
?>
<a href="?page=1<?= $yearParam ?>"
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
<?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
</a>
<a href="?page=<?= max(1, (int)($page - 1)) . $yearParam ?>"
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
<?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
</a>
<span class="pagination-info">
<span class="page-current"><?= (int)$page ?></span>
<span class="page-separator">/</span>
<span class="page-total"><?= (int)$totalPages ?></span>
</span>
<a href="?page=<?= min($totalPages, (int)($page + 1)) . $yearParam ?>"
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
<?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
</a>
<a href="?page=<?= $totalPages . $yearParam ?>"
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
<?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
</a>
</nav>
<?php endif; ?>
<?php include APP_ROOT . '/templates/footer.php'; ?>