diff options
| author | Fuwn <[email protected]> | 2024-01-16 03:08:22 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-16 03:08:22 -0800 |
| commit | 23b224a408c5d3c57c9115d4ad91315719f096b6 (patch) | |
| tree | e951c1f05808c3fa6a3a7c399ecaedec8f68dcab /src | |
| parent | refactor(settings): rename thumbnail mode to cover (diff) | |
| download | due.moe-23b224a408c5d3c57c9115d4ad91315719f096b6.tar.xz due.moe-23b224a408c5d3c57c9115d4ad91315719f096b6.zip | |
feat(settings): customise anime cover width
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/List/Anime/CleanAnimeList.svelte | 6 | ||||
| -rw-r--r-- | src/lib/Settings/Categories/Display.svelte | 26 | ||||
| -rw-r--r-- | src/stores/settings.ts | 2 |
3 files changed, 32 insertions, 2 deletions
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte index 2fcde757..fa383dc6 100644 --- a/src/lib/List/Anime/CleanAnimeList.svelte +++ b/src/lib/List/Anime/CleanAnimeList.svelte @@ -67,7 +67,10 @@ {/if} {#if $settings.displayCoverMode} - <div id="covers"> + <div + id="covers" + style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`} + > {#each media as anime} {@const progress = (anime.mediaListEntry || { progress: 0 }).progress} @@ -217,7 +220,6 @@ gap: 0.5rem; row-gap: 1rem; margin-top: 0.5rem; - grid-template-columns: repeat(auto-fill, minmax(116.609px, 1fr)); } .cover { diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte index d09cdcbf..4b38bef1 100644 --- a/src/lib/Settings/Categories/Display.svelte +++ b/src/lib/Settings/Categories/Display.svelte @@ -99,7 +99,32 @@ <SettingCheckboxToggle setting="displayCoverMode" text="Show anime lists with media covers instead of text" + lineBreak={false} /> +{#if $settings.displayCoverMode} + + <input + type="number" + bind:value={$settings.displayCoverWidth} + min="1" + max="60" + placeholder="116.609" + size="6" + on:change={() => { + if ($settings.displayCoverWidth === null) { + $settings.displayCoverWidth = 116.609; + + return; + } + + $settings.displayCoverWidth < 50 && ($settings.displayCoverWidth = 50); + }} + /> + Cover width + <br /> +{:else} + <br /> +{/if} <SettingCheckboxToggle setting="displaySocialButton" text="Show social tab shortcut for media" /> <select bind:value={$settings.displayTitleFormat}> <option value="english">English</option> @@ -108,6 +133,7 @@ </select> Media title format {#if $settings.displayTitleFormat === 'native'} + <SettingCheckboxToggle setting="displayFurigana" text="Show furigana" /> {:else} <br /> diff --git a/src/stores/settings.ts b/src/stores/settings.ts index 8a6f5e03..b49429d5 100644 --- a/src/stores/settings.ts +++ b/src/stores/settings.ts @@ -33,6 +33,7 @@ export interface Settings { displayDisableAnimations: boolean; displayDisableNotifications: boolean; displayCoverMode: boolean; + displayCoverWidth: number; } const defaultSettings: Settings = { @@ -62,6 +63,7 @@ const defaultSettings: Settings = { displayDisableAnimations: false, displayDisableNotifications: false, displayCoverMode: false, + displayCoverWidth: 116.609, // Calculation calculateChaptersRoundedDown: true, |