hq/bpist-squalk-forum
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show the timeline on when replies are present

Browse source
This commit is contained in:
dtonon 2026-02-20 13:01:11 +01:00
parent 2e743b41e0
commit 4476d45228
3 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/lib/components/ThreadScrubber.svelte
View file

@ -22,6 +22,7 @@
let dragStartY = 0; let dragStartY = 0;
let dragStartScrollTop = 0; let dragStartScrollTop = 0;
const isOverflowing = $derived(scrollHeight > clientHeight);
const maxScroll = $derived(Math.max(scrollHeight - clientHeight, 1)); const maxScroll = $derived(Math.max(scrollHeight - clientHeight, 1));
const thumbHeight = $derived( const thumbHeight = $derived(
Math.max((clientHeight / scrollHeight) * trackHeight, 28), Math.max((clientHeight / scrollHeight) * trackHeight, 28),
@ -130,7 +131,7 @@
<div <div
class="sticky self-start flex-shrink-0 flex flex-col items-end select-none pt-1" class="sticky self-start flex-shrink-0 flex flex-col items-end select-none pt-1"
style="top: calc({topOffset}px - 1.5rem); height: 50vh; width: 72px;" style="top: calc({topOffset}px - 1.5rem); height: 50vh; width: 72px; visibility: {isOverflowing ? 'visible' : 'hidden'}; pointer-events: {isOverflowing ? 'auto' : 'none'};"
aria-hidden="true" aria-hidden="true"
> >
<!-- First post date --> <!-- First post date -->

7
src/routes/layout.css
View file

@ -10,6 +10,13 @@ body {
background-color: var(--color-gray-100); background-color: var(--color-gray-100);
} }
.no-scrollbar {
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
@theme { @theme {
--color-brand: #e32a6d; --color-brand: #e32a6d;
--color-brand-hover: #c4205a; --color-brand-hover: #c4205a;

6
src/routes/thread/[id]/+page.svelte
View file

@ -26,11 +26,15 @@
onMount(() => { onMount(() => {
const main = document.querySelector("main"); const main = document.querySelector("main");
if (!main) return; if (!main) return;
main.classList.add("no-scrollbar");
const onScroll = () => { const onScroll = () => {
isScrolled = main.scrollTop > 0; isScrolled = main.scrollTop > 0;
}; };
main.addEventListener("scroll", onScroll, { passive: true }); main.addEventListener("scroll", onScroll, { passive: true });
return () => main.removeEventListener("scroll", onScroll); return () => {
main.classList.remove("no-scrollbar");
main.removeEventListener("scroll", onScroll);
};
}); });
// Measure OP's natural distance from main's border top (once after DOM is ready) // Measure OP's natural distance from main's border top (once after DOM is ready)