8c86beb9f9
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Has been cancelled
CI / Backend Unit Tests (pull_request) Has been cancelled
CI / E2E Tests (pull_request) Has been cancelled
Adds ExpandableText.svelte which clamps text to 10 lines and shows a toggle button only when the content actually overflows. Applied to the summary and transcription fields on the document detail page. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
34 lines
953 B
Svelte
34 lines
953 B
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
let { text, maxLines = 10 }: { text: string; maxLines?: number } = $props();
|
|
|
|
let expanded = $state(false);
|
|
let el = $state<HTMLElement | undefined>(undefined);
|
|
let isClamped = $state(false);
|
|
|
|
$effect(() => {
|
|
if (el && !expanded) {
|
|
isClamped = el.scrollHeight > el.clientHeight;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div>
|
|
<div
|
|
bind:this={el}
|
|
style={!expanded ? `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${maxLines}` : ''}
|
|
class="rounded border border-brand-sand bg-brand-sand/30 p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
|
|
>
|
|
{text}
|
|
</div>
|
|
{#if isClamped || expanded}
|
|
<button
|
|
onclick={() => (expanded = !expanded)}
|
|
class="mt-2 font-sans text-xs text-gray-400 transition hover:text-brand-navy"
|
|
>
|
|
{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}
|
|
</button>
|
|
{/if}
|
|
</div>
|