Peter Meier
616fb66c00
When EventBadges sits inside a `<a hover:underline>` (upcoming-events list, post cards) the underline propagated through the badge spans on hover. Force `text-decoration: none` on the date and location pills so only the headline text underlines. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
50 lines
2.0 KiB
Svelte
50 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import Icon from "@iconify/svelte";
|
|
import "$lib/iconify-offline";
|
|
|
|
let {
|
|
eventDate = null,
|
|
locationText = null,
|
|
locationHref = null,
|
|
}: {
|
|
eventDate?: string | null;
|
|
locationText?: string | null;
|
|
locationHref?: string | null;
|
|
} = $props();
|
|
|
|
function formatEventDate(dateStr: string): string | null {
|
|
try {
|
|
return new Date(dateStr).toLocaleDateString("de-DE", {
|
|
weekday: "short", day: "2-digit", month: "short",
|
|
year: "numeric", hour: "2-digit", minute: "2-digit",
|
|
});
|
|
} catch { return null; }
|
|
}
|
|
|
|
const dateLabel = $derived(eventDate ? formatEventDate(eventDate) : null);
|
|
</script>
|
|
|
|
{#if dateLabel || locationText}
|
|
<div class="flex flex-wrap gap-2">
|
|
{#if dateLabel}
|
|
<span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-wald-500 px-3 py-1 text-[.65rem] font-semibold text-white shadow-sm no-underline! [text-decoration:none]">
|
|
<Icon icon="mdi:calendar" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
|
|
{dateLabel}
|
|
</span>
|
|
{/if}
|
|
{#if locationText}
|
|
{#if locationHref}
|
|
<a href={locationHref} target={locationHref.startsWith('#') ? undefined : '_blank'} rel={locationHref.startsWith('#') ? undefined : 'noopener noreferrer'} class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-neutral-800 text-neutral-50! px-3 py-1 text-[.65rem] shadow-sm hover:bg-neutral-700 transition-colors no-underline!">
|
|
<Icon icon="mdi:map-marker" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
|
|
{locationText}
|
|
</a>
|
|
{:else}
|
|
<span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-neutral-800 text-neutral-50 px-3 py-1 text-[.65rem] font-medium shadow-sm no-underline! [text-decoration:none]">
|
|
<Icon icon="mdi:map-marker" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
|
|
{locationText}
|
|
</span>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
{/if}
|