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

Restructures news snippet for improved layout

Browse Source 
Refactors the news snippet to enhance its visual appearance and layout.

Changes include:
- Switching to a flexbox-based layout for improved responsiveness.
- Adding an aspect ratio to the images.
- Displaying author information, including avatar and role.
- Adding a button to clear the tag filter.
This commit is contained in:
Tobias Feigel
2025-09-06 11:51:23 +02:00
parent ded4f91e7d
commit d848d09800
1 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/snippets/home-news.php
+47 -38
View File
@@ -1,48 +1,57 @@
<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">
<?php foreach($news as $post): ?>
<article class="relative flex flex-col gap-8 lg:flex-row py-12">
<div class="relative aspect-video sm:aspect-2/1 lg:aspect-square lg:w-64 lg:shrink-0">
<img src="<?= $post->image()->url() ?>" alt="" class="absolute inset-0 size-full rounded-xl object-cover" />
<div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
</div>
<div>
<div class="flex items-center gap-x-4 text-m justify-between">
<div>
<time class="text-gray-500"><?= $post->date()->toDate("d.m.Y") ?></time>
</div>
<div>
<?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 class="group relative">
<h2>
<a href="<?= $post->url() ?>" class="relative">
<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>
<span class="absolute inset-0"></span>
<div class="text-xl">
<?= $user->username() ?>
</div>
</p>
<p class="text-sm"><?= $user->role()->title() ?></p>
</div>
</div>
</div>
<?php endif ?>
</div>
</article>
<?php endforeach ?>
<?php if(param('tag')): ?>
<div class="my-8">
<a href="<?= $page->url() ?>" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded">
Alle Beiträge anzeigen
</a>
</div>
<?php endif ?>
</div>