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: focus the main content & fix ghost buttons

Browse source
This commit is contained in:
wukko 2024-07-23 14:13:05 +06:00
parent a9e8ea1306
commit 0d34bc0ab3
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 31 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,10 @@
const changelogs = getAllChangelogs(); const changelogs = getAllChangelogs();
const versions = Object.keys(changelogs); const versions = Object.keys(changelogs);
let changelog: Optional<{ version: string; page: Promise<ChangelogImport> }>; let changelog: Optional<{
version: string;
page: Promise<ChangelogImport>;
}>;
let currentIndex = 0; let currentIndex = 0;
{ {
@ -29,8 +32,8 @@
const version = versions[currentIndex]; const version = versions[currentIndex];
changelog = { changelog = {
version, version,
page: changelogs[version]() as Promise<ChangelogImport> page: changelogs[version]() as Promise<ChangelogImport>,
} };
window.location.hash = version; window.location.hash = version;
await changelog.page; await changelog.page;
@ -67,7 +70,7 @@
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown} />
<div class="news"> <main class="news" data-first-focus tabindex="-1">
{#if changelog} {#if changelog}
<div id="left-button" class="button-wrapper-desktop"> <div id="left-button" class="button-wrapper-desktop">
{#if prev} {#if prev}
@ -89,20 +92,24 @@
version={changelog.version} version={changelog.version}
/> />
{/await} {/await}
<div class="button-wrapper-mobile">
<button on:click={loadPrev} disabled={!prev}> <div class="button-wrapper-mobile" class:only-right={!prev}>
<IconArrowLeft /> {#if prev}
{prev || ""} <button on:click={loadPrev}>
</button> <IconArrowLeft />
<button {prev || ""}
on:click={loadNext} </button>
on:focus={preloadNext} {/if}
on:mousemove={preloadNext} {#if next}
disabled={!next} <button
> on:click={loadNext}
{next || ""} on:focus={preloadNext}
<IconArrowRight /> on:mousemove={preloadNext}
</button> >
{next || ""}
<IconArrowRight />
</button>
{/if}
</div> </div>
</div> </div>
<div id="right-button" class="button-wrapper-desktop"> <div id="right-button" class="button-wrapper-desktop">
@ -118,7 +125,7 @@
{/if} {/if}
</div> </div>
{/if} {/if}
</div> </main>
<style> <style>
.news { .news {
@ -158,12 +165,6 @@
padding-top: calc(var(--padding) + 1em); padding-top: calc(var(--padding) + 1em);
} }
button[disabled] {
opacity: 0;
cursor: default;
pointer-events: none;
}
.button-wrapper-mobile { .button-wrapper-mobile {
display: none; display: none;
} }
@ -176,6 +177,10 @@
justify-content: space-between; justify-content: space-between;
} }
.button-wrapper-mobile.only-right {
justify-content: end;
}
.button-wrapper-desktop { .button-wrapper-desktop {
display: none; display: none;
} }
@ -183,7 +188,7 @@
@media screen and (max-width: 535px) { @media screen and (max-width: 535px) {
.changelog-wrapper { .changelog-wrapper {
padding-top: var(--padding) padding-top: var(--padding);
} }
} }
</style> </style>