Kategorieseitenpaginator #50
+98
-16
@@ -1,32 +1,114 @@
|
||||
<?php
|
||||
include_once "php/controller/showCategory-controller.php";
|
||||
|
||||
$currentSort = isset($sortStyle) ? $sortStyle : 'alphabet';
|
||||
$currentPage = isset($page) ? $page : 1;
|
||||
?>
|
||||
|
||||
<main>
|
||||
<?php include_once "includes/alertMessages.php"?>
|
||||
<noscript>
|
||||
Bitte JavaScript aktivieren!
|
||||
</noscript>
|
||||
|
||||
<h1><?php if (isset($category) && !empty($category)){ echo htmlspecialchars($category); } ?></h1>
|
||||
<!-- 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="s-res-list">
|
||||
<?php
|
||||
if (!empty($articles)): ?>
|
||||
<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">
|
||||
<h1 class="cat-view-title">Kategorie: <?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : 'Unbekannt'; ?></h1>
|
||||
<p class="cat-view-meta-text">
|
||||
<?php echo (isset($totalArticles)) ? $totalArticles : 0; ?> Treffer in dieser Kategorie
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Beiträge -->
|
||||
<div class="cat-view-list">
|
||||
<?php if (isset($articles) && !empty($articles)): ?>
|
||||
<?php foreach ($articles as $article): ?>
|
||||
<div class="s-res-item">
|
||||
<div class="s-res-content">
|
||||
<h2 class="s-res-item-title">
|
||||
<a href="index.php?pfad=showArticle&id=<?php echo $article->getId(); ?>" class="s-res-link">
|
||||
<?php echo htmlspecialchars($article->getTitle()); ?>
|
||||
<div class="cat-view-item">
|
||||
<div class="cat-view-content">
|
||||
<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>
|
||||
<p class="s-res-author">Von: <span class="s-res-author-name"><?php echo htmlspecialchars($article->getAuthor()); ?></span></p>
|
||||
|
||||
<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>
|
||||
</p>
|
||||
<span class="cat-view-likes">
|
||||
❤️ <?php echo (isset($article) && !empty($article->getLikes())) ? htmlspecialchars($article->getLikes()) : '0'; ?>
|
||||
</span>
|
||||
</div>
|
||||
<div class="s-res-arrow">→</div>
|
||||
|
||||
<p style="margin: 0; color: #4a5568;">
|
||||
<?php echo (isset($article) && !empty($article->getContent())) ? htmlspecialchars($article->getContent()) : 'Kein Inhalt'; ?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="cat-view-arrow">→</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php
|
||||
else: ?>
|
||||
<p> Es sind noch keine Beiträge in dieser Kategorie enthalten.</p>
|
||||
<?php else: ?>
|
||||
<p class="cat-view-meta-text">Keine Artikel in dieser Kategorie gefunden.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Footer Paginator -->
|
||||
<?php if (isset($totalPages) && $totalPages > 1): ?>
|
||||
<div class="cat-view-pagination-footer">
|
||||
<div></div>
|
||||
<div class="s-res-page-navigation">
|
||||
<button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage - 1; ?>" <?php echo ($currentPage <= 1) ? 'disabled' : ''; ?>>
|
||||
«
|
||||
</button>
|
||||
|
||||
<?php for ($i = 1; $i <= $totalPages; $i++): ?>
|
||||
<button type="button"
|
||||
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; ?>
|
||||
|
||||
<button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage + 1; ?>" <?php echo ($currentPage >= $totalPages) ? 'disabled' : ''; ?>>
|
||||
»
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -1,13 +1,54 @@
|
||||
<?php
|
||||
if (session_status() === PHP_SESSION_NONE) {
|
||||
session_start();
|
||||
}
|
||||
|
||||
require_once 'php/model/Article.php';
|
||||
require_once 'php/model/ArticleManager.php';
|
||||
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();
|
||||
$articles = $articleManager->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";
|
||||
|
||||
Reference in New Issue
Block a user