marcel/familienarchiv
1
0
Fork 0
Code Issues 105 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(dashboard): ReaderRecentStories card-head link, touch targets (TDD, #483)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 17:07:16 +02:00
parent e1c78e3fbe
commit e598f5a506
2 changed files with 62 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte
View File

@@ -24,33 +24,38 @@ function excerpt(body: string | undefined): string {
</script>
{#if stories.length > 0}
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.dashboard_reader_recent_stories_heading()}
</h2>
<ul class="flex flex-col divide-y divide-line">
<div class="flex flex-col overflow-hidden rounded-sm border border-line bg-surface">
<!-- Card-head -->
<div class="flex items-center justify-between border-b border-line px-3 py-1.5">
<h3 class="text-[11px] font-bold tracking-[.12em] text-ink-3 uppercase">
{m.dashboard_reader_recent_stories_heading()}
</h3>
<a
href="/geschichten"
class="flex min-h-[44px] items-center text-[11px] font-semibold text-link-quiet no-underline focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
>
{m.dashboard_reader_all_stories()}
</a>
</div>
<!-- Story list -->
<ul class="flex flex-col">
{#each stories as story (story.id)}
<li class="py-4 first:pt-0 last:pb-0">
<li>
<a
href="/geschichten/{story.id}"
class="flex flex-col gap-1 rounded-sm transition-colors hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
class="flex min-h-[44px] flex-col gap-1 border-b border-line/50 px-3 py-2 last:border-b-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
>
<span class="text-ink-1 font-serif text-base italic">{story.title}</span>
<span class="font-serif text-base text-ink italic">{story.title}</span>
{#if story.body}
<p class="line-clamp-2 font-sans text-xs text-ink-3">{excerpt(story.body)}</p>
<p class="line-clamp-2 text-xs leading-relaxed text-ink-2">{excerpt(story.body)}</p>
{/if}
<span class="font-sans text-xs text-ink-3">
<span class="text-[11px] text-ink-3">
{relativeTimeDe(new Date(story.publishedAt ?? story.updatedAt))}
</span>
</a>
</li>
{/each}
</ul>
<a
href="/geschichten"
class="mt-4 inline-flex min-h-[44px] items-center rounded-sm font-sans text-sm text-brand-navy underline hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
>
{m.dashboard_reader_all_stories()}
</a>
</div>
{/if}