66e9309d8a
- JourneyItemCard: 'Brief öffnen' back to a >=44px touch target with the height regression spec restored - GeschichteListRow: REISE badges text-[10px] -> text-xs; drop the hardcoded aria-label and the mobile badge's aria-hidden so phone screen readers learn a row is a Lesereise; mobile avatar initials -> color dot - detail page: badge text-xs, metabar Edit/Delete h-9 -> h-11, avatar color keyed by name to match the list - JourneyReader: dead border-subtle class -> border-line-2 - DocumentPickerDropdown: aria-controls only while the listbox exists - JourneyAddBar: aria-expanded/aria-controls on both toggles + focus hand-off into the revealed picker input / interlude textarea - GeschichteSidebar: section h2s hidden below sm (summary already shows the label there) - JourneyCreate: bg-brand-navy -> semantic bg-primary/text-primary-fg; title maxlength=255 - JourneyItemRow interlude: neutral frame border + left accent only, token utilities instead of arbitrary var() syntax and inline style Review round 3: Leonie (1-8 + round-1 leftovers), Elicit. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
86 lines
3.0 KiB
Svelte
86 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import { plainExcerpt } from '$lib/shared/utils/extractText';
|
|
import { getInitials, personAvatarColor } from '$lib/person/personFormat';
|
|
import { formatAuthorName, formatPublishedAt } from './utils';
|
|
import type { components } from '$lib/generated/api';
|
|
|
|
type GeschichteRow = Pick<
|
|
components['schemas']['GeschichteSummary'],
|
|
'id' | 'title' | 'body' | 'type' | 'author' | 'publishedAt'
|
|
>;
|
|
|
|
let { geschichte }: { geschichte: GeschichteRow } = $props();
|
|
|
|
const isJourney = $derived(geschichte.type === 'JOURNEY');
|
|
|
|
const publishedAt = $derived(formatPublishedAt(geschichte.publishedAt, 'short'));
|
|
|
|
const authorName = $derived(formatAuthorName(geschichte.author));
|
|
</script>
|
|
|
|
<a
|
|
href="/geschichten/{geschichte.id}"
|
|
class="group flex min-h-[44px] transition-colors hover:bg-canvas/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
>
|
|
<!-- Meta column (desktop) -->
|
|
<div class="hidden w-40 shrink-0 flex-col items-start gap-1 border-r border-line-2 p-3 sm:flex">
|
|
<span
|
|
aria-hidden="true"
|
|
class="flex h-7 w-7 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white"
|
|
style="background-color: {personAvatarColor(authorName)}"
|
|
>
|
|
{getInitials(authorName)}
|
|
</span>
|
|
<span class="font-sans text-sm leading-tight font-semibold text-ink">{authorName}</span>
|
|
{#if publishedAt}
|
|
<span class="font-sans text-sm text-ink-3">{publishedAt}</span>
|
|
{/if}
|
|
{#if isJourney}
|
|
<span
|
|
data-testid="journey-badge"
|
|
class="inline-flex items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-xs font-bold tracking-wide text-journey uppercase"
|
|
>
|
|
{m.journey_badge_list()}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Content column -->
|
|
<div class="min-w-0 flex-1 p-3 sm:px-4">
|
|
<!-- Compact meta line (mobile only) -->
|
|
<div class="mb-1 flex items-center gap-1.5 sm:hidden">
|
|
<!-- 7px initials render as smudge at this size — a plain color dot reads better -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="h-2.5 w-2.5 shrink-0 rounded-full"
|
|
style="background-color: {personAvatarColor(authorName)}"
|
|
></span>
|
|
<span class="font-sans text-sm font-semibold text-ink">{authorName}</span>
|
|
{#if publishedAt}
|
|
<span class="ml-auto font-sans text-sm text-ink-3">{publishedAt}</span>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="mb-1 flex items-center gap-1.5">
|
|
<h2 class="font-serif text-lg leading-snug text-ink group-hover:underline">
|
|
{geschichte.title}
|
|
</h2>
|
|
{#if isJourney}
|
|
<span
|
|
data-testid="journey-badge-mobile"
|
|
class="inline-flex shrink-0 items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-xs font-bold tracking-wide text-journey uppercase sm:hidden"
|
|
>
|
|
{m.journey_badge_list()}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
{#if geschichte.body}
|
|
<!-- plaintext for JOURNEY, sanitised-HTML→text for STORY; never {@html} -->
|
|
<p class="line-clamp-2 font-sans text-sm leading-relaxed text-ink-3">
|
|
{plainExcerpt(geschichte.body, 150)}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</a>
|