niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Seitenleiste

Browse Source
This commit is contained in:
NOrtmann1
2026-07-17 17:20:54 +02:00
parent a712f5a993
commit bb2c368b1f
3 changed files with 186 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/showCategory.php
+51 -24
View File
@@ -1,28 +1,64 @@
<?php
include_once "php/controller/showCategory-controller.php";
$currentSort = isset($sortStyle) ? $sortStyle : 'alphabet';
$currentPage = isset($page) ? $page : 1;
?>
<div class="cat-view-container">
<!-- Das Formular umschließt jetzt das gesamte Layout -->
<form id="search-form-id" action="index.php" method="GET" style="display: contents;">
<input type="hidden" name="pfad" value="showCategory">
<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 $currentPage; ?>">
<div class="cat-view-container">
<!-- LINKE SPALTE: SEITENLEISTE FÜR SORTIERUNG -->
<aside class="cat-sidebar">
<div class="cat-sidebar-box">
<h3 class="cat-sidebar-title">Sortierung</h3>
<div class="cat-filter-group">
<label class="cat-filter-option">
<input type="radio" name="sort" value="alphabet" <?php echo ($currentSort === 'alphabet') ? 'checked' : ''; ?> onchange="this.form.submit();">
Alphabetisch
</label>
<label class="cat-filter-option">
<input type="radio" name="sort" value="likes" <?php echo ($currentSort === 'likes') ? 'checked' : ''; ?> onchange="this.form.submit();">
Beliebtheit (Likes)
</label>
<label class="cat-filter-option">
<input type="radio" name="sort" value="newest" <?php echo ($currentSort === 'newest') ? 'checked' : ''; ?> onchange="this.form.submit();">
Neueste Beiträge
</label>
<label class="cat-filter-option">
<input type="radio" name="sort" value="oldest" <?php echo ($currentSort === 'oldest') ? 'checked' : ''; ?> onchange="this.form.submit();">
Älteste Beiträge
</label>
</div>
</div>
</aside>
<!-- RECHTE SPALTE: INHALT & PAGINATOR -->
<main class="cat-view-main">
<div class="cat-view-header">
<!-- Kategorie-Titel sicher ausgeben -->
<h1 class="cat-view-title">Kategorie: <?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : 'Unbekannt'; ?></h1>
<p class="cat-view-meta-text">Beiträge in dieser Kategorie</p>
<p class="cat-view-meta-text">
<?php echo (isset($totalArticles)) ? $totalArticles : 0; ?> Treffer in dieser Kategorie
</p>
</div>
<!-- Die Artikel-Liste -->
<!-- Beiträge -->
<div class="cat-view-list">
<?php if (isset($articles) && !empty($articles)): ?>
<?php foreach ($articles as $article): ?>
<div class="cat-view-item">
<div class="cat-view-content">
<!-- Titel als klickbarer Link -->
<h2 class="cat-view-item-title">
<a href="#" class="cat-view-link">
<?php echo (isset($article) && !empty($article->getTitle())) ? htmlspecialchars($article->getTitle()) : 'Kein Titel'; ?>
</a>
</h2>
<!-- Meta-Zeile für Autor und Likes -->
<div class="cat-view-meta-row">
<p class="cat-view-author">
von <span class="cat-view-author-name"><?php echo (isset($article) && !empty($article->getAuthor())) ? htmlspecialchars($article->getAuthor()) : 'Anonym'; ?></span>
@@ -32,8 +68,10 @@ include_once "php/controller/showCategory-controller.php";
</span>
</div>
<p style="margin: 0; color: #4a5568;">
<?php echo (isset($article) && !empty($article->getContent())) ? htmlspecialchars($article->getContent()) : 'Kein Inhalt'; ?>
</p>
</div>
<!-- Interaktiver Pfeil rechts -->
<div class="cat-view-arrow">&rarr;</div>
</div>
<?php endforeach; ?>
@@ -42,28 +80,16 @@ include_once "php/controller/showCategory-controller.php";
<?php endif; ?>
</div>
<!-- Der Paginator -->
<!-- Footer Paginator -->
<?php if (isset($totalPages) && $totalPages > 1): ?>
<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;">
<input type="hidden" name="pfad" value="showCategory">
<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></div>
<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;
</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) ? 'cat-active-btn' : ''; ?>"
data-page="<?php echo $i; ?>"
@@ -72,12 +98,13 @@ include_once "php/controller/showCategory-controller.php";
</button>
<?php endfor; ?>
<!-- Vor-Button -->
<button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage + 1; ?>" <?php echo ($currentPage >= $totalPages) ? 'disabled' : ''; ?>>
&raquo;
</button>
</div>
</form>
</div>
<?php endif; ?>
</div>
</main>
</div>
</form>
css/showCategory.css
+60 -14
View File
@@ -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;
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;
php/controller/showCategory-controller.php
+25 -4
View File
@@ -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;