Redesign UI to match target design images

- Flat purple-gradient nav bar with POSTERG/RÉPERTOIRE/À PROPOS links
- Full-width search bar with icon, bottom-border only, below nav
- Home: white bg, media card grid (thumbnail + author/title label below)
- Répertoire: 4-column index (Années/Catégories/Étudiantes/Mots-clés)
- TFE: 2-column layout (large text left, media right)
- À Propos: 2-column, large monospace text, new apropos.php page
- Admin: dark theme (#1a1a1a), purple gradient nav, bottom-border inputs
- New shared partials: templates/nav.php, templates/search-bar.php
- Rewrote all CSS: common, main, search, tfe, apropos, admin
This commit is contained in:
Pontoporeia
2026-02-24 23:34:16 +01:00
parent eaad740574
commit 2110d2b916
22 changed files with 2459 additions and 3043 deletions

View File

@@ -3,20 +3,15 @@
require_once __DIR__ . '/../config/bootstrap.php';
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;
// Default to 12 items (4 cols × 3 rows)
$itemsPerPage = 12;
$itemsPerPage = 24; // bigger grid
try {
$db = Database::getInstance();
$offset = ($page - 1) * $itemsPerPage;
// 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]);
@@ -24,91 +19,109 @@ try {
$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 = [];
$totalItems = 0;
}
include APP_ROOT . '/templates/header.php';
$currentNav = '';
?>
<?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>
<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>
</a>
<?php endforeach; ?>
<?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>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Posterg</title>
<link rel="stylesheet" href="assets/modern-normalize.min.css">
<link rel="stylesheet" href="assets/common.css">
<link rel="stylesheet" href="assets/main.css">
<?php if (php_sapi_name() === 'cli-server'): ?>
<script>
(function poll() {
fetch('/live-reload.php').then(r=>r.json()).then(d=>{
if(d.changed) location.reload(); else setTimeout(poll,1000);
}).catch(()=>setTimeout(poll,2000));
})();
</script>
<?php endif; ?>
</main>
</head>
<body class="home-body">
<?php include APP_ROOT . '/templates/footer.php'; ?>
<?php include APP_ROOT . '/templates/nav.php'; ?>
<?php include APP_ROOT . '/templates/search-bar.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 class="home-main">
<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__media">
<?php
// Use first image/video file as thumbnail
$thumb = null;
if (!empty($item['files'])) {
foreach ($item['files'] as $f) {
$ext = strtolower(pathinfo($f['file_path'], PATHINFO_EXTENSION));
if (in_array($ext, ['jpg','jpeg','png','gif','webp'])) {
$thumb = $f['file_path'];
break;
}
}
}
// Also check cover image
if (!$thumb && !empty($item['cover_image'])) {
$thumb = $item['cover_image'];
}
?>
<?php if ($thumb): ?>
<img src="/media.php?path=<?= urlencode($thumb) ?>"
alt="<?= htmlspecialchars($item['title']) ?>"
loading="lazy">
<?php else: ?>
<div class="card__media--placeholder">◻</div>
<?php endif; ?>
</div>
<div class="card__info">
<p class="authors"><?= htmlspecialchars($item["authors"] ?? '') ?><?php if (!empty($item['authors']) && !empty($item['title'])): ?> <?php endif; ?><?= htmlspecialchars($item["title"]) ?></p>
</div>
</div>
</a>
<?php endforeach; ?>
<?php if (empty($itemsToLoad)): ?>
<p style="padding:2rem;color:#666;">Aucun mémoire trouvé.</p>
<?php endif; ?>
</div>
<?php if ($totalPages > 1): ?>
<div class="pagination-wrap">
<?php $yearParam = $year ? '&year=' . (int)$year : ''; ?>
<a href="?page=1<?= $yearParam ?>"
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>">«</a>
<a href="?page=<?= max(1, $page - 1) . $yearParam ?>"
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"></a>
<span class="pagination-info">
<span class="page-current"><?= $page ?></span> / <?= $totalPages ?>
</span>
<a href="?page=<?= min($totalPages, $page + 1) . $yearParam ?>"
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"></a>
<a href="?page=<?= $totalPages . $yearParam ?>"
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>">»</a>
</div>
<?php endif; ?>
</main>
</body>
</html>