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

public/admin/index.php

@@ -1,7 +1,7 @@
 <?php
 // Bootstrap application
 require_once __DIR__ . "/../../config/bootstrap.php";
-require_once __DIR__ . '/../../lib/AdminAuth.php';
+require_once __DIR__ . '/../../src/AdminAuth.php';
 
 // PHP-level auth guard (defence-in-depth behind nginx Basic Auth)
 AdminAuth::requireLogin();

public/assets/main.css

@@ -127,16 +127,68 @@ header nav a {
 
 main {
   background: #3c856bff;
-  display: grid;
+  position: relative;
-  grid-template-rows: repeat(2, minmax(0, 1fr));
-  grid-auto-flow: column;
-  grid-auto-columns: 260px;
-  gap: 1rem;
   padding: 1rem;
   box-sizing: border-box;
-  overflow-x: auto;
+  overflow: hidden;
-  overflow-y: hidden;
+  display: flex;
-  scroll-snap-type: x mandatory;
+  flex-direction: column;
+}
+
+.cards-container {
+  display: grid;
+  gap: 0.75rem;
+  flex: 1;
+  min-height: 0;
+  padding: 0.5rem;
+  overflow: hidden;
+}
+
+/* Default: 3 rows × 4 columns = 12 items */
+.cards-container {
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-flow: row;
+}
+
+/* Small screens: 2 rows × 3 columns = 6 items */
+@media (max-width: 1200px) {
+  .cards-container {
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Medium screens: 3 rows × 4 columns = 12 items */
+@media (min-width: 1201px) and (max-width: 1500px) {
+  .cards-container {
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Large screens: 3 rows × 6 columns = 18 items */
+@media (min-width: 1701px) {
+  .cards-container {
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+/* Extra large screens: 4 rows × 6 columns = 24 items */
+@media (min-width: 2000px) {
+  .cards-container {
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+/* Mobile placeholder (will adjust later) */
+@media (max-width: 768px) {
+  .cards-container {
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 .card-link {
@@ -148,14 +200,17 @@ main {
 
 .card {
   background: #eee;
-  border-radius: 10px;
+  border-radius: 8px;
-  padding: 1rem;
+  padding: 0.5rem;
-  scroll-snap-align: start;
   height: 100%;
+  width: 100%;
   box-sizing: border-box;
   transition: transform 0.2s, box-shadow 0.2s;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
 }
 
 .card:hover {
@@ -166,30 +221,61 @@ main {
 .card-content {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.3rem;
+  height: 100%;
+  overflow: hidden;
 }
 
 .card .title {
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 600;
   margin: 0;
-  line-height: 1.3;
+  line-height: 1.15;
   color: #333;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .card .authors {
-  font-size: 0.9rem;
+  font-size: 0.65rem;
   margin: 0;
   color: #666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .card .year {
-  font-size: 0.85rem;
+  font-size: 0.65rem;
   margin: 0;
   color: #9557b5;
   font-weight: 600;
 }
 
+.card .tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.2rem;
+  margin-top: auto;
+  padding-top: 0.2rem;
+}
+
+.card .tag {
+  font-size: 0.55rem;
+  padding: 0.15rem 0.25rem;
+  background: rgba(149, 87, 181, 0.15);
+  color: #7a3d95;
+  border-radius: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  font-weight: 500;
+}
+
 footer {
   background: #222222ff;
   overflow: hidden;
@@ -253,11 +339,13 @@ footer {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 0.75rem;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
-  margin: 1rem auto;
+  margin-top: 1rem;
   width: fit-content;
+  align-self: center;
+  flex-shrink: 0;
 }
 
 .pagination-btn {

public/index.php

@@ -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,6 +44,7 @@ include APP_ROOT . '/templates/header.php';
 <?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">
@@ -50,6 +52,16 @@ include APP_ROOT . '/templates/header.php';
                         <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>
@@ -58,10 +70,10 @@ include APP_ROOT . '/templates/header.php';
         <?php if (empty($itemsToLoad)): ?>
             <p>Aucun mémoire trouvé.</p>
         <?php endif; ?>
-</main>
+    </div>
 
-<?php if ($totalPages > 1): ?>
+    <?php if ($totalPages > 1): ?>
-<nav class="pagination">
+    <nav class="pagination">
         <?php 
         $yearParam = $year ? '&year=' . (int)$year : '';
         ?>
@@ -95,7 +107,8 @@ include APP_ROOT . '/templates/header.php';
            <?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
             ››
         </a>
-</nav>
+    </nav>
-<?php endif; ?>
+    <?php endif; ?>
+</main>
 
 <?php include APP_ROOT . '/templates/footer.php'; ?>