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 {