granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hide gradient fade on short descriptions

Browse source
This commit is contained in:
Justin Edmund 2026-01-06 01:28:42 -08:00
parent d72a1f8738
commit 2444fcf92a
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/components/party/info/DescriptionTile.svelte
View file

@ -34,6 +34,18 @@
const avatarSrc = $derived(getAvatarSrc(user?.avatar?.picture)) const avatarSrc = $derived(getAvatarSrc(user?.avatar?.picture))
const avatarSrcSet = $derived(getAvatarSrcSet(user?.avatar?.picture)) const avatarSrcSet = $derived(getAvatarSrcSet(user?.avatar?.picture))
// Measure content height to determine if fade gradient is needed
let contentEl = $state<HTMLDivElement | undefined>(undefined)
let needsFade = $state(false)
$effect(() => {
if (contentEl) {
// Show fade if content is taller than ~2 lines
// Based on line-height 1.5 × font-size ~16px × 2 lines ≈ 48px
needsFade = contentEl.scrollHeight > 48
}
})
/** Extract plain text from first two non-empty paragraphs of TipTap JSON content */ /** Extract plain text from first two non-empty paragraphs of TipTap JSON content */
function getPreviewParagraphs(content?: string): string[] { function getPreviewParagraphs(content?: string): string[] {
if (!content) return [] if (!content) return []
@ -78,7 +90,7 @@
const previewParagraphs = $derived(getPreviewParagraphs(description)) const previewParagraphs = $derived(getPreviewParagraphs(description))
</script> </script>
<div class="description-tile"> <div class="description-tile" class:has-fade={needsFade}>
<!-- Header: Title + Actions --> <!-- Header: Title + Actions -->
<div class="tile-header-container"> <div class="tile-header-container">
<div class="tile-header"> <div class="tile-header">
@ -118,7 +130,7 @@
<!-- Description content (clickable) --> <!-- Description content (clickable) -->
<button type="button" class="description-content" onclick={onOpenDescription}> <button type="button" class="description-content" onclick={onOpenDescription}>
{#if previewParagraphs.length} {#if previewParagraphs.length}
<div class="preview-text"> <div class="preview-text" bind:this={contentEl}>
{#each previewParagraphs as paragraph} {#each previewParagraphs as paragraph}
<p>{paragraph}</p> <p>{paragraph}</p>
{/each} {/each}
@ -146,7 +158,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
&::after { &.has-fade::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;