Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 04:39:58 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/updates: clean up components

Browse source
This commit is contained in:
wukko 2024-07-17 13:32:07 +06:00
parent 8eee024899
commit 1ec9d92eb2
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 70 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
web/src/components/misc/ChangelogEntry.svelte
View file

@ -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>

1
web/src/components/misc/ChangelogEntryWrapper.svelte
View file

@ -6,6 +6,7 @@
export let date = '';
export let banner = undefined;
</script>
<ChangelogEntry {version} {title} {date} {banner}>
<slot></slot>
</ChangelogEntry>

96
web/src/routes/updates/+page.svelte
View file

@ -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>