From 7007b570131a5c715b8698b7cf2adb7f782e4632 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 16 Nov 2023 11:03:41 -0800
Subject: feat(wrapped): better options layout

---
 src/lib/Tools/Wrapped.svelte | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 107d70b0..69f4c3ce 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -329,29 +329,26 @@
 			corrected in the final image. Media covers may not appear on mobile Apple devices.
 		</p>
 
+		<div id="options">
+			<input type="checkbox" bind:checked={watermark} /> Enable watermark<br />
+			<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br />
+			<input type="checkbox" bind:checked={includeMusic} /> Include music<br />
+			<input type="checkbox" bind:checked={includeSpecials} /> Include specials and OVAs<br />
+			<input type="checkbox" bind:checked={abbreviateTitles} /> Fit long titles<br />
+			{#if abbreviateTitles}
+				Maximum title length <input type="number" bind:value={maxAbbreviateLength} /><br />
+			{/if}
+		</div>
+
+		<br />
+
 		<ul>
-			<li>
-				<input type="checkbox" bind:checked={watermark} /> Enable watermark
-			</li>
-			<li>
-				<input type="checkbox" bind:checked={transparency} /> Enable background transparency
-			</li>
-			<li>
-				<input type="checkbox" bind:checked={includeMusic} /> Include music
-				<input type="checkbox" bind:checked={includeSpecials} /> Include specials and OVAs
-			</li>
 			<li>
 				<a href={'#'} on:click={() => screenshot(true)}>Generate dark themed image</a>
 			</li>
 			<li>
 				<a href={'#'} on:click={() => screenshot()}>Generate light themed image</a>
 			</li>
-			<li>
-				<a href={'#'} on:click={() => (abbreviateTitles = !abbreviateTitles)}>
-					{abbreviateTitles ? 'Display full titles' : 'Abbreviate titles'}
-				</a>
-				<input type="number" bind:value={maxAbbreviateLength} />
-			</li>
 			<li>
 				<a href={'#'} target="_blank" id="wrapped-image-download">
 					Download generated image (generate first)
-- 
cgit v1.2.3