diff --git a/content/showCategory.php b/content/showCategory.php index d78afbb..a9f1489 100644 --- a/content/showCategory.php +++ b/content/showCategory.php @@ -1,83 +1,110 @@ -
-
- -

Kategorie:

-

Beiträge in dieser Kategorie

-
+ +
+ + + - -
- - -
-
- -

- - getTitle())) ? htmlspecialchars($article->getTitle()) : 'Kein Titel'; ?> - -

+
- -
-

- von getAuthor())) ? htmlspecialchars($article->getAuthor()) : 'Anonym'; ?> -

- - ❤️ getLikes())) ? htmlspecialchars($article->getLikes()) : '0'; ?> - + + + + +
+
+

Kategorie:

+

+ Treffer in dieser Kategorie +

+
+ + +
+ + +
+
+

+ + getTitle())) ? htmlspecialchars($article->getTitle()) : 'Kein Titel'; ?> + +

+ +
+

+ von getAuthor())) ? htmlspecialchars($article->getAuthor()) : 'Anonym'; ?> +

+ + ❤️ getLikes())) ? htmlspecialchars($article->getLikes()) : '0'; ?> + +
+ +

+ getContent())) ? htmlspecialchars($article->getContent()) : 'Kein Inhalt'; ?> +

+
+
→
+ + +

Keine Artikel in dieser Kategorie gefunden.

+ +
-
- -
→
-
- - -

Keine Artikel in dieser Kategorie gefunden.

- -
- - - 1): ?> -
-
- - - - - - - -
- - - - - - - - - - - - + + + + + +
- -
- -
+ + + +
+ diff --git a/css/showCategory.css b/css/showCategory.css index 575920b..f6e1835 100644 --- a/css/showCategory.css +++ b/css/showCategory.css @@ -1,21 +1,72 @@ -/* --- NEUES LAYOUT FÜR KATEGORIEN --- */ +/* --- ZWEISPALTIIGES GRID-LAYOUT --- */ .cat-view-container { box-sizing: border-box; - max-width: 95%; + max-width: 95%; /* 95% Monitorbreite wie das Original */ width: 95%; - margin: 2rem auto; + margin: 2rem auto; padding: 0 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #212529; line-height: 1.5; - min-width: 0; + + /* Grid für die Zweispaltigkeit */ + display: grid; + grid-template-columns: 320px 1fr; /* 320px Sidebar, Rest für Content */ + gap: 2.5rem; } -/* Verhindert Verzerren durch globale Styles im inneren Bereich */ .cat-view-container * { box-sizing: border-box; } +/* --- SEITENLEISTE (SORTIERUNG) --- */ +.cat-sidebar { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.cat-sidebar-box { + background-color: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 8px; + padding: 1.25rem; +} + +.cat-sidebar-title { + font-size: 1rem; + font-weight: 700; + color: #1a202c; + margin: 0 0 1rem 0; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.cat-filter-group { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.cat-filter-option { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + font-size: 0.95rem; + color: #4a5568; +} + +.cat-filter-option input[type="radio"] { + margin: 0; + accent-color: #3182ce; +} + +/* --- HAUPTINHALT --- */ +.cat-view-main { + min-width: 0; +} + .cat-view-header { margin-bottom: 2rem; border-bottom: 2px solid #dee2e6; @@ -35,14 +86,13 @@ margin: 0; } -/* --- LISTE DER BEITRÄGE --- */ +/* --- BEITRÄGE LISTE --- */ .cat-view-list { display: flex; flex-direction: column; gap: 1rem; } -/* Einzelne Beitrags-Box */ .cat-view-item { background-color: #ffffff; border: 1px solid #e2e8f0; @@ -73,7 +123,6 @@ .cat-view-link { color: #3182ce; text-decoration: none; - transition: color 0.2s ease; } .cat-view-link:hover { @@ -81,7 +130,6 @@ color: #2b6cb0; } -/* Meta-Zeile für Autor & Likes */ .cat-view-meta-row { display: flex; gap: 15px; @@ -117,7 +165,7 @@ transform: translateX(3px); } -/* --- PAGINATOR FOOTER --- */ +/* --- FOOTER PAGINATION --- */ .cat-view-pagination-footer { display: flex; justify-content: space-between; @@ -127,7 +175,6 @@ 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; @@ -151,7 +198,6 @@ color: #2d3748; } -/* Aktiver Button-Zustand */ .cat-view-pagination-footer .cat-active-btn { background-color: #3182ce; border-color: #3182ce; @@ -166,12 +212,12 @@ cursor: not-allowed; } -/* Responsive Anpassungen unter 768px (Smartphones) */ +/* RESPONSIVE ANPASSUNG (Unter 768px) */ @media (max-width: 768px) { .cat-view-container { + grid-template-columns: 1fr; /* Stapelt Sidebar und Inhalt untereinander */ + gap: 1.5rem; margin: 1rem auto; - width: 100%; - max-width: 100%; } .cat-view-pagination-footer { flex-direction: column; diff --git a/php/controller/showCategory-controller.php b/php/controller/showCategory-controller.php index 1410e08..df2f1ca 100644 --- a/php/controller/showCategory-controller.php +++ b/php/controller/showCategory-controller.php @@ -10,19 +10,40 @@ require_once 'php/validator/article-validator.php'; if (isset($_GET["category"]) && !empty($_GET["category"]) && articleCategoryValidator($_GET["category"])){ $category = $_GET["category"]; + // Sortierung auslesen (Standard: alphabet) + $sortStyle = isset($_GET['sort']) ? trim($_GET['sort']) : 'alphabet'; + + // Aktuelle Seite auslesen $page = isset($_GET['page']) ? (int)$_GET['page'] : 1; if ($page < 1) { $page = 1; } try { $articleManager = ArticleManager::getInstance(); - $allArticles = $articleManager->getArticlesByCategory($category); + $totalArticles = count($allArticles); + + // --- SORTIERUNG LOGIK --- + if ($sortStyle === 'alphabet') { + usort($allArticles, function($a, $b) { + return strcasecmp($a->getTitle(), $b->getTitle()); + }); + } elseif ($sortStyle === 'likes') { + usort($allArticles, function($a, $b) { + return $b->getLikes() <=> $a->getLikes(); // Absteigend nach Likes + }); + } elseif ($sortStyle === 'newest') { + usort($allArticles, function($a, $b) { + return strtotime($b->getCreationDate()) <=> strtotime($a->getCreationDate()); // Neueste zuerst + }); + } elseif ($sortStyle === 'oldest') { + usort($allArticles, function($a, $b) { + return strtotime($a->getCreationDate()) <=> strtotime($b->getCreationDate()); // Älteste zuerst + }); + } // Paginierung konfigurieren - $limit = 10; // Wie viele Artikel pro Seite? - $totalArticles = count($allArticles); + $limit = 10; $totalPages = ceil($totalArticles / $limit); - if ($page > $totalPages && $totalPages > 0) { $page = $totalPages; } $offset = ($page - 1) * $limit; @@ -38,4 +59,4 @@ if (isset($_GET["category"]) && !empty($_GET["category"]) && articleCategoryVali include_once "content/404.php"; exit(); } -?> +?> \ No newline at end of file