From 1ec9d92eb2123b33e153a86962521d336e182a0d Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Wed, 17 Jul 2024 13:32:07 +0600 Subject: [PATCH] web/updates: clean up components --- web/src/components/misc/ChangelogEntry.svelte | 41 ++++---- .../misc/ChangelogEntryWrapper.svelte | 1 + web/src/routes/updates/+page.svelte | 96 +++++++++---------- 3 files changed, 70 insertions(+), 68 deletions(-) diff --git a/web/src/components/misc/ChangelogEntry.svelte b/web/src/components/misc/ChangelogEntry.svelte index 7991e304..902aa7ef 100644 --- a/web/src/components/misc/ChangelogEntry.svelte +++ b/web/src/components/misc/ChangelogEntry.svelte @@ -4,6 +4,27 @@ export let date: string; 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 class="changelog-content"> + {#if banner} + <img + src={`/update-banners/${banner.file}`} + alt={banner.alt} + class="changelog-banner" + /> + {/if} + <div class="contents"> + <slot></slot> + </div> + </div> +</main> + <style> main { padding: 1em; @@ -64,24 +85,4 @@ .contents { max-width: 100%; } - </style> -<main> - <h1> - <div class="changelog-version">{ version }</div> - <div class="changelog-title">{ title }</div> - </h1> - <small>{ date }</small> - <div class="changelog-content"> - {#if banner} - <img - src={`/update-banners/${banner.file}`} - alt={banner.alt} - class="changelog-banner" - /> - {/if} - <div class="contents"> - <slot></slot> - </div> - </div> -</main> diff --git a/web/src/components/misc/ChangelogEntryWrapper.svelte b/web/src/components/misc/ChangelogEntryWrapper.svelte index 3821fa42..6dc6e56a 100644 --- a/web/src/components/misc/ChangelogEntryWrapper.svelte +++ b/web/src/components/misc/ChangelogEntryWrapper.svelte @@ -6,6 +6,7 @@ export let date = ''; export let banner = undefined; </script> + <ChangelogEntry {version} {title} {date} {banner}> <slot></slot> </ChangelogEntry> diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte index 5cbaf12f..3691e055 100644 --- a/web/src/routes/updates/+page.svelte +++ b/web/src/routes/updates/+page.svelte @@ -62,6 +62,54 @@ $: currentIndex, loadChangelog(); </script> +<svelte:head> + <title> + {$t("general.cobalt")}: {$t("tabs.updates")} + </title> +</svelte:head> + +<svelte:window on:keydown={handleKeydown} /> + +<div class="news"> + {#if changelog} + <div class="button-wrapper-desktop"> + <button on:click={loadPrev} disabled={!prev}> + <IconChevronLeft /> + { 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 || '' } + <IconChevronRight /> + </button> + </div> + </div> + <div class="button-wrapper-desktop"> + <button + on:click={loadNext} + on:focus={preloadNext} + on:mousemove={preloadNext} + disabled={!next} + > + { next || '' } + <IconChevronRight /> + </button> + </div> + {/if} +</div> + <style> .news { display: flex; @@ -110,51 +158,3 @@ } } </style> - -<svelte:head> - <title> - {$t("general.cobalt")}: {$t("tabs.updates")} - </title> -</svelte:head> - -<svelte:window on:keydown={handleKeydown} /> - -<div class="news"> - {#if changelog} - <div class="button-wrapper-desktop"> - <button on:click={loadPrev} disabled={!prev}> - <IconChevronLeft /> - { 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 || '' } - <IconChevronRight /> - </button> - </div> - </div> - <div class="button-wrapper-desktop"> - <button - on:click={loadNext} - on:focus={preloadNext} - on:mousemove={preloadNext} - disabled={!next} - > - { next || '' } - <IconChevronRight /> - </button> - </div> - {/if} -</div>