feat(wrapped): calculate min width required

1 files changed, 44 insertions, 14 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index f8879814..3602c0e9 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -40,7 +40,33 @@
 		update().then(() => {});
 	}
 
+	const updateWidth = () => {
+		const wrappedContainer = document.querySelector('#wrapped') as HTMLElement;
+		let maxWidth = 0;
+
+		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;
+	};
+
 	onMount(async () => {
+		new MutationObserver((_mutations) => {
+			updateWidth();
+			updateWidth();
+		}).observe(document.querySelector('#wrapped')!, {
+			childList: true,
+			subtree: true
+		});
+
 		if (user !== undefined) {
 			if ($userIdentity === '') {
 				userIdentity.set(JSON.stringify(await getUserIdentity(user)));
@@ -210,10 +236,14 @@
 		Please log in to view this page.
 	{:else if currentUserIdentity.id !== -1}
 		{#await wrapped(user, currentUserIdentity)}
-			Loading ...
+			Loading ...
 		{:then wrapped}
-			<div class:light-theme={darkTheme} class="categories-grid">
-				<div class="grid-item image-grid avatar-grid">
+			<div
+				class:light-theme={darkTheme}
+				class="categories-grid"
+				style={`background-color: ${transparency ? '#0b16227f' : '#0b1622'};`}
+			>
+				<div class="grid-item image-grid avatar-grid category">
 					<a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank">
 						<img src={wrapped.avatar.large} alt="User Avatar" />
 					</a>
@@ -233,10 +263,10 @@
 						</div>
 						<div>
 							Days Active: {#await activityHistory(currentUserIdentity)}
-								Loading ...
+								Loading&nbsp;...
 							{:then activities}
 								{#if activities === undefined}
-									Loading ...
+									Loading&nbsp;...
 								{:else}
 									{fillMissingDays(activities, true).filter((a) => a.amount !== 0).length}/365
 								{/if}
@@ -244,7 +274,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="category-grid pure-category">
+				<div class="category-grid pure-category category">
 					<div class="grid-item">
 						<b>Anime</b>
 					</div>
@@ -256,7 +286,7 @@
 					</div>
 					<div class="grid-item">Episodes: {episodes}</div>
 				</div>
-				<div class="category-grid pure-category">
+				<div class="category-grid pure-category category">
 					<div class="grid-item">
 						<b>Manga</b>
 					</div>
@@ -270,7 +300,7 @@
 						Chapters: {chapters}
 					</div>
 				</div>
-				<div class="category-grid pure-category">
+				<div class="category-grid pure-category category">
 					<div class="grid-item image-grid">
 						{#if animeList !== undefined}
 							<a href={`https://anilist.co/anime/${animeList[0].id}`} target="_blank">
@@ -297,11 +327,11 @@
 								</ol>
 							</div>
 						{:else}
-							Loading ...
+							Loading&nbsp;...
 						{/if}
 					</div>
 				</div>
-				<div class="category-grid pure-category">
+				<div class="category-grid pure-category category">
 					<div class="grid-item image-grid">
 						{#if mangaList !== undefined}
 							<a href={`https://anilist.co/manga/${mangaList[0].id}`} target="_blank">
@@ -328,7 +358,7 @@
 								</ol>
 							</div>
 						{:else}
-							Loading ...
+							Loading&nbsp;...
 						{/if}
 					</div>
 				</div>
@@ -350,7 +380,8 @@
 				<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 />
-				Width ({width} px): <input type="range" min="1" max="1920" bind:value={width} /><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 />
@@ -380,7 +411,7 @@
 			<Error />
 		{/await}
 	{:else}
-		Loading ...
+		Loading&nbsp;...
 	{/if}
 </div>
 
@@ -396,7 +427,6 @@
 		padding: 2%;
 		justify-content: center;
 		/* filter: invert(0) !important; */
-		background-color: #0b1622;
 		font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell,
 			Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 	}