feat(wrapped): options tab

1 files changed, 49 insertions, 32 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 3602c0e9..070643e8 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -42,30 +42,37 @@
 
 	const updateWidth = () => {
 		const wrappedContainer = document.querySelector('#wrapped') as HTMLElement;
-		let maxWidth = 0;
 
-		if (!wrappedContainer) return;
+		wrappedContainer.style.width = `100%`;
 
-		wrappedContainer.querySelectorAll('.category').forEach((item) => {
-			let category = item as HTMLElement;
+		const reset = () => {
+			let maxWidth = 0;
 
-			if (category.offsetWidth > maxWidth) {
-				maxWidth = category.offsetWidth;
-			}
-		});
+			if (!wrappedContainer) return;
+
+			wrappedContainer.querySelectorAll('.category').forEach((item) => {
+				let category = item as HTMLElement;
+
+				if (category.offsetWidth > maxWidth) {
+					maxWidth = category.offsetWidth;
+				}
+			});
 
-		wrappedContainer.style.width = `calc(${maxWidth * 2}px + 1%)`;
-		width = wrappedContainer.offsetWidth;
+			wrappedContainer.style.width = `calc(${maxWidth * 2}px + 1%)`;
+			width = wrappedContainer.offsetWidth;
+		};
+
+		for (let i = 0; i < 5; i++) reset();
 	};
 
 	onMount(async () => {
-		new MutationObserver((_mutations) => {
-			updateWidth();
-			updateWidth();
-		}).observe(document.querySelector('#wrapped')!, {
-			childList: true,
-			subtree: true
-		});
+		new MutationObserver((_mutations) => updateWidth()).observe(
+			document.querySelector('#wrapped')!,
+			{
+				childList: true,
+				subtree: true
+			}
+		);
 
 		if (user !== undefined) {
 			if ($userIdentity === '') {
@@ -370,23 +377,33 @@
 			<br />
 
 			<p>
-				Don't be alarmed! The background will appear as its inverse in the preview, but will be
-				corrected in the final image. Media covers may not appear on mobile Apple devices.
+				<small>
+					Don't be alarmed! The background will appear as its inverse in the preview, but will be
+					corrected in the final image. Media covers may not appear on mobile Apple devices.
+				</small>
 			</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={includeRepeats} /> Include rewatches & rereads<br />
-				<input type="checkbox" bind:checked={includeSpecials} /> Include specials and OVAs<br />
-				Manual Width Override ({width} px):
-				<input type="range" min="1" max="1920" bind:value={width} /><br />
-				<input type="checkbox" bind:checked={abbreviateTitles} /> Fit long titles<br />
-				{#if abbreviateTitles}
-					Maximum title length <input type="range" min="4" bind:value={maxAbbreviateLength} /><br />
-				{/if}
-			</div>
+			<details>
+				<summary>Options</summary>
+				<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={includeRepeats} /> Include rewatches & rereads<br />
+					<input type="checkbox" bind:checked={includeSpecials} /> Include specials and OVAs<br />
+					<br />
+					Manual width override
+					<input type="range" min="1" max="1920" bind:value={width} />
+					<a href={'#'} on:click={updateWidth}>Reset</a>
+					<br />
+					<br />
+					<input type="checkbox" bind:checked={abbreviateTitles} /> Fit long titles<br />
+					{#if abbreviateTitles}
+						Maximum title length <input type="range" min="4" bind:value={maxAbbreviateLength} /><br
+						/>
+					{/if}
+				</div>
+			</details>
 
 			<br />