From 6e374fde622988b5f7927f94cc00703786d24da1 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 17 Jul 2024 14:04:53 +0600
Subject: [PATCH] web/updates: make changelogs look nicer

- fixes horizontal scrolling on mobile
- removes text backdrop
- improves readability
---
 web/src/components/misc/ChangelogEntry.svelte | 80 ++++++++++---------
 .../misc/ChangelogEntryWrapper.svelte         |  6 +-
 web/src/routes/updates/+page.svelte           | 79 +++++++++---------
 3 files changed, 86 insertions(+), 79 deletions(-)

diff --git a/web/src/components/misc/ChangelogEntry.svelte b/web/src/components/misc/ChangelogEntry.svelte
index 902aa7ef..e4474aef 100644
--- a/web/src/components/misc/ChangelogEntry.svelte
+++ b/web/src/components/misc/ChangelogEntry.svelte
@@ -2,15 +2,17 @@
     export let version: string;
     export let title: string;
     export let date: string;
-    export let banner: { file: string, alt: string } | undefined;
+    export let banner: { file: string; alt: string } | undefined;
 </script>
 
 <main>
-    <h1>
-        <div class="changelog-version">{ version }</div>
-        <div class="changelog-title">{ title }</div>
-    </h1>
-    <small>{ date }</small>
+    <div id="changelog-header">
+        <div class="changelog-info">
+            <div class="changelog-version">{version}</div>
+            <div class="changelog-date">{date}</div>
+        </div>
+        <h1 class="changelog-title">{title}</h1>
+    </div>
     <div class="changelog-content">
         {#if banner}
             <img
@@ -27,53 +29,53 @@
 
 <style>
     main {
-        padding: 1em;
+        overflow-x: hidden;
     }
 
-    img {
-        max-width: 100%;
-    }
-
-    h1 {
-        padding-top: 1em;
-    }
-
-    .contents :global(.text-backdrop) {
-        border-radius: 4px;
-        background-color: var(--button);
-        color: var(--background);
-        padding: 0.3rem;
-    }
-
-    .contents :global(.text-backdrop.link) {
-        text-decoration: underline;
-    }
-
-    h1 {
+    #changelog-header {
         display: flex;
         flex-direction: column;
         align-items: start;
+        gap: calc(var(--padding) / 2);
+        padding: 1em 0; /* match default <p> padding */
     }
 
-    h1 .changelog-version {
-        padding: .15rem .5rem;
-        border-radius: 4px;
-        background-color: var(--button-hover);
+    .changelog-info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 14px;
     }
 
-    h1 .changelog-title {
-        padding: .15rem 0;
-        text-align: left;
+    .changelog-version {
+        padding: 3px 8px;
+        border-radius: 6px;
+        background-color: var(--secondary);
+        color: var(--primary);
+        font-size: 21px;
+        font-weight: 500;
+    }
+
+    .changelog-date {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--gray);
+    }
+
+    .changelog-title {
+        padding: 0;
+        line-height: 1.2;
     }
 
     .changelog-banner {
-        padding: 2em;
-        width: 100%;
-        max-height: 300pt;
-        min-height: 210pt;
         display: block;
         object-fit: cover;
+        max-height: 320pt;
+        min-height: 210pt;
+        width: 100%;
+        max-width: 100;
         aspect-ratio: 16/9;
+        border-radius: var(--padding);
     }
 
     .changelog-content {
@@ -84,5 +86,7 @@
 
     .contents {
         max-width: 100%;
+        line-height: 1.5;
+        font-size: 15px;
     }
 </style>
diff --git a/web/src/components/misc/ChangelogEntryWrapper.svelte b/web/src/components/misc/ChangelogEntryWrapper.svelte
index 6dc6e56a..d01b93f9 100644
--- a/web/src/components/misc/ChangelogEntryWrapper.svelte
+++ b/web/src/components/misc/ChangelogEntryWrapper.svelte
@@ -1,9 +1,9 @@
 <!-- Workaround for https://github.com/pngwn/MDsveX/issues/116 -->
 <script lang="ts">
     import ChangelogEntry from "./ChangelogEntry.svelte";
-    export let version = '';
-    export let title = '';
-    export let date = '';
+    export let version = "";
+    export let title = "";
+    export let date = "";
     export let banner = undefined;
 </script>
 
diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte
index 3691e055..d8532ec2 100644
--- a/web/src/routes/updates/+page.svelte
+++ b/web/src/routes/updates/+page.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-    import { t } from '$lib/i18n/translations';
-    import { page } from '$app/stores';
+    import { t } from "$lib/i18n/translations";
+    import { page } from "$app/stores";
 
-    import { getAllChangelogs } from '$lib/changelogs';
-    import type { ChangelogImport } from '$lib/types/changelogs';
+    import { getAllChangelogs } from "$lib/changelogs";
+    import type { ChangelogImport } from "$lib/types/changelogs";
 
-    import IconChevronLeft from '@tabler/icons-svelte/IconChevronLeft.svelte';
-    import IconChevronRight from '@tabler/icons-svelte/IconChevronRight.svelte';
+    import IconChevronLeft from "@tabler/icons-svelte/IconChevronLeft.svelte";
+    import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
 
     const changelogs = getAllChangelogs();
     const versions = Object.keys(changelogs);
 
-    let changelog: ChangelogImport & { version: string } | undefined;
+    let changelog: (ChangelogImport & { version: string }) | undefined;
     let currentIndex = 0;
 
     {
@@ -24,38 +24,36 @@
 
     const loadChangelog = async () => {
         const version = versions[currentIndex];
-        const log = await changelogs[version]() as ChangelogImport;
+        const log = (await changelogs[version]()) as ChangelogImport;
         if (!log) {
             return; // FIXME: now wot
         }
 
         changelog = {
             ...log,
-            version
+            version,
         };
 
         window.location.hash = version;
-    }
+    };
 
     const loadNext = () => {
-        if (currentIndex < versions.length - 1)
-            ++currentIndex;
-    }
+        if (currentIndex < versions.length - 1) ++currentIndex;
+    };
 
     const loadPrev = () => {
-        if (currentIndex > 0)
-            --currentIndex;
-    }
+        if (currentIndex > 0) --currentIndex;
+    };
 
     const preloadNext = () => {
         if (!next) return;
         changelogs[next]().catch(() => {});
-    }
+    };
 
     const handleKeydown = (e: KeyboardEvent) => {
-        if (e.key === 'ArrowLeft') loadPrev();
-        else if (e.key === 'ArrowRight') loadNext();
-    }
+        if (e.key === "ArrowLeft") loadPrev();
+        else if (e.key === "ArrowRight") loadNext();
+    };
 
     $: prev = versions[currentIndex - 1];
     $: next = versions[currentIndex + 1];
@@ -75,26 +73,29 @@
         <div class="button-wrapper-desktop">
             <button on:click={loadPrev} disabled={!prev}>
                 <IconChevronLeft />
-                { prev || '' }
+                {prev || ""}
             </button>
         </div>
         <div class="changelog-wrapper">
-                <svelte:component this={changelog.default} version={changelog.version} />
-                <div class="button-wrapper-mobile">
-                    <button on:click={loadPrev} disabled={!prev}>
-                        <IconChevronLeft />
-                        { prev || '' }
-                    </button>
-                    <button
-                        on:click={loadNext}
-                        on:focus={preloadNext}
-                        on:mousemove={preloadNext}
-                        disabled={!next}
-                    >
-                        { next || '' }
+            <svelte:component
+                this={changelog.default}
+                version={changelog.version}
+            />
+            <div class="button-wrapper-mobile">
+                <button on:click={loadPrev} disabled={!prev}>
+                    <IconChevronLeft />
+                    {prev || ""}
+                </button>
+                <button
+                    on:click={loadNext}
+                    on:focus={preloadNext}
+                    on:mousemove={preloadNext}
+                    disabled={!next}
+                >
+                    {next || ""}
                     <IconChevronRight />
                 </button>
-                </div>
+            </div>
         </div>
         <div class="button-wrapper-desktop">
             <button
@@ -103,7 +104,7 @@
                 on:mousemove={preloadNext}
                 disabled={!next}
             >
-                { next || '' }
+                {next || ""}
                 <IconChevronRight />
             </button>
         </div>
@@ -132,7 +133,9 @@
     }
 
     .changelog-wrapper {
-        max-width: 768pt;
+        max-width: 850px;
+        overflow-x: hidden;
+        padding: var(--padding);
     }
 
     button[disabled] {
@@ -144,7 +147,7 @@
         display: none;
     }
 
-    @media only screen and (max-width: 992pt) {
+    @media only screen and (max-width: 1150px) {
         .button-wrapper-mobile {
             display: flex;
             padding-bottom: 1rem;