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

Compare commits

base: nikiskaarup:cc453863e34d8d814ce2dac76e71333182e09941
Branches Tags
nikiskaarup:main
..
compare: nikiskaarup:2ee2f7286bd6c15882f964f8adfd4e197a21037b
Branches Tags
nikiskaarup:main

2 commits
cc453863e3 ... 2ee2f7286b

Author SHA1 Message Date
Niki Wix Skaarup
2ee2f7286b
scroll 2025-04-05 22:10:30 +02:00
Niki Wix Skaarup
a805cc265c
scroll 2025-04-05 21:40:49 +02:00
5 changed files with 36 additions and 9 deletions
Show stats Expand all files Collapse all files

4
bun.lock
View file

@ -6,8 +6,8 @@
"dependencies": { "dependencies": {
"bun-plugin-svelte": "^0.0.6", "bun-plugin-svelte": "^0.0.6",
"bun-plugin-tailwind": "^0.0.15", "bun-plugin-tailwind": "^0.0.15",
"svelte": "^5.25.6", "svelte": "^5.25.7",
"tailwindcss": "^4.1.2", "tailwindcss": "^4.1.3",
}, },
"devDependencies": { "devDependencies": {
"@types/bun": "latest", "@types/bun": "latest",

2
src/components/main.svelte
View file

@ -4,6 +4,6 @@
const { children }: { children?: Snippet } = $props(); const { children }: { children?: Snippet } = $props();
</script> </script>
<main id="main-content" class="content grid min-h-(--main-min-height) pt-4 pb-20"> <main id="main-content" class="content grid min-h-(--main-min-height) py-4">
{@render children?.()} {@render children?.()}
</main> </main>

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

@ -1,9 +1,15 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition';
import { cubicInOut } from 'svelte/easing';
import { fetchEntries, formatter } from '../util'; import { fetchEntries, formatter } from '../util';
let entriesPromise = $state(fetchEntries()); let entriesPromise = $state(fetchEntries());
let interval: Parameters<typeof clearInterval>[0] = undefined; let interval: Parameters<typeof clearInterval>[0] = undefined;
let scrolled = $state(false);
let container: HTMLDivElement;
$effect(() => { $effect(() => {
clearInterval(interval); clearInterval(interval);
@ -28,7 +34,17 @@
}); });
</script> </script>
<div class="col-[content]"> <div
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;
}}
>
{#await entriesPromise} {#await entriesPromise}
<p class="text-center">Loading entries...</p> <p class="text-center">Loading entries...</p>
{:then entries} {:then entries}
@ -36,6 +52,9 @@
<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">
@ -49,21 +68,30 @@
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-(--header-height) col-span-5 grid grid-cols-[subgrid] gap-1 bg-gray-950 py-2 text-gray-400 capitalize" class="sticky top-0 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>
<div class="hidden px-1 @3xl:block">done</div> <div class="hidden px-1 @3xl:block">done</div>
<div class="hidden px-1 @5xl:block">created</div> <div class="hidden px-1 @5xl:block">created</div>
<div class="hidden px-1 @xl:block">updated</div> <div class="hidden px-1 @xl:block">updated</div>
{#if scrolled}
<div
in:fade={{ duration: 500, 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"
></div>
{/if}
</div> </div>
{#each entries as entry (entry.id)} {#each entries as entry (entry.id)}
<div class="col-span-5 grid grid-cols-[subgrid] gap-1"> <div class="col-span-5 grid grid-cols-[subgrid] gap-1">
<div class="py-2 text-xs text-gray-400/50">{entry.id}</div> <div class="py-2 text-xs text-gray-400/50">{entry.id}</div>
<a <a
href={entry.href} href={entry.href}
class="block px-2 py-1 text-gray-200 capitalize transition-colors hover:text-pink-600 hover:underline" class="line-clamp-1 block px-2 py-1 text-nowrap text-ellipsis text-gray-200 capitalize transition-colors hover:text-pink-600 hover:underline"
target="_blank" target="_blank"
title={entry.name}
referrerpolicy="no-referrer">{entry.name}</a referrerpolicy="no-referrer">{entry.name}</a
> >
{@render done(entry.finished)} {@render done(entry.finished)}

2
src/index.html
View file

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en" class="min-h-dvh"> <html lang="en" class="min-h-dvh">
<head> <head>
<title>Progress tracker - skaarup.dev</title> <title>Progress tracker</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link <link

3
tsconfig.json
View file

@ -24,6 +24,5 @@
"noUnusedLocals": false, "noUnusedLocals": false,
"noUnusedParameters": false, "noUnusedParameters": false,
"noPropertyAccessFromIndexSignature": false "noPropertyAccessFromIndexSignature": false
}, }
"exclude": ["node_modules", "dist", "build", "out", "coverage"]
} }