nikiskaarup/progress-tracker-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

undo overflow

Browse source
This commit is contained in:
Niki Wix Skaarup 2025-04-05 22:19:22 +02:00
parent 2ee2f7286b
commit ec3e375606
Signed by: nikiskaarup
GPG key ID: FC2F1B116F6E788C
1 changed files with 7 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/progress-table.svelte
View file

@ -7,8 +7,8 @@
let interval: Parameters<typeof clearInterval>[0] = undefined; let interval: Parameters<typeof clearInterval>[0] = undefined;
let scrolled = $state(false); let y = $state(0);
let container: HTMLDivElement; let scrolled = $derived(y > 32);
$effect(() => { $effect(() => {
clearInterval(interval); clearInterval(interval);
@ -34,17 +34,9 @@
}); });
</script> </script>
<div <svelte:window bind:scrollY={y} />
bind:this={container}
class="relative col-[content] max-h-[calc(var(--main-min-height)---spacing(8))] overflow-y-auto pr-0.5"
onscroll={(e) => {
const scrollTop = container.scrollTop;
const scrollHeight = container.scrollHeight;
const clientHeight = container.clientHeight;
scrolled = scrollTop > 32; <div class="relative col-[content] pr-0.5">
}}
>
{#await entriesPromise} {#await entriesPromise}
<p class="text-center">Loading entries...</p> <p class="text-center">Loading entries...</p>
{:then entries} {:then entries}
@ -52,9 +44,6 @@
<p class="text-center">No entries.</p> <p class="text-center">No entries.</p>
{:else} {:else}
{@render table(entries)} {@render table(entries)}
<div
class="sticky inset-x-0 bottom-0 h-16 bg-gradient-to-t from-gray-950 to-transparent"
></div>
{/if} {/if}
{:catch error} {:catch error}
<p class="mx-auto max-w-md text-center"> <p class="mx-auto max-w-md text-center">
@ -68,7 +57,7 @@
class="@container grid w-full grid-cols-[auto,1fr,auto,auto,auto] gap-1 font-light @lg:gap-3" class="@container grid w-full grid-cols-[auto,1fr,auto,auto,auto] gap-1 font-light @lg:gap-3"
> >
<div <div
class="sticky top-0 col-span-5 grid grid-cols-[subgrid] gap-1 bg-gray-950 py-2 text-gray-400 capitalize" class="sticky top-(--header-height) col-span-5 grid grid-cols-[subgrid] gap-1 bg-gray-950 py-2 text-gray-400 capitalize"
> >
<div>id</div> <div>id</div>
<div class="px-1">name</div> <div class="px-1">name</div>
@ -78,8 +67,7 @@
{#if scrolled} {#if scrolled}
<div <div
in:fade={{ duration: 500, easing: cubicInOut }} transition:fade={{ duration: 250, easing: cubicInOut }}
out:fade={{ duration: 250, easing: cubicInOut }}
class="absolute inset-x-0 top-full h-16 bg-gradient-to-b from-gray-950 to-transparent" class="absolute inset-x-0 top-full h-16 bg-gradient-to-b from-gray-950 to-transparent"
></div> ></div>
{/if} {/if}
@ -104,6 +92,7 @@
</div> </div>
{/each} {/each}
</div> </div>
<div class="sticky inset-x-0 bottom-0 h-16 bg-gradient-to-t from-gray-950 to-transparent"></div>
{/snippet} {/snippet}
{#snippet done(finished: boolean)} {#snippet done(finished: boolean)}