feat(frontend): add expandable text component for long fields
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
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>
This commit is contained in:
33
frontend/src/lib/components/ExpandableText.svelte
Normal file
33
frontend/src/lib/components/ExpandableText.svelte
Normal file
@@ -0,0 +1,33 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user