Update showCategory.php

content/showCategory.php

@@ -2,54 +2,53 @@
 include_once "php/controller/showCategory-controller.php";
 ?>
 
-<div class="s-res-main-content">
+<div class="cat-view-container">
-    <div class="s-res-header">
+    <div class="cat-view-header">
-        <!-- Kategorie-Titel im exakten Stil der Suchergebnisse -->
+        <!-- Kategorie-Titel sicher ausgeben -->
-        <h1 class="s-res-main-title">Kategorie: <?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : 'Unbekannt'; ?></h1>
+        <h1 class="cat-view-title">Kategorie: <?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : 'Unbekannt'; ?></h1>
-        <p class="s-res-meta">Beiträge in dieser Kategorie</p>
+        <p class="cat-view-meta-text">Beiträge in dieser Kategorie</p>
     </div>
 
     <!-- Die Artikel-Liste  -->
-    <div class="s-res-list">
+    <div class="cat-view-list">
         <?php if (isset($articles) && !empty($articles)): ?>
             <?php foreach ($articles as $article): ?>
-                <div class="s-res-item">
+                <div class="cat-view-item">
-                    <div class="s-res-content">
+                    <div class="cat-view-content">
-                        <!-- Titel als klickbarer Link wie im Original -->
+                        <!-- Titel als klickbarer Link -->
-                        <h2 class="s-res-item-title">
+                        <h2 class="cat-view-item-title">
-                            <a href="#" class="s-res-link">
+                            <a href="#" class="cat-view-link">
                                 <?php echo (isset($article) && !empty($article->getTitle())) ? htmlspecialchars($article->getTitle()) : 'Kein Titel'; ?>
                             </a>
                         </h2>
 
-                        <!-- Die fehlende Meta-Zeile für Autor und Likes für das richtige Design -->
+                        <!-- Meta-Zeile für Autor und Likes -->
-                        <div class="s-res-meta-row">
+                        <div class="cat-view-meta-row">
-                            <p class="s-res-author">
+                            <p class="cat-view-author">
-                                von <span class="s-res-author-name"><?php echo (isset($article) && !empty($article->getAuthor())) ? htmlspecialchars($article->getAuthor()) : 'Anonym'; ?></span>
+                                von <span class="cat-view-author-name"><?php echo (isset($article) && !empty($article->getAuthor())) ? htmlspecialchars($article->getAuthor()) : 'Anonym'; ?></span>
                             </p>
-                            <!-- Likes Anzeige (Falls dein Objekt getLikes() oder getLikeCount() hat) -->
+                            <span class="cat-view-likes">
-                            <span class="s-res-likes">
                                 &#x2764; <?php echo (isset($article) && !empty($article->getLikes())) ? htmlspecialchars($article->getLikes()) : '0'; ?>
                             </span>
                         </div>
 
                         <!-- Beschreibungstext -->
-                        <p style="margin-top: 0.5rem; color: #4a5568;">
+                        <p style="margin: 0; color: #4a5568;">
                             <?php echo (isset($article) && !empty($article->getContent())) ? htmlspecialchars($article->getContent()) : 'Kein Inhalt'; ?>
                         </p>
                     </div>
-                    <!-- Der originale Pfeil rechts -->
+                    <!-- Interaktiver Pfeil rechts -->
-                    <div class="s-res-arrow">&rarr;</div>
+                    <div class="cat-view-arrow">&rarr;</div>
                 </div>
             <?php endforeach; ?>
         <?php else: ?>
-            <p class="s-res-meta">Keine Artikel in dieser Kategorie gefunden.</p>
+            <p class="cat-view-meta-text">Keine Artikel in dieser Kategorie gefunden.</p>
         <?php endif; ?>
     </div>
 
-    <!-- Der Paginator -->
+    <!-- Der Paginator  -->
     <?php if (isset($totalPages) && $totalPages > 1): ?>
-        <div class="s-res-pagination-footer">
+        <div class="cat-view-pagination-footer">
             <div></div> <!-- Hält die Buttons auf der rechten Seite -->
 
             <form id="search-form-id" action="index.php" method="GET" style="display: inline;">
@@ -57,21 +56,27 @@ include_once "php/controller/showCategory-controller.php";
                 <input type="hidden" name="category" value="<?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : ''; ?>">
                 <input type="hidden" id="s-res-page-input" name="page" value="<?php echo (isset($page) && !empty($page)) ? $page : 1; ?>">
 
+                <!-- JS benötigt die Klasse 's-res-page-navigation' -->
                 <div class="s-res-page-navigation">
                     <?php $currentPage = $page ?? 1; ?>
+
+                    <!-- Zurück-Button (Nutzt JS-Klasse 's-res-page-btn') -->
                     <button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage - 1; ?>" <?php echo ($currentPage <= 1) ? 'disabled' : ''; ?>>
                         &laquo; Zurück
                     </button>
 
+                    <!-- Seitenzahlen generieren -->
                     <?php for ($i = 1; $i <= $totalPages; $i++): ?>
+                        <!-- Der aktive Button erhält zusätzlich die neue Klasse 'cat-active-btn' -->
                         <button type="button"
-                                class="s-res-page-btn <?php echo ($i === $currentPage) ? 's-res-page-btn-active' : ''; ?>"
+                                class="s-res-page-btn <?php echo ($i === $currentPage) ? 'cat-active-btn' : ''; ?>"
                                 data-page="<?php echo $i; ?>"
                                 <?php echo ($i === $currentPage) ? 'disabled' : ''; ?>>
                             <?php echo $i; ?>
                         </button>
                     <?php endfor; ?>
 
+                    <!-- Vor-Button -->
                     <button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage + 1; ?>" <?php echo ($currentPage >= $totalPages) ? 'disabled' : ''; ?>>
                         Weiter &raquo;
                     </button>

css/showCategory.css

@@ -0,0 +1,157 @@
+/* --- NEUES LAYOUT FÜR KATEGORIEN --- */
+.cat-view-container {
+    min-width: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    color: #212529;
+    line-height: 1.5;
+}
+
+.cat-view-header {
+    margin-bottom: 2rem;
+    border-bottom: 2px solid #dee2e6;
+    padding-bottom: 1rem;
+}
+
+.cat-view-title {
+    font-size: 2rem;
+    color: #1a202c;
+    margin: 0 0 0.5rem 0;
+    font-weight: 700;
+}
+
+.cat-view-meta-text {
+    color: #6c757d;
+    font-size: 0.95rem;
+    margin: 0;
+}
+
+/* --- LISTE DER BEITRÄGE --- */
+.cat-view-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+/* Einzelne Beitrags-Box */
+.cat-view-item {
+    background-color: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 1.25rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.cat-view-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    border-color: #cbd5e1;
+}
+
+.cat-view-content {
+    flex: 1;
+}
+
+.cat-view-item-title {
+    font-size: 1.25rem;
+    margin: 0 0 0.25rem 0;
+    font-weight: 600;
+}
+
+.cat-view-link {
+    color: #3182ce;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.cat-view-link:hover {
+    text-decoration: underline;
+    color: #2b6cb0;
+}
+
+/* Meta-Zeile für Autor & Likes */
+.cat-view-meta-row {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.cat-view-author {
+    font-size: 0.875rem;
+    color: #4a5568;
+    margin: 0;
+}
+
+.cat-view-author-name {
+    font-weight: 600;
+    color: #2d3748;
+}
+
+.cat-view-likes {
+    font-size: 0.9em;
+    color: #475569;
+}
+
+.cat-view-arrow {
+    font-size: 1.5rem;
+    color: #a0aec0;
+    padding-left: 1rem;
+    transition: color 0.2s ease, transform 0.2s ease;
+}
+
+.cat-view-item:hover .cat-view-arrow {
+    color: #3182ce;
+    transform: translateX(3px);
+}
+
+/* --- PAGINATOR FOOTER --- */
+.cat-view-pagination-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #e2e8f0;
+}
+
+/* Styling der Buttons (Zugeordnet zu den JS-Klassen) */
+.cat-view-pagination-footer .s-res-page-navigation {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.cat-view-pagination-footer .s-res-page-btn {
+    background-color: #ffffff;
+    border: 1px solid #cbd5e1;
+    color: #4a5568;
+    padding: 0.35rem 0.75rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.cat-view-pagination-footer .s-res-page-btn:hover:not(:disabled) {
+    background-color: #f8f9fa;
+    border-color: #cbd5e1;
+    color: #2d3748;
+}
+
+/* Aktiver Button-Zustand */
+.cat-view-pagination-footer .cat-active-btn {
+    background-color: #3182ce;
+    border-color: #3182ce;
+    color: #ffffff;
+    cursor: default;
+}
+
+.cat-view-pagination-footer .s-res-page-btn:disabled:not(.cat-active-btn) {
+    background-color: #f1f5f9;
+    border-color: #e2e8f0;
+    color: #94a3b8;
+    cursor: not-allowed;
+}

index.php

@@ -63,6 +63,7 @@ if ($pfad === "deleteAccount") {
         <link rel="stylesheet" href="css/profile.css">
         <link rel="stylesheet" href="css/showArticle.css">
         <link rel="stylesheet" href="css/message.css">
+        <link rel="stylesheet" href="css/showCategory.css">
 
         <script src="js/paginator.js" async></script>
         <script src="js/sorter.js" async></script>