feat(settings): nicer settings page

1 files changed, 112 insertions, 98 deletions

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 873cc8fe..f1ea627f 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -48,102 +48,116 @@
 {#if data.user === undefined}
 	Please log in to modify settings.
 {:else}
-	<ul>
-		<li>
-			<a
-				href={'#'}
-				on:click={() =>
-					$displayUnresolved === 'true'
-						? displayUnresolved.set('false')
-						: displayUnresolved.set('true')}
-				>{$displayUnresolved === 'true' ? 'Hide' : 'Show'} unresolved</a
-			>
-			<small style="opacity: 50%;">Displays unresolved chapter counts as "?"</small>
-		</li>
-		<li>
-			<a
-				href={'#'}
-				on:click={() =>
-					$displayNotStarted === 'true'
-						? displayNotStarted.set('false')
-						: displayNotStarted.set('true')}
-				>{$displayNotStarted === 'true' ? 'Hide' : 'Show'} media with zero progress</a
-			>
-			<small style="opacity: 50%;"
-				>May cause <a href="https://en.wikipedia.org/wiki/Rate_limiting">rate-limiting</a> depending
-				on how much releasing manga are on your lists</small
-			>
-		</li>
-		<li>
-			<a
-				href={'#'}
-				on:click={() =>
-					$roundDownChapters === 'true'
-						? roundDownChapters.set('false')
-						: roundDownChapters.set('true')}
-				>{$roundDownChapters === 'false' ? 'Round down' : 'Maintain'} chapters</a
-			>
-			<small style="opacity: 50%;"
-				>50/50.6 would {@html $roundDownChapters === 'true' ? '<b>not</b>' : ''} be due</small
-			>
-		</li>
-		<li>
-			<a
-				href={'#'}
-				on:click={() =>
-					$closeAnimeByDefault === 'true'
-						? closeAnimeByDefault.set('false')
-						: closeAnimeByDefault.set('true')}
-				>{$closeAnimeByDefault === 'true' ? 'Expand' : 'Close'} anime panel by default</a
-			>
-		</li>
-		<li>
-			<a
-				href={'#'}
-				on:click={() =>
-					$closeMangaByDefault === 'true'
-						? closeMangaByDefault.set('false')
-						: closeMangaByDefault.set('true')}
-				>{$closeMangaByDefault === 'true' ? 'Expand' : 'Close'} manga panel by default</a
-			>
-		</li>
-		<li>
-			<a
-				href={'#'}
-				on:click={() =>
-					$sortByDifference === 'true'
-						? sortByDifference.set('false')
-						: sortByDifference.set('true')}
-				>Sort anime by {@html $sortByDifference === 'false'
-					? 'difference between last watched and next episode'
-					: 'days left until next episode'}</a
-			>
-		</li>
-		<li>
-			<a href={'#'} on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>
-		</li>
-		<li><a href={'#'} on:click={pruneAll}>Re-cache <b>ALL</b> manga</a></li>
-		<li>
-			Re-cache <b>ALL</b> media keys every
-			<input type="number" bind:value={$cacheMinutes} min="1" max="60" placeholder="30" /> minutes
-		</li>
-		<li>
-			Re-cache <b>ALL</b> manga chapter counts every
-			<input type="number" bind:value={$cacheMangaMinutes} min="1" max="1440" placeholder="60" />
-			minutes
-			<small style="opacity: 50%;"
-				>Low values may cause <a href="https://en.wikipedia.org/wiki/Rate_limiting">rate-limiting</a
-				> depending on how much releasing manga are on your lists</small
-			>
-		</li>
-		<li>
-			<a href={'#'} on:click={resetSettings}>Reset <b>ALL</b> settings</a>
-		</li>
-		<li>
-			<a href={'#'} on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
-			<small style="opacity: 50%;"
-				>Doesn't break anything, but resets all settings and key caches. Recommended after updates</small
-			>
-		</li>
-	</ul>
+	<h2>Display</h2>
+
+	<a
+		href={'#'}
+		on:click={() =>
+			$displayUnresolved === 'true'
+				? displayUnresolved.set('false')
+				: displayUnresolved.set('true')}
+		>{$displayUnresolved === 'true' ? 'Hide' : 'Show'} unresolved</a
+	>
+	<br />
+	<small style="opacity: 50%;">Displays unresolved chapter counts as "?"</small>
+
+	<p />
+
+	<a
+		href={'#'}
+		on:click={() =>
+			$displayNotStarted === 'true'
+				? displayNotStarted.set('false')
+				: displayNotStarted.set('true')}
+		>{$displayNotStarted === 'true' ? 'Hide' : 'Show'} media with zero progress</a
+	>
+	<br />
+	<small style="opacity: 50%;"
+		>May cause <a href="https://en.wikipedia.org/wiki/Rate_limiting">rate-limiting</a> depending on how
+		much releasing manga are on your lists</small
+	>
+
+	<p />
+
+	<a
+		href={'#'}
+		on:click={() =>
+			$closeAnimeByDefault === 'true'
+				? closeAnimeByDefault.set('false')
+				: closeAnimeByDefault.set('true')}
+		>{$closeAnimeByDefault === 'true' ? 'Expand' : 'Close'} anime panel by default</a
+	>
+
+	<br />
+
+	<a
+		href={'#'}
+		on:click={() =>
+			$closeMangaByDefault === 'true'
+				? closeMangaByDefault.set('false')
+				: closeMangaByDefault.set('true')}
+		>{$closeMangaByDefault === 'true' ? 'Expand' : 'Close'} manga panel by default</a
+	>
+
+	<br />
+
+	<a
+		href={'#'}
+		on:click={() =>
+			$sortByDifference === 'true' ? sortByDifference.set('false') : sortByDifference.set('true')}
+		>Sort anime by {@html $sortByDifference === 'false'
+			? 'difference between last watched and next episode'
+			: 'days left until next episode'}</a
+	>
+
+	<h2>Calculation</h2>
+
+	<a
+		href={'#'}
+		on:click={() =>
+			$roundDownChapters === 'true'
+				? roundDownChapters.set('false')
+				: roundDownChapters.set('true')}
+		>{$roundDownChapters === 'false' ? 'Round down' : 'Maintain'} chapters</a
+	>
+	<br />
+	<small style="opacity: 50%;"
+		>50/50.6 would {@html $roundDownChapters === 'true' ? '<b>not</b>' : ''} be due</small
+	>
+
+	<h2>Cache</h2>
+
+	<a href={'#'} on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>
+
+	<br />
+
+	<a href={'#'} on:click={pruneAll}>Re-cache <b>ALL</b> manga</a>
+
+	<br />
+
+	Re-cache <b>ALL</b> media keys every
+	<input type="number" bind:value={$cacheMinutes} min="1" max="60" placeholder="30" /> minutes
+
+	<p />
+
+	<span>Re-cache <b>ALL</b> manga chapter counts every</span>
+	<input type="number" bind:value={$cacheMangaMinutes} min="1" max="1440" placeholder="60" />
+	minutes
+	<br />
+	<small style="opacity: 50%;"
+		>Low values may cause <a href="https://en.wikipedia.org/wiki/Rate_limiting">rate-limiting</a> depending
+		on how much releasing manga are on your lists</small
+	>
+
+	<h2>Reset</h2>
+
+	<a href={'#'} on:click={resetSettings}>Reset <b>ALL</b> settings</a>
+
+	<p />
+
+	<a href={'#'} on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
+	<br />
+	<small style="opacity: 50%;"
+		>Doesn't break anything, but resets all settings and key caches. Recommended after updates</small
+	>
 {/if}