tfeigel
d848d09800
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.
57 lines
2.5 KiB
PHP
57 lines
2.5 KiB
PHP
<div class="py-16">
|
|
<h2>Neuigkeiten aus dem Verein</h2>
|
|
<?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>
|
|
<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>
|