Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/updates: make page scrollable on navigation sides on desktop

Browse source
This commit is contained in:
dumbmoron 2024-07-23 10:32:18 +00:00
parent 61e47b38d1
commit c32a5301a0
No known key found for this signature in database
1 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
web/src/routes/updates/+page.svelte
View file

@ -19,6 +19,7 @@
page: Promise<ChangelogImport>; page: Promise<ChangelogImport>;
}>; }>;
let currentIndex = 0; let currentIndex = 0;
let wrapper: HTMLDivElement;
{ {
const hash = $page.url.hash.replace("#", ""); const hash = $page.url.hash.replace("#", "");
@ -57,6 +58,17 @@
else if (e.key === "ArrowRight") loadNext(); else if (e.key === "ArrowRight") loadNext();
}; };
const handleScroll = (e: WheelEvent) => {
if (!(e.target instanceof HTMLElement)) {
return;
}
if (!wrapper.contains(e.target)) {
wrapper.scrollTop += e.deltaY;
e.preventDefault();
}
}
$: prev = versions[currentIndex - 1]; $: prev = versions[currentIndex - 1];
$: next = versions[currentIndex + 1]; $: next = versions[currentIndex + 1];
$: currentIndex, loadChangelog(); $: currentIndex, loadChangelog();
@ -68,9 +80,17 @@
</title> </title>
</svelte:head> </svelte:head>
<svelte:window on:keydown={handleKeydown} /> <svelte:window
on:keydown={handleKeydown}
/>
<div class="news" tabindex="-1" data-first-focus data-focus-ring-hidden> <div
class="news"
tabindex="-1"
data-first-focus
data-focus-ring-hidden
on:wheel={handleScroll}
>
{#if changelog} {#if changelog}
<div id="left-button" class="button-wrapper-desktop"> <div id="left-button" class="button-wrapper-desktop">
{#if prev} {#if prev}
@ -80,7 +100,7 @@
</button> </button>
{/if} {/if}
</div> </div>
<div class="changelog-wrapper"> <div class="changelog-wrapper" bind:this={wrapper}>
{#await changelog.page} {#await changelog.page}
{#key changelog.version} {#key changelog.version}
<ChangelogSkeleton version={changelog.version} /> <ChangelogSkeleton version={changelog.version} />