Clickable bubbles to filter

This commit is contained in:
hbrain 2026-06-05 02:20:52 +02:00
parent 761ba48030
commit a3bbc8417f

View file

@ -448,6 +448,9 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
#videos .video-info .description{margin-top:0}
.meta a{color:inherit;text-decoration:none}
.meta a:hover{text-decoration:underline}
.meta-filter{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .5rem;border-radius:999px;background:rgba(255,255,255,.06);cursor:pointer;user-select:none;transition:background-color .15s ease,transform .15s ease}
.meta-filter:hover,.meta-filter:focus-visible{background:rgba(255,255,255,.12);transform:translateY(-1px);outline:none}
.meta-filter:focus-visible{box-shadow:0 0 0 2px rgba(202,162,109,.35)}
.site-header.admin-header{padding-top:.9rem;padding-bottom:.7rem}
@media (max-width:900px){
.video-row-head-mobile{display:block;grid-column:1 / -1;margin:0 0 .05rem}
@ -505,8 +508,8 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
<div class="video-row-head video-row-head-mobile">
<h2 class="video-row-title"><?php if($permalinkUrl !== ''): ?><a href="<?=h($permalinkUrl)?>"><?=h($m['title'])?></a><?php else: ?><?=h($m['title'])?><?php endif; ?></h2>
<p class="meta">
<span><?=h($m['date'])?></span>
<?php if(!empty($m['location'])): ?><span><?=h($m['location'])?></span><?php endif; ?>
<?php if(!empty($m['date'])): ?><a class="meta-filter" href="<?=h($dateFilterUrl)?>" title="Filter by date"><?=h($m['date'])?></a><?php endif; ?>
<?php if(!empty($m['location'])): ?><a class="meta-filter" href="<?=h($locFilterUrl)?>" title="Filter by location"><?=h($m['location'])?></a><?php endif; ?>
</p>
<?php if(!empty($m['teaser'])): ?><p class="description-teaser description-teaser-mobile"><?=h((string)$m['teaser'])?></p><?php endif; ?>
</div>
@ -523,8 +526,8 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
<div class="video-info">
<h2 class="video-row-title video-row-title-desktop"><?php if($permalinkUrl !== ''): ?><a href="<?=h($permalinkUrl)?>"><?=h($m['title'])?></a><?php else: ?><?=h($m['title'])?><?php endif; ?></h2>
<p class="meta meta-desktop">
<span><?=h($m['date'])?></span>
<?php if(!empty($m['location'])): ?><span><?=h($m['location'])?></span><?php endif; ?>
<?php if(!empty($m['date'])): ?><a class="meta-filter" href="<?=h($dateFilterUrl)?>" title="Filter by date"><?=h($m['date'])?></a><?php endif; ?>
<?php if(!empty($m['location'])): ?><a class="meta-filter" href="<?=h($locFilterUrl)?>" title="Filter by location"><?=h($m['location'])?></a><?php endif; ?>
</p>
<?php if(!empty($m['teaser'])): ?><p class="description-teaser description-teaser-desktop"><?=h((string)$m['teaser'])?></p><?php endif; ?>
<?php if(!empty($m['description'])): ?><p class="description"><?=nl2br(h($m['description']), false)?></p><?php endif; ?>