From 23b224a408c5d3c57c9115d4ad91315719f096b6 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 16 Jan 2024 03:08:22 -0800
Subject: feat(settings): customise anime cover width

---
 src/lib/List/Anime/CleanAnimeList.svelte   |  6 ++++--
 src/lib/Settings/Categories/Display.svelte | 26 ++++++++++++++++++++++++++
 src/stores/settings.ts                     |  2 ++
 3 files changed, 32 insertions(+), 2 deletions(-)

(limited to 'src')

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}
+	&nbsp;
+	<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'}
+	&nbsp;
 	<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,
-- 
cgit v1.2.3