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