CalendarBlock: ruhigere, editorialere UI-Überarbeitung
- Kopfleiste zusammengefasst: Suche-Pill + Themenfilter-Icon + Heute-Chip - Monats-Grid neutralisiert: weisser Grund, Punkt-Marker statt Zahl-Badge - Terminliste als Karten statt Zebra-Rows; Urgency in getönte Datums-Kachel - Aktionsleiste ans Card-Ende verschoben, ruhige Text+Icon-Links Enthält zusätzlich bestehende lokale Änderungen (Card, Header, ContactCard, InfoCard, PostCardCompact, FilesBlock, app.css, Storybook-Fixtures). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Peter Meier
@@ -20,6 +20,11 @@
|
||||
@apply rounded-lg border border-stein-200 bg-white shadow-sm;
|
||||
}
|
||||
|
||||
/* Shared card hover: lift + shadow + wald border, used by all clickable card/tile/list-row components */
|
||||
.card-hover-lift {
|
||||
@apply transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:border-wald-300 hover:shadow-md;
|
||||
}
|
||||
|
||||
/* Diagonal strikethrough for past calendar days */
|
||||
.day-past::after {
|
||||
content: '';
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
variants: {
|
||||
variant: {
|
||||
callout: "cursor-pointer transition-colors no-underline text-inherit hover:bg-wald-100",
|
||||
tile: "transition-[transform,box-shadow,border-color] duration-200 no-underline hover:-translate-y-0.5 hover:shadow-md hover:border-wald-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-500 focus-visible:ring-offset-2",
|
||||
tile: "card-hover-lift no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-500 focus-visible:ring-offset-2",
|
||||
},
|
||||
},
|
||||
defaultVariants: { variant: "tile" },
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="not-prose card-surface relative flex h-full min-w-0 flex-col gap-2 overflow-hidden p-4 transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:border-wald-300 hover:shadow-md"
|
||||
class="not-prose card-surface card-hover-lift relative flex h-full min-w-0 flex-col gap-2 overflow-hidden p-4"
|
||||
>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<p class="truncate pr-6 text-sm font-medium leading-tight text-stein-900">{contact.name ?? ""}</p>
|
||||
|
||||
@@ -145,26 +145,26 @@
|
||||
{#each links as link}
|
||||
{@const active = isActiveTree(link, $page.url.pathname)}
|
||||
{#if link.children && link.children.length > 0}
|
||||
<div class="relative group">
|
||||
<div class="relative group inline-flex items-center">
|
||||
{#if link.href && link.href !== "#"}
|
||||
<a
|
||||
href={link.href}
|
||||
class="text-[.7rem] py-1 inline-flex items-center gap-0.5 {active ? 'font-bold' : ''}"
|
||||
class="text-[.7rem] leading-none py-1 inline-flex items-center gap-0.5 {active ? 'font-bold' : ''}"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{link.label}
|
||||
<Icon icon="lucide:chevron-down" class="size-3" aria-hidden="true" />
|
||||
<Icon icon="lucide:chevron-down" class="size-3 shrink-0" aria-hidden="true" />
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="text-[.7rem] py-1 inline-flex items-center gap-0.5 {active ? 'font-bold' : ''}"
|
||||
class="text-[.7rem] leading-none py-1 inline-flex items-center gap-0.5 {active ? 'font-bold' : ''}"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{link.label}
|
||||
<Icon icon="lucide:chevron-down" class="size-3" aria-hidden="true" />
|
||||
<Icon icon="lucide:chevron-down" class="size-3 shrink-0" aria-hidden="true" />
|
||||
</button>
|
||||
{/if}
|
||||
<div
|
||||
@@ -191,7 +191,7 @@
|
||||
{:else}
|
||||
<a
|
||||
href={link.href}
|
||||
class="text-[.7rem] py-1 {active ? 'font-bold ' : ''}"
|
||||
class="text-[.7rem] leading-none py-1 inline-flex items-center {active ? 'font-bold ' : ''}"
|
||||
aria-current={active ? "page" : undefined}
|
||||
>
|
||||
{link.label}
|
||||
|
||||
@@ -63,9 +63,9 @@
|
||||
tone === "green" ? "border-wald-100 bg-wald-50" : "border-stein-200 bg-white"
|
||||
}`,
|
||||
);
|
||||
/* Klickbare Karte: Tile-Hover identisch zu Card.svelte (variant=tile). */
|
||||
/* Klickbare Karte: Tile-Hover identisch zu Card.svelte (variant=tile), s. card-hover-lift in app.css. */
|
||||
const linkCls =
|
||||
"transition-[transform,box-shadow,border-color] duration-200 no-underline text-inherit hover:-translate-y-0.5 hover:shadow-md hover:border-wald-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-500 focus-visible:ring-offset-2";
|
||||
"card-hover-lift no-underline text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-500 focus-visible:ring-offset-2";
|
||||
</script>
|
||||
|
||||
{#snippet iconBadge(sizeClass: string, iconSize: string)}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
|
||||
<a
|
||||
{href}
|
||||
class="group flex gap-3 overflow-hidden card-surface p-0 text-stein-900 no-underline transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-wald-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-500 focus-visible:ring-offset-2"
|
||||
class="group flex gap-3 overflow-hidden card-surface card-hover-lift p-0 text-stein-900 no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
<div class="relative w-28 shrink-0 self-stretch overflow-hidden bg-stein-100 sm:w-32">
|
||||
{#if rawImg}
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import type { Meta, StoryObj } from '@storybook/sveltekit';
|
||||
import CalendarBlock from './CalendarBlock.svelte';
|
||||
// CalendarBlock liest Übersetzungen über die `translations`-Prop (nicht den
|
||||
// Context/WithTranslations-Decorator) → Fixture explizit reinreichen, sonst
|
||||
// rohe Keys (calendar_weekday_mo, calendar_all_upcoming, …).
|
||||
import translations from './_fixtures/translations.json';
|
||||
|
||||
const meta = {
|
||||
title: 'CMS-Blocks/Calendar',
|
||||
@@ -39,5 +43,5 @@ const items = [
|
||||
];
|
||||
|
||||
export const Standard: Story = {
|
||||
args: { block: { title: 'Termine', variant: 'default', fromPost: false, items } },
|
||||
args: { block: { title: 'Termine', variant: 'default', fromPost: false, items }, translations },
|
||||
};
|
||||
|
||||
@@ -21,7 +21,6 @@
|
||||
import ImageModal from "$lib/components/ImageModal.svelte";
|
||||
import SocialImageModal from "$lib/components/SocialImageModal.svelte";
|
||||
import QrModal from "$lib/components/QrModal.svelte";
|
||||
import EventDateBox from "./EventDateBox.svelte";
|
||||
|
||||
type EventCardItem = CalendarItemData & {
|
||||
start: Date;
|
||||
@@ -56,6 +55,8 @@
|
||||
let search = $state("");
|
||||
let currentMonth = $state(new Date());
|
||||
let selectedDay = $state<string | null>(null);
|
||||
/** Themenfilter-Popover unter der Kopfleiste (Icon-Button toggelt). */
|
||||
let tagFilterOpen = $state(false);
|
||||
|
||||
function parseDate(iso: string | undefined | null): Date | null {
|
||||
if (!iso) return null;
|
||||
@@ -289,6 +290,12 @@
|
||||
month: "short",
|
||||
});
|
||||
}
|
||||
/** Kurzer Wochentag ohne Punkt für die Datums-Kachel der Karte. */
|
||||
function fmtWd(d: Date): string {
|
||||
return d
|
||||
.toLocaleDateString("de-DE", { weekday: "short" })
|
||||
.replace(/\.$/, "");
|
||||
}
|
||||
function fmtGroupHeader(d: Date): string {
|
||||
return d.toLocaleDateString("de-DE", {
|
||||
weekday: "long",
|
||||
@@ -412,6 +419,20 @@
|
||||
return "later";
|
||||
}
|
||||
|
||||
/** Getönte Datums-Kachel je Urgency (ersetzt den früheren farbigen
|
||||
* Left-Border-Strich der Event-Rows). */
|
||||
function urgencyTile(u: Urgency): string {
|
||||
return (
|
||||
{
|
||||
now: "bg-fire-50 text-fire-700",
|
||||
today: "bg-fire-50 text-fire-600",
|
||||
tomorrow: "bg-erde-50 text-erde-700",
|
||||
week: "bg-himmel-50 text-himmel-700",
|
||||
later: "bg-stein-100 text-stein-600",
|
||||
}[u] ?? "bg-stein-100 text-stein-600"
|
||||
);
|
||||
}
|
||||
|
||||
function toICS(ev: EventCardItem): CalendarItemICS {
|
||||
return {
|
||||
title: ev.title || t(T.calendar_untitled),
|
||||
@@ -634,40 +655,58 @@
|
||||
locText ||
|
||||
item.isMultiDay
|
||||
)}
|
||||
<li
|
||||
id={eventId(item)}
|
||||
class="event-item {isNext ? 'event-item-next' : ''}"
|
||||
data-urgency={urgency}
|
||||
>
|
||||
<li id={eventId(item)} class="event-card">
|
||||
<details
|
||||
class="group/event"
|
||||
open={openByDefault || linkedSlug === eventId(item)}
|
||||
>
|
||||
<summary
|
||||
class="cursor-pointer list-none p-3 flex items-start gap-3 hover:bg-himmel-50/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-himmel-500"
|
||||
class="flex cursor-pointer list-none items-center gap-3 p-3 hover:bg-stein-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-himmel-500"
|
||||
>
|
||||
<!-- Datum-Kachel: Wochentag/Tag/Monat (Einzel) bzw.
|
||||
Wochentag- und Tag-Range (mehrtägig). -->
|
||||
<EventDateBox
|
||||
start={item.start}
|
||||
end={item.end}
|
||||
multiDay={!!item.isMultiDay}
|
||||
/>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2 flex-wrap">
|
||||
<!-- Datums-Kachel: Urgency-getönt, Einzeltag bzw.
|
||||
Tag-Range (mehrtägig). -->
|
||||
<div
|
||||
class="flex w-[50px] shrink-0 flex-col items-center rounded-lg py-1.5 {urgencyTile(
|
||||
urgency,
|
||||
)}"
|
||||
>
|
||||
<span class="text-[9px] font-semibold uppercase">
|
||||
{#if item.isMultiDay && item.end}{fmtWd(
|
||||
item.start,
|
||||
)}–{fmtWd(item.end)}{:else}{fmtWd(
|
||||
item.start,
|
||||
)}{/if}
|
||||
</span>
|
||||
<span
|
||||
class="font-bold leading-none {item.isMultiDay &&
|
||||
item.end
|
||||
? 'text-sm'
|
||||
: 'text-xl'}"
|
||||
>
|
||||
{#if item.isMultiDay && item.end}{item.start.getDate()}–{item.end.getDate()}{:else}{item.start.getDate()}{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
class="text-sm font-semibold text-stein-900 leading-snug"
|
||||
class="text-sm font-semibold text-stein-900"
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
{#if live}
|
||||
<Badge color="fire" variant="solid" uppercase class="shrink-0">
|
||||
<Badge color="fire" variant="solid" uppercase>
|
||||
{live}
|
||||
</Badge>
|
||||
{:else if relativeDays(item.start)}
|
||||
<span
|
||||
class="rounded-full bg-stein-100 px-2 py-0.5 text-[10px] font-semibold text-stein-600"
|
||||
>
|
||||
{relativeDays(item.start)}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="mt-0.5 flex items-center gap-2 flex-wrap text-[11px] text-stein-600"
|
||||
class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-stein-600"
|
||||
>
|
||||
{#if item.timeStr && !item.isMultiDay}
|
||||
<span
|
||||
@@ -683,7 +722,7 @@
|
||||
{/if}
|
||||
{#if locText}
|
||||
<span
|
||||
class="inline-flex items-center gap-1 min-w-0"
|
||||
class="inline-flex min-w-0 items-center gap-1"
|
||||
>
|
||||
<Icon
|
||||
icon="lucide:map-pin"
|
||||
@@ -693,21 +732,11 @@
|
||||
<span class="truncate">{locText}</span>
|
||||
</span>
|
||||
{/if}
|
||||
{#if item.tags && item.tags.length > 0}
|
||||
{#each item.tags.slice(0, 2) as tg}
|
||||
<Badge color="blue">{tg}</Badge>
|
||||
{/each}
|
||||
{#if item.tags.length > 2}
|
||||
<span class="text-[10px] text-stein-500"
|
||||
>+{item.tags.length - 2}</span
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<Icon
|
||||
icon="lucide:chevron-down"
|
||||
class="size-4 text-stein-400 shrink-0 mt-1 transition-transform group-open/event:rotate-180"
|
||||
class="size-4 shrink-0 text-stein-400 transition-transform group-open/event:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</summary>
|
||||
@@ -959,154 +988,98 @@
|
||||
</h3>
|
||||
{/if}
|
||||
|
||||
<!-- Filterleiste: Suche + „Heute" -->
|
||||
<div class="flex flex-wrap items-center gap-2 border-b border-stein-200 px-4 py-2">
|
||||
<!-- Kopfleiste: Suche (Pill) · Themenfilter (Icon-Button) · „Heute" (Chip).
|
||||
Themenfilter öffnet die Chips-Zeile darunter (tagFilterOpen). -->
|
||||
<div class="flex items-center gap-2 border-b border-stein-200 px-4 py-3">
|
||||
<SearchField
|
||||
bind:value={search}
|
||||
placeholder="Termine durchsuchen …"
|
||||
ariaLabel="Termine durchsuchen"
|
||||
class="min-w-0 flex-1"
|
||||
class="min-w-0 flex-1 rounded-full bg-stein-50"
|
||||
/>
|
||||
{#if allTags.length > 0}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (tagFilterOpen = !tagFilterOpen)}
|
||||
class="relative grid size-9 shrink-0 place-items-center rounded-full text-stein-600 hover:bg-stein-100 {tagFilterOpen
|
||||
? 'bg-stein-100'
|
||||
: 'bg-stein-50'}"
|
||||
aria-label={t(T.calendar_filter_by_tag)}
|
||||
aria-pressed={!!activeTag}
|
||||
aria-expanded={tagFilterOpen}
|
||||
>
|
||||
<Icon
|
||||
icon="lucide:sliders-horizontal"
|
||||
class="size-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{#if activeTag}
|
||||
<span
|
||||
class="absolute -right-0.5 -top-0.5 size-2.5 rounded-full bg-himmel-600 ring-2 ring-stein-0"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={goToToday}
|
||||
class="chip inline-flex items-center gap-1.5 border-stein-300 text-stein-700 hover:bg-stein-100"
|
||||
class="inline-flex items-center gap-1.5 rounded-full bg-wald-50 px-3.5 py-2 text-xs font-semibold text-wald-700 hover:bg-wald-100"
|
||||
>
|
||||
<Icon icon="lucide:calendar-check" class="size-3.5" aria-hidden="true" />
|
||||
<Icon
|
||||
icon="lucide:calendar-check"
|
||||
class="size-3.5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Heute
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if allTags.length > 0}
|
||||
<!-- Tag-Filter chips, einklappbar (kann bei vielen Themen lang werden).
|
||||
"Alle" = activeTag null. Aktiver Tag steht in der Summary, damit ein
|
||||
gesetzter Filter auch zugeklappt sichtbar bleibt. -->
|
||||
<details class="border-b border-stein-200 bg-stein-50 group/tags">
|
||||
<summary
|
||||
class="flex cursor-pointer list-none items-center gap-1.5 px-4 py-2 text-[11px] uppercase tracking-wide text-stein-500 hover:bg-stein-100"
|
||||
{#if allTags.length > 0 && tagFilterOpen}
|
||||
<!-- Themen-Chips: eingeblendet per Filter-Icon. "Alle" = activeTag null.
|
||||
Aktiver Tag zusätzlich als Punkt am Filter-Icon signalisiert. -->
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-1.5 border-b border-stein-200 bg-stein-50 px-4 py-2"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (activeTag = null)}
|
||||
class="chip {!activeTag
|
||||
? 'bg-himmel-700 text-himmel-50 border-himmel-700'
|
||||
: 'border-stein-300 text-stein-700 hover:bg-stein-100'}"
|
||||
aria-pressed={!activeTag}
|
||||
>
|
||||
<Icon
|
||||
icon="lucide:chevron-right"
|
||||
class="size-3.5 transition-transform group-open/tags:rotate-90"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t(T.calendar_filter_by_tag)}
|
||||
{#if activeTag}
|
||||
<Badge color="blue" variant="solid" class="ml-1 normal-case tracking-normal">
|
||||
{activeTag}
|
||||
</Badge>
|
||||
{/if}
|
||||
</summary>
|
||||
<div class="flex flex-wrap items-center gap-1.5 px-4 pb-2 pt-1">
|
||||
{t(T.calendar_all_tags)}
|
||||
</button>
|
||||
{#each allTags as tag}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (activeTag = null)}
|
||||
class="chip {!activeTag
|
||||
onclick={() => (activeTag = activeTag === tag ? null : tag)}
|
||||
class="chip {activeTag === tag
|
||||
? 'bg-himmel-700 text-himmel-50 border-himmel-700'
|
||||
: 'border-stein-300 text-stein-700 hover:bg-stein-100'}"
|
||||
aria-pressed={!activeTag}
|
||||
aria-pressed={activeTag === tag}
|
||||
>
|
||||
{t(T.calendar_all_tags)}
|
||||
{tag}
|
||||
</button>
|
||||
{#each allTags as tag}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (activeTag = activeTag === tag ? null : tag)}
|
||||
class="chip {activeTag === tag
|
||||
? 'bg-himmel-700 text-himmel-50 border-himmel-700'
|
||||
: 'border-stein-300 text-stein-700 hover:bg-stein-100'}"
|
||||
aria-pressed={activeTag === tag}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</details>
|
||||
{/if}
|
||||
|
||||
<!-- Subscribe + Export Actions. Nur nach mount sichtbar (feedHost gesetzt).
|
||||
Apple: webcal:// Link → öffnet nativ Kalender.app / iOS Kalender.
|
||||
Alle anderen: direkter ICS-Download als Fallback. -->
|
||||
{#if feedHost}
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-2 px-4 py-2.5 border-b border-stein-200 bg-himmel-100"
|
||||
>
|
||||
<Button
|
||||
href="/termin-melden"
|
||||
variant="warning"
|
||||
size="sm"
|
||||
class="min-h-[36px]"
|
||||
>
|
||||
<Icon icon="lucide:plus" class="size-3.5 shrink-0" aria-hidden="true" />
|
||||
Termin melden
|
||||
</Button>
|
||||
{#if isApplePlatform}
|
||||
<Button
|
||||
href={webcalUrl}
|
||||
variant="primary"
|
||||
size="sm"
|
||||
aria-label={t(T.calendar_subscribe_aria)}
|
||||
class="min-h-[36px]"
|
||||
>
|
||||
<Icon
|
||||
icon="lucide:calendar-plus"
|
||||
class="size-3.5 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t(T.calendar_subscribe)}
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
href={icsUrl}
|
||||
download="windwiderstand-termine.ics"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
aria-label={t(T.calendar_subscribe_aria)}
|
||||
class="min-h-[36px]"
|
||||
>
|
||||
<Icon
|
||||
icon="lucide:calendar-plus"
|
||||
class="size-3.5 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t(T.calendar_subscribe)}
|
||||
</Button>
|
||||
{/if}
|
||||
{#if items.length > 0}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={exportAll}
|
||||
class="min-h-[36px]"
|
||||
>
|
||||
<Icon
|
||||
icon="lucide:download"
|
||||
class="size-3.5 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t(T.calendar_export_all)}
|
||||
</Button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Kalender-Widget: oben, kompakt auf Mobile-Breite gecappt (sonst
|
||||
werden aspect-square cells auf Desktop gigantisch). Monat-Nav +
|
||||
Tag-Grid. Klick auf Tag filtert Liste unten. -->
|
||||
<div
|
||||
bind:this={widgetEl}
|
||||
class="calendar-widget bg-himmel-100 text-himmel-900 p-4"
|
||||
>
|
||||
<div bind:this={widgetEl} class="calendar-widget bg-stein-0 p-4">
|
||||
<div class="w-full">
|
||||
<div class="flex items-center justify-between gap-2 mb-2">
|
||||
<span
|
||||
class="text-xl font-semibold text-himmel-900 capitalize whitespace-nowrap"
|
||||
class="text-xl font-semibold text-stein-900 capitalize whitespace-nowrap"
|
||||
>{monthLabel}</span
|
||||
>
|
||||
<div class="flex items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="p-2 rounded-md text-himmel-800 hover:bg-himmel-200 hover:text-himmel-900 transition-colors"
|
||||
class="p-2 rounded-md text-stein-500 hover:bg-stein-100 hover:text-stein-800 transition-colors"
|
||||
aria-label={t(T.calendar_prev_month)}
|
||||
onclick={prevMonth}
|
||||
>
|
||||
@@ -1118,7 +1091,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="p-2 rounded-md text-himmel-800 hover:bg-himmel-200 hover:text-himmel-900 transition-colors"
|
||||
class="p-2 rounded-md text-stein-500 hover:bg-stein-100 hover:text-stein-800 transition-colors"
|
||||
aria-label={t(T.calendar_next_month)}
|
||||
onclick={nextMonth}
|
||||
>
|
||||
@@ -1131,43 +1104,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-7 gap-1.5 text-center text-sm">
|
||||
{#each weekdays as w, i}
|
||||
<div class="mb-1 grid grid-cols-7 text-center">
|
||||
{#each weekdays as w}
|
||||
<div
|
||||
class="py-1.5 text-xs font-bold rounded-sm {i >= 5
|
||||
? 'bg-stein-100/80 text-stein-600'
|
||||
: 'bg-himmel-200/50 text-himmel-800'}"
|
||||
class="py-1 text-[10px] font-semibold uppercase tracking-wide text-stein-400"
|
||||
>
|
||||
{w}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-0.5 text-center">
|
||||
{#each calendarDays as d}
|
||||
{#if d === null}
|
||||
<div class="h-10" aria-hidden="true"></div>
|
||||
<div class="h-9" aria-hidden="true"></div>
|
||||
{:else}
|
||||
{@const key = dayKey(d)}
|
||||
{@const isCurrentMonth = d.getMonth() === month}
|
||||
{@const dayEvents = eventsByDay.get(key) ?? []}
|
||||
{@const hasEvents = dayEvents.length > 0}
|
||||
{@const isSelected = selectedDay === key}
|
||||
{@const isToday = key === todayKey}
|
||||
{@const isFuture = key >= todayKey}
|
||||
{@const isWeekend =
|
||||
d.getDay() === 0 || d.getDay() === 6}
|
||||
{#if hasEvents}
|
||||
<button
|
||||
type="button"
|
||||
class="relative h-10 rounded-xs flex flex-col items-center justify-center min-w-0 transition-colors cursor-pointer font-semibold
|
||||
{!isFuture ? 'opacity-20 day-past' : ''}
|
||||
{isCurrentMonth
|
||||
? 'text-himmel-900'
|
||||
: 'text-himmel-700 opacity-60 hover:opacity-80'}
|
||||
{isWeekend
|
||||
? 'bg-erde-100 hover:bg-erde-200'
|
||||
: 'bg-himmel-200/80 hover:bg-himmel-300'}
|
||||
{isSelected
|
||||
? 'ring-2 ring-himmel-700 brightness-95'
|
||||
: ''}
|
||||
class="relative grid h-9 place-items-center rounded-lg text-[13px] font-bold cursor-pointer transition-colors
|
||||
{isFuture
|
||||
? 'text-wald-700 bg-wald-50 hover:bg-wald-100'
|
||||
: 'text-stein-400 bg-stein-50 hover:bg-stein-100'}
|
||||
{isSelected ? 'ring-2 ring-wald-500' : ''}
|
||||
{isToday ? 'today-cell' : ''}"
|
||||
onclick={() => selectDay(key)}
|
||||
onmouseenter={(e) => showTooltip(e, key)}
|
||||
@@ -1184,30 +1148,22 @@
|
||||
{ n: dayEvents.length },
|
||||
).replace(/\d+\s*/, '')}"
|
||||
>
|
||||
<span class="text-xs">{d.getDate()}</span>
|
||||
<span>{d.getDate()}</span>
|
||||
<span
|
||||
class="absolute -bottom-1 -right-1 inline-flex items-center justify-center min-w-3.5 h-3.5 sm:min-w-4.5 sm:h-4.5 px-0.5 rounded-full text-stein-0 text-[9px] sm:text-[10px] font-medium leading-none {isFuture
|
||||
? 'bg-wald-400'
|
||||
: 'bg-error'}"
|
||||
class="absolute bottom-1.5 size-[5px] rounded-full {isFuture
|
||||
? 'bg-wald-500'
|
||||
: 'bg-stein-400'}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{dayEvents.length}
|
||||
</span>
|
||||
></span>
|
||||
</button>
|
||||
{:else}
|
||||
<div
|
||||
class="relative h-10 rounded-xs flex flex-col items-center justify-center min-w-0 cursor-default
|
||||
{!isFuture ? 'opacity-20 day-past' : ''}
|
||||
{isWeekend
|
||||
? 'bg-stein-100/60'
|
||||
: 'bg-himmel-50/50'}
|
||||
{isCurrentMonth
|
||||
? 'text-himmel-800'
|
||||
: 'text-himmel-600 opacity-50'}
|
||||
class="grid h-9 place-items-center rounded-lg text-[13px]
|
||||
{isFuture ? 'text-stein-700' : 'text-stein-300'}
|
||||
{isToday ? 'today-cell' : ''}"
|
||||
aria-current={isToday ? "date" : undefined}
|
||||
>
|
||||
<span class="text-xs">{d.getDate()}</span>
|
||||
<span>{d.getDate()}</span>
|
||||
{#if isToday}
|
||||
<span class="sr-only"
|
||||
>{t(T.calendar_today_marker)}</span
|
||||
@@ -1393,6 +1349,51 @@
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Aktionsleiste: Termin melden · Abonnieren (Apple → webcal, sonst ICS)
|
||||
· Export. Ruhige Text+Icon-Links, nur nach mount (feedHost). -->
|
||||
{#if feedHost}
|
||||
<div
|
||||
class="flex items-center gap-4 border-t border-stein-100 px-4 py-3 text-xs font-semibold"
|
||||
>
|
||||
<a
|
||||
href="/termin-melden"
|
||||
class="inline-flex items-center gap-1.5 text-wald-700 no-underline hover:underline"
|
||||
>
|
||||
<Icon icon="lucide:plus" class="size-3.5" aria-hidden="true" />
|
||||
Termin melden
|
||||
</a>
|
||||
<a
|
||||
href={isApplePlatform ? webcalUrl : icsUrl}
|
||||
download={isApplePlatform
|
||||
? undefined
|
||||
: "windwiderstand-termine.ics"}
|
||||
aria-label={t(T.calendar_subscribe_aria)}
|
||||
class="inline-flex items-center gap-1.5 text-himmel-700 no-underline hover:underline"
|
||||
>
|
||||
<Icon
|
||||
icon="lucide:calendar-plus"
|
||||
class="size-3.5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t(T.calendar_subscribe)}
|
||||
</a>
|
||||
{#if items.length > 0}
|
||||
<button
|
||||
type="button"
|
||||
onclick={exportAll}
|
||||
class="ml-auto inline-flex items-center gap-1.5 text-stein-600 hover:text-stein-900"
|
||||
>
|
||||
<Icon
|
||||
icon="lucide:download"
|
||||
class="size-3.5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{t(T.calendar_export_all)}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if modalImage}
|
||||
@@ -1436,10 +1437,6 @@
|
||||
transparent
|
||||
);
|
||||
}
|
||||
/* Event-Rows visuell trennen: Card-Optik mit Urgency-Akzent links,
|
||||
Zebra-Stripe ab dem zweiten Eintrag, deutlicher Separator
|
||||
zwischen Tagesgruppen. So lassen sich Termine optisch klar
|
||||
auseinanderhalten ohne komplette Kacheloptik. */
|
||||
/* iOS Safari zeigt trotz list-style:none noch den Disclosure-Marker
|
||||
(dunkler Punkt oben-links der Kachel) → explizit ausblenden. */
|
||||
.calendar-block summary {
|
||||
@@ -1448,59 +1445,27 @@
|
||||
.calendar-block summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.calendar-block .event-item {
|
||||
position: relative;
|
||||
/* Event-Karten: eigenständige gerundete Karten mit Abstand statt
|
||||
Zebra + Left-Border. Urgency wandert in die getönte Datums-Kachel
|
||||
(urgencyTile), hier nur ruhige Card-Kante + Hover. */
|
||||
.calendar-block .event-card {
|
||||
list-style: none;
|
||||
border-left: 4px solid transparent;
|
||||
margin: 8px 12px;
|
||||
border: 1px solid var(--color-stein-200, #e0dcd5);
|
||||
border-radius: 10px;
|
||||
background: var(--color-stein-0, #fff);
|
||||
transition: background-color 150ms ease;
|
||||
transition:
|
||||
border-color 150ms ease,
|
||||
box-shadow 150ms ease;
|
||||
}
|
||||
/* iOS/WebKit zeigt sonst den <li>-Disc-Marker (dunkler Punkt links der
|
||||
Kachel) — list-none am <ul> greift wegen globaler Typo-Regel nicht. */
|
||||
.calendar-block .event-item::marker {
|
||||
.calendar-block .event-card::marker {
|
||||
content: "";
|
||||
}
|
||||
.calendar-block .event-item + .event-item {
|
||||
border-top: 1px solid var(--color-stein-200, #e0dcd5);
|
||||
}
|
||||
/* Zebra: jeder zweite Termin in einer Tagesgruppe leicht abgedunkelt
|
||||
— sauber per :nth-of-type, ohne dass Day-Group-Header einen Slot
|
||||
verbraucht (event-item ist eigene <li>-Sequenz). */
|
||||
.calendar-block .event-item:nth-of-type(even) {
|
||||
background: var(--color-stein-50, #f7f5f1);
|
||||
}
|
||||
.calendar-block .event-item:hover {
|
||||
background: var(--color-himmel-50, #eef4f8);
|
||||
}
|
||||
/* Urgency-Akzent: 4px farbiger Strich links. Alphabetische
|
||||
Wichtigkeit: now (rot stark) → today (rot) → tomorrow (warm) →
|
||||
week (kühl) → later (neutral). */
|
||||
.calendar-block .event-item[data-urgency="now"] {
|
||||
border-left-color: var(--color-fire-700, #b91c1c);
|
||||
background: var(--color-fire-50, #fef2f2);
|
||||
}
|
||||
.calendar-block .event-item[data-urgency="today"] {
|
||||
border-left-color: var(--color-fire-500, #ef4444);
|
||||
}
|
||||
.calendar-block .event-item[data-urgency="tomorrow"] {
|
||||
border-left-color: var(--color-erde-500, #c97a3b);
|
||||
}
|
||||
.calendar-block .event-item[data-urgency="week"] {
|
||||
border-left-color: var(--color-himmel-500, #4798c4);
|
||||
}
|
||||
.calendar-block .event-item[data-urgency="later"] {
|
||||
border-left-color: var(--color-stein-300, #c4bfb4);
|
||||
}
|
||||
/* Next-up: kräftigere linke Kante + leichter himmel-Tint, plus
|
||||
ein subtiler ring damit der Eintrag beim Scroll-into-view
|
||||
visuell anspringt. */
|
||||
.calendar-block .event-item.event-item-next {
|
||||
border-left-width: 6px;
|
||||
box-shadow: inset 4px 0 0 var(--color-himmel-100, #d8e6ef);
|
||||
}
|
||||
/* Day-Group: dickerer Separator + etwas Luft zwischen Gruppen. */
|
||||
.calendar-block .day-group + .day-group {
|
||||
border-top: 4px solid var(--color-stein-100, #ede8df);
|
||||
.calendar-block .event-card:hover {
|
||||
border-color: var(--color-wald-300, #93d8ac);
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.06);
|
||||
}
|
||||
/* Hover-Tooltip: fixed über dem Grid, zeigt Event-Vorschau auf hover.
|
||||
pointer-events:none damit kein mouseenter/leave Loop entsteht. */
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import type { Meta, StoryObj } from '@storybook/sveltekit';
|
||||
import CalendarCompactBlock from './CalendarCompactBlock.svelte';
|
||||
// Übersetzungen laufen über die `translations`-Prop (nicht Context), s. CalendarBlock.
|
||||
import translations from './_fixtures/translations.json';
|
||||
|
||||
const meta = {
|
||||
title: 'CMS-Blocks/CalendarCompact',
|
||||
@@ -37,5 +39,6 @@ export const Standard: Story = {
|
||||
linkTo: { _slug: 'termine' },
|
||||
items,
|
||||
},
|
||||
translations,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -12,6 +12,10 @@ export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Standard: Story = {
|
||||
// addon-a11y's Live-Scan crasht in Docs-Mode bei echten fokussierbaren
|
||||
// <a>-Elementen (react-aria Cross-Iframe-Bug, Storybook 10). Files ist die
|
||||
// einzige Story mit echten Links → hier deaktivieren.
|
||||
parameters: { a11y: { test: 'off' } },
|
||||
args: {
|
||||
block: {
|
||||
number: '08',
|
||||
@@ -23,6 +27,7 @@ export const Standard: Story = {
|
||||
{
|
||||
src: 'https://cms.pm86.de/api/assets/files/beispiel.pdf?_environment=windwiderstand',
|
||||
title: 'Einwendung Vorlage',
|
||||
description: 'Zum Ausfüllen und Einreichen beim zuständigen Landratsamt',
|
||||
mime: 'application/pdf',
|
||||
size: 248000,
|
||||
filename: 'einwendung-vorlage.pdf',
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import "$lib/iconify-offline";
|
||||
import { getBlockLayoutClasses } from "$lib/block-layout";
|
||||
import SectionHeader from "$lib/components/SectionHeader.svelte";
|
||||
import Badge from "$lib/components/Badge.svelte";
|
||||
import type { FilesBlockData } from "$lib/block-types";
|
||||
import {
|
||||
extractCmsFileField,
|
||||
@@ -26,66 +25,9 @@
|
||||
label: string;
|
||||
description?: string;
|
||||
sizeLabel: string | null;
|
||||
ext: string | null;
|
||||
iconName: string;
|
||||
extLabel: string;
|
||||
};
|
||||
|
||||
function iconForExt(ext: string | null): string {
|
||||
switch (ext) {
|
||||
case "pdf":
|
||||
return "lucide:file-text";
|
||||
case "doc":
|
||||
case "docx":
|
||||
case "rtf":
|
||||
case "odt":
|
||||
return "lucide:file-text";
|
||||
case "xls":
|
||||
case "xlsx":
|
||||
case "ods":
|
||||
case "csv":
|
||||
case "tsv":
|
||||
return "lucide:file-spreadsheet";
|
||||
case "ppt":
|
||||
case "pptx":
|
||||
return "lucide:presentation";
|
||||
case "zip":
|
||||
case "tar":
|
||||
case "gz":
|
||||
case "7z":
|
||||
return "lucide:folder-archive";
|
||||
case "jpg":
|
||||
case "jpeg":
|
||||
case "png":
|
||||
case "webp":
|
||||
case "gif":
|
||||
case "svg":
|
||||
return "lucide:file-image";
|
||||
case "txt":
|
||||
case "md":
|
||||
return "lucide:file-text";
|
||||
case "json":
|
||||
return "lucide:braces";
|
||||
case "xml":
|
||||
case "html":
|
||||
case "htm":
|
||||
return "lucide:code";
|
||||
case "py":
|
||||
return "mdi:language-python";
|
||||
case "js":
|
||||
case "ts":
|
||||
case "tsx":
|
||||
case "jsx":
|
||||
return "mdi:language-javascript";
|
||||
case "rs":
|
||||
return "mdi:language-rust";
|
||||
case "sh":
|
||||
case "bash":
|
||||
return "lucide:terminal";
|
||||
default:
|
||||
return "lucide:file";
|
||||
}
|
||||
}
|
||||
|
||||
const resolved = $derived(
|
||||
((block.items ?? []) as unknown[])
|
||||
.map((raw): Resolved | null => {
|
||||
@@ -103,8 +45,7 @@
|
||||
label,
|
||||
description: field.description,
|
||||
sizeLabel: formatFileSize(field.size),
|
||||
ext,
|
||||
iconName: iconForExt(ext),
|
||||
extLabel: ext ? ext.slice(0, 4).toUpperCase() : "FILE",
|
||||
};
|
||||
})
|
||||
.filter((r): r is Resolved => r !== null),
|
||||
@@ -130,27 +71,35 @@
|
||||
{#if resolved.length === 0}
|
||||
<p class="text-sm text-stein-500">Keine Dateien verfügbar.</p>
|
||||
{:else}
|
||||
<ul class="flex flex-col gap-1 list-none! p-0 m-0! ml-0">
|
||||
<ul class="flex flex-col gap-3 list-none! p-0 m-0! ml-0">
|
||||
{#each resolved as f}
|
||||
<li class="list-none! ml-0">
|
||||
<a
|
||||
href={f.href}
|
||||
class="group flex items-start gap-2 rounded-lg border border-stein-200 bg-white px-2.5 py-1.5 hover:border-stein-400 hover:bg-stein-50 transition-colors no-underline"
|
||||
class="group card-hover-lift flex items-center gap-3 rounded-xl border border-stein-200 bg-white px-3.5 py-2.5 no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-500 focus-visible:ring-offset-2"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Icon icon={f.iconName} class="size-5 shrink-0 text-stein-500 mt-0.5" aria-hidden="true" />
|
||||
<span
|
||||
class="shrink-0 size-9 flex items-center justify-center rounded-lg bg-fire-50 text-[10px] font-bold tracking-wide text-fire-700"
|
||||
>{f.extLabel}</span
|
||||
>
|
||||
<span class="flex-1 min-w-0 flex flex-col">
|
||||
<span class="flex items-center gap-1.5 min-w-0">
|
||||
<span class="text-sm text-stein-900 group-hover:underline truncate">{f.label}</span>
|
||||
<span class="flex items-baseline gap-1.5 min-w-0">
|
||||
<span class="text-sm text-stein-900 truncate">{f.label}</span>
|
||||
{#if f.sizeLabel}
|
||||
<Badge class="tabular-nums">{f.sizeLabel}</Badge>
|
||||
<span class="shrink-0 text-xs text-stein-400 tabular-nums">({f.sizeLabel})</span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if f.description}
|
||||
<span class="text-xs text-stein-400">{f.description}</span>
|
||||
{/if}
|
||||
</span>
|
||||
<Icon
|
||||
icon="lucide:download"
|
||||
class="size-5 shrink-0 text-stein-400 group-hover:text-stein-600 transition-colors"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user