feat(settings): move categories to details

1 files changed, 101 insertions, 87 deletions

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index cd213013..18aa42cc 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -30,113 +30,127 @@
 {#if data.user === undefined}
 	Please log in to modify settings.
 {:else}
-	<h2>Display</h2>
-
-	<SettingToggle setting={'forceLightTheme'} on={'Use preferred'} off={'Force light'}>
-		theme
-	</SettingToggle>
-	<SettingToggle
-		setting={'linkToAniList'}
-		on={'Link anime to LiveChart.me'}
-		off={'Link anime to AniList'}
-	/>
-	<SettingToggle setting={'displayPausedMedia'} on={'Hide'} off={'Show'} sectionBreak>
-		paused media
-	</SettingToggle>
+	<details open>
+		<summary>Display</summary>
+
+		<SettingToggle setting={'forceLightTheme'} on={'Use preferred'} off={'Force light'}>
+			theme
+		</SettingToggle>
+		<SettingToggle
+			setting={'linkToAniList'}
+			on={'Link anime to LiveChart.me'}
+			off={'Link anime to AniList'}
+		/>
+		<SettingToggle setting={'displayPausedMedia'} on={'Hide'} off={'Show'} sectionBreak>
+			paused media
+		</SettingToggle>
+
+		<p />
+
+		<SettingToggle setting={'showCompletedAnime'} on={'Hide'} off={'Show'}>
+			completed anime
+		</SettingToggle>
+		<SettingHint>Completed anime = anime on your lists which have finished airing</SettingHint>
+
+		<p />
+
+		<SettingToggle setting={'displayUnresolved'} on={'Hide'} off={'Show'}>unresolved</SettingToggle>
+		<SettingHint>Displays unresolved chapter counts as "?"</SettingHint>
+
+		<p />
+
+		<SettingToggle setting={'displayNotStarted'} on={'Hide'} off={'Show'}>
+			media with zero progress
+		</SettingToggle>
+		<SettingHint>
+			May cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
+				rate-limiting
+			</a> depending on how much releasing manga are on your lists
+		</SettingHint>
+
+		<p />
+
+		<SettingToggle setting={'closeAnimeByDefault'} on={'Expand'} off={'Close'}>
+			anime panel by default
+		</SettingToggle>
+		<SettingToggle setting={'closeMangaByDefault'} on={'Expand'} off={'Close'}>
+			manga panel by default
+		</SettingToggle>
+		<SettingToggle setting={'sortByDifference'}>
+			Sort anime by {@html !$settings.sortByDifference
+				? 'difference between last watched and next episode'
+				: 'days left until next episode'}
+		</SettingToggle>
+	</details>
 
 	<p />
 
-	<SettingToggle setting={'showCompletedAnime'} on={'Hide'} off={'Show'}>
-		completed anime
-	</SettingToggle>
-	<SettingHint>Completed anime = anime on your lists which have finished airing</SettingHint>
+	<details open>
+		<summary>Calculation</summary>
 
-	<p />
-
-	<SettingToggle setting={'displayUnresolved'} on={'Hide'} off={'Show'}>unresolved</SettingToggle>
-	<SettingHint>Displays unresolved chapter counts as "?"</SettingHint>
+		<SettingToggle setting={'roundDownChapters'} on={'Maintain'} off={'Round down'}>
+			chapters
+		</SettingToggle>
+		<SettingHint>
+			50/50.6 would {@html $settings.roundDownChapters ? '<b>not</b>' : ''} be due
+		</SettingHint>
+	</details>
 
 	<p />
 
-	<SettingToggle setting={'displayNotStarted'} on={'Hide'} off={'Show'}>
-		media with zero progress
-	</SettingToggle>
-	<SettingHint>
-		May cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
-			rate-limiting
-		</a> depending on how much releasing manga are on your lists
-	</SettingHint>
-
-	<p />
+	<details open>
+		<summary>Cache</summary>
 
-	<SettingToggle setting={'closeAnimeByDefault'} on={'Expand'} off={'Close'}>
-		anime panel by default
-	</SettingToggle>
-	<SettingToggle setting={'closeMangaByDefault'} on={'Expand'} off={'Close'}>
-		manga panel by default
-	</SettingToggle>
-	<SettingToggle setting={'sortByDifference'}>
-		Sort anime by {@html !$settings.sortByDifference
-			? 'difference between last watched and next episode'
-			: 'days left until next episode'}
-	</SettingToggle>
+		<a href={'#'} on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>
 
-	<h2>Calculation</h2>
+		<p />
 
-	<SettingToggle setting={'roundDownChapters'} on={'Maintain'} off={'Round down'}>
-		chapters
-	</SettingToggle>
-	<SettingHint>
-		50/50.6 would {@html $settings.roundDownChapters ? '<b>not</b>' : ''} be due
-	</SettingHint>
+		<a href={'#'} on:click={pruneAll}>Re-cache <b>ALL</b> manga</a>
+		<SettingHint lineBreak>Force a re-cache of all cached manga chapter counts</SettingHint>
 
-	<h2>Cache</h2>
+		<p />
 
-	<a href={'#'} on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>
+		<span>Re-cache <b>ALL</b> media keys every</span>
+		<input type="number" bind:value={$settings.cacheMinutes} min="1" max="60" placeholder="30" />
+		minutes
+		<SettingHint lineBreak>Media keys = your cached list data</SettingHint>
 
-	<p />
+		<p />
 
-	<a href={'#'} on:click={pruneAll}>Re-cache <b>ALL</b> manga</a>
-	<SettingHint lineBreak>Force a re-cache of all cached manga chapter counts</SettingHint>
+		<span>Re-cache <b>ALL</b> manga chapter counts every</span>
+		<input
+			type="number"
+			bind:value={$settings.cacheMangaMinutes}
+			min="1"
+			max="1440"
+			placeholder="60"
+		/>
+		minutes
+		<SettingHint lineBreak>
+			Low values may cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
+				rate-limiting
+			</a> depending on the amount of releasing manga are on your lists
+		</SettingHint>
+	</details>
 
 	<p />
 
-	<span>Re-cache <b>ALL</b> media keys every</span>
-	<input type="number" bind:value={$settings.cacheMinutes} min="1" max="60" placeholder="30" />
-	minutes
-	<SettingHint lineBreak>Media keys = your cached list data</SettingHint>
-
-	<p />
+	<details open>
+		<summary>Reset Settings</summary>
 
-	<span>Re-cache <b>ALL</b> manga chapter counts every</span>
-	<input
-		type="number"
-		bind:value={$settings.cacheMangaMinutes}
-		min="1"
-		max="1440"
-		placeholder="60"
-	/>
-	minutes
-	<SettingHint lineBreak>
-		Low values may cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
-			rate-limiting
-		</a> depending on the amount of releasing manga are on your lists
-	</SettingHint>
-
-	<h2>Reset</h2>
-
-	<a href={'#'} on:click={settings.reset}>Reset <b>ALL</b> settings</a>
-	<SettingHint lineBreak>
-		Resets all settings present on this page to their default values
-	</SettingHint>
+		<a href={'#'} on:click={settings.reset}>Reset <b>ALL</b> settings</a>
+		<SettingHint lineBreak>
+			Resets all settings present on this page to their default values
+		</SettingHint>
 
-	<p />
+		<p />
 
-	<a href={'#'} on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
-	<SettingHint lineBreak>
-		Doesn't break anything, but resets all settings and clears all key caches. Recommended after
-		updates
-	</SettingHint>
+		<a href={'#'} on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
+		<SettingHint lineBreak>
+			Doesn't break anything, but resets all settings and clears all key caches. Recommended after
+			updates
+		</SettingHint>
+	</details>
 {/if}
 
 <p />