web/updates: hide navigation buttons when nowhere to navigate

- removed box shadow on desktop
- centered button vertically with flex
This commit is contained in:
wukko 2024-07-21 17:22:22 +06:00
parent 88fa780f6d
commit 213f2d2c92
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2

View file

@ -68,11 +68,13 @@
<div class="news"> <div class="news">
{#if changelog} {#if changelog}
<div class="button-wrapper-desktop"> <div id="left-button" class="button-wrapper-desktop">
<button on:click={loadPrev} disabled={!prev}> {#if prev}
<IconChevronLeft /> <button on:click={loadPrev}>
{prev || ""} <IconChevronLeft />
</button> {prev || ""}
</button>
{/if}
</div> </div>
<div class="changelog-wrapper"> <div class="changelog-wrapper">
{#await changelog.page} {#await changelog.page}
@ -102,16 +104,17 @@
</button> </button>
</div> </div>
</div> </div>
<div class="button-wrapper-desktop"> <div id="right-button" class="button-wrapper-desktop">
<button {#if next}
on:click={loadNext} <button
on:focus={preloadNext} on:click={loadNext}
on:mousemove={preloadNext} on:focus={preloadNext}
disabled={!next} on:mousemove={preloadNext}
> >
{next || ""} {next || ""}
<IconChevronRight /> <IconChevronRight />
</button> </button>
{/if}
</div> </div>
{/if} {/if}
</div> </div>
@ -127,16 +130,21 @@
.button-wrapper-desktop { .button-wrapper-desktop {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
height: 100%;
} }
.button-wrapper-desktop button { .button-wrapper-desktop button {
position: absolute; position: absolute;
top: 50%;
background-color: transparent; background-color: transparent;
display: flex; display: flex;
border: none; border: none;
} }
.button-wrapper-desktop button:not(:focus-visible) {
box-shadow: none;
}
.changelog-wrapper { .changelog-wrapper {
flex: 1; flex: 1;
max-width: 850px; max-width: 850px;
@ -146,8 +154,9 @@
} }
button[disabled] { button[disabled] {
opacity: 0.5; opacity: 0;
cursor: default; cursor: default;
pointer-events: none;
} }
.button-wrapper-mobile { .button-wrapper-mobile {