diff --git a/content/showCategory.php b/content/showCategory.php index a684f21..89aa42a 100644 --- a/content/showCategory.php +++ b/content/showCategory.php @@ -1,32 +1,114 @@ -
- + -

+ +
+ + + -
- - -
-
-

- - getTitle()); ?> - -

-

Von: getAuthor()); ?>

-
-
→
+
+ + +
+ -
\ No newline at end of file + +
+
+

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.

+ +
+ + + 1): ?> +
+
+
+ + + + + + + +
+
+ +
+ + + diff --git a/css/showCategory.css b/css/showCategory.css new file mode 100644 index 0000000..f6e1835 --- /dev/null +++ b/css/showCategory.css @@ -0,0 +1,227 @@ +/* --- ZWEISPALTIIGES GRID-LAYOUT --- */ +.cat-view-container { + box-sizing: border-box; + max-width: 95%; /* 95% Monitorbreite wie das Original */ + width: 95%; + margin: 2rem auto; + padding: 0 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + color: #212529; + line-height: 1.5; + + /* Grid für die Zweispaltigkeit */ + display: grid; + grid-template-columns: 320px 1fr; /* 320px Sidebar, Rest für Content */ + gap: 2.5rem; +} + +.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; + 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; +} + +/* --- BEITRÄGE LISTE --- */ +.cat-view-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.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; +} + +.cat-view-link:hover { + text-decoration: underline; + color: #2b6cb0; +} + +.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); +} + +/* --- FOOTER PAGINATION --- */ +.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; +} + +.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; +} + +.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; +} + +/* 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; + } + .cat-view-pagination-footer { + flex-direction: column; + gap: 1rem; + align-items: flex-start; + } +} diff --git a/index.php b/index.php index ba19ad2..c9a5cfb 100644 --- a/index.php +++ b/index.php @@ -63,6 +63,7 @@ if ($pfad === "deleteAccount") { + diff --git a/php/controller/showCategory-controller.php b/php/controller/showCategory-controller.php index e14bd7e..df2f1ca 100644 --- a/php/controller/showCategory-controller.php +++ b/php/controller/showCategory-controller.php @@ -1,19 +1,60 @@ getArticlesByCategory($category); + $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; + $totalPages = ceil($totalArticles / $limit); + if ($page > $totalPages && $totalPages > 0) { $page = $totalPages; } + + $offset = ($page - 1) * $limit; + $articles = array_slice($allArticles, $offset, $limit); + } catch (Exception $e) { $_SESSION["message"] = "internal_error"; include_once "content/404.php"; exit(); } -}else{ +} else { $_SESSION["message"] = "invalid_category"; include_once "content/404.php"; exit();