From 213f2d2c9251a2e5d6ebff60ecd9f60d8705e5ea Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Sun, 21 Jul 2024 17:22:22 +0600 Subject: [PATCH] web/updates: hide navigation buttons when nowhere to navigate - removed box shadow on desktop - centered button vertically with flex --- web/src/routes/updates/+page.svelte | 43 +++++++++++++++++------------ 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte index 0ebce5cd..1cd59664 100644 --- a/web/src/routes/updates/+page.svelte +++ b/web/src/routes/updates/+page.svelte @@ -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 {