SFBadSteben/schachfreunde-badsteben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: extend news section with tag filtering, improved layout, and homepage integration

Browse Source 
Added tag filtering functionality to the blog and news sections, allowing users to filter posts by categories. Enhanced layout with improved tag display, author details, and responsive styling. Integrated the latest news preview into the homepage template. Adjusted visibility logic for navigation arrows in event carousel and refined related PHP snippets for better clarity and reusability.
This commit is contained in:
Tobias Feigel
2025-07-13 12:58:21 +02:00
parent 008cc8389f
commit 07814712d7
6 changed files with 134 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/snippets/home-news.php
+48
View File
@@ -0,0 +1,48 @@
<div class="py-16">
<h2>Neuigkeiten aus dem Verein</h2>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<?php foreach($news as $post): ?>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full">
<img src="<?= $post->image()->url() ?>" alt="" class="w-full h-64 rounded-xl object-cover" />
<div class="absolute inset-0 rounded-2xl inset-ring inset-ring-gray-900/10"></div>
</div>
<div class="flex max-w-xl grow flex-col justify-between">
<div class="mt-8 flex items-center gap-x-4 text-xs">
<time class="text-gray-500"><?= $post->date()->toDate("d.m.Y") ?></time>
<?php foreach($post->tags()->split() as $tag): ?>
<a href="<?= page('news')->url(['params' => ['tag' => $tag]]) ?>" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"><?= $tag ?></a>
<?php endforeach; ?>
</div>
<div class="group relative grow">
<h2>
<a href="<?= $post->url() ?>">
<span class="absolute inset-0"></span>
<?= $post->headline() ?>
</a>
</h2>
<p><?= $post->summary() ?></p>
</div>
<?php if ($user = $post->author()->toUser()): ?>
<div class="mt-6 flex border-t border-gray-900/5 pt-6">
<div class="relative flex items-center gap-x-4">
<img src="<?= $user->avatar()->url() ?>" alt="" class="size-10 rounded-full bg-gray-50" />
<div class="text-sm/6">
<p>
<a href="#">
<span class="absolute inset-0"></span>
<div class="text-xl">
<?= $user->username() ?>
</div>
</a>
</p>
<p class="text-sm"><?= $user->role()->title() ?></p>
</div>
</div>
</div>
<?php endif; ?>
</div>
</article>
<?php endforeach; ?>
</div>
</div>
site/snippets/termine-home.php → site/snippets/home-termine.php
+18 -12
View File
@@ -107,16 +107,28 @@
// Funktion zum Aktualisieren der Sichtbarkeit der Pfeile
function updateArrowVisibility() {
scrollLeftBtn.classList.toggle('opacity-50', currentPosition <= 0);
scrollRightBtn.classList.toggle('opacity-50', currentPosition >= maxPosition);
// Linker Pfeil nur anzeigen, wenn es vorherige Termine gibt
if (currentPosition <= 0) {
scrollLeftBtn.classList.add('hidden');
} else {
scrollLeftBtn.classList.remove('hidden');
}
// Rechter Pfeil nur anzeigen, wenn es weitere Termine gibt
if (currentPosition >= maxPosition) {
scrollRightBtn.classList.add('hidden');
} else {
scrollRightBtn.classList.remove('hidden');
}
}
// Initialisierung - verstecke die Pfeile wenn weniger als cardsToShow+1 Karten vorhanden sind
// Initialisierung - zeige die Pfeile nur, wenn es genug Karten gibt
if (totalCards <= cardsToShow) {
scrollLeftBtn.classList.add('hidden');
scrollRightBtn.classList.add('hidden');
} else {
scrollLeftBtn.classList.remove('hidden');
// Am Anfang ist der linke Pfeil ausgeblendet, da wir bei Position 0 sind
scrollLeftBtn.classList.add('hidden');
scrollRightBtn.classList.remove('hidden');
}
@@ -161,14 +173,8 @@
// Position aktualisieren
scrollToPosition();
// Pfeile aktualisieren
if (totalCards <= cardsToShow) {
scrollLeftBtn.classList.add('hidden');
scrollRightBtn.classList.add('hidden');
} else {
scrollLeftBtn.classList.remove('hidden');
scrollRightBtn.classList.remove('hidden');
}
// Pfeile-Sichtbarkeit aktualisieren
updateArrowVisibility();
});
});
</script>