mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 12:50:01 +00:00
web/updates: make changelogs look nicer
- fixes horizontal scrolling on mobile - removes text backdrop - improves readability
This commit is contained in:
wukko
parent
1ec9d92eb2
commit
6e374fde62
3 changed files with 86 additions and 79 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue