From 4ae25847a2c13a703babb90443efe536250d8156 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 4 Jan 2024 17:51:15 -0800
Subject: refactor(tools): better cards

---
 src/lib/Tools/Wrapped.svelte | 122 ++++++++++++++++++++++---------------------
 1 file changed, 63 insertions(+), 59 deletions(-)

(limited to 'src/lib/Tools/Wrapped.svelte')

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 83b58cd1..0cd124a2 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -493,54 +493,56 @@
 			{@html nbsp('Loading user data ...')}
 		{:then wrapped}
 			<div id="list-container">
-				<div
-					id="wrapped"
-					class:light-theme={lightMode}
-					style={`width: ${width}px; flex-shrink: 0;`}
-					class:transparent={transparency}
-				>
-					{#if !disableActivityHistory && activityHistoryPosition === 'TOP' && activities.length > 0 && selectedYear === currentYear}
-						<ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
-					{/if}
-					<div class="categories-grid" style="padding-bottom: 0;">
-						<Activity
-							{wrapped}
-							identity={currentUserIdentity}
-							year={selectedYear}
-							{activities}
-							{useFullActivityHistory}
+				<div class="card">
+					<div
+						id="wrapped"
+						class:light-theme={lightMode}
+						style={`width: ${width}px; flex-shrink: 0;`}
+						class:transparent={transparency}
+					>
+						{#if !disableActivityHistory && activityHistoryPosition === 'TOP' && activities.length > 0 && selectedYear === currentYear}
+							<ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
+						{/if}
+						<div class="categories-grid" style="padding-bottom: 0;">
+							<Activity
+								{wrapped}
+								identity={currentUserIdentity}
+								year={selectedYear}
+								{activities}
+								{useFullActivityHistory}
+								{updateWidth}
+							/>
+							<Anime {animeList} {minutesWatched} {episodes} />
+							<Manga {mangaList} {chapters} />
+						</div>
+						{#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP' && activities.length > 0 && selectedYear === currentYear}
+							<ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
+						{/if}
+						<MediaPanel
+							{animeList}
+							{mangaList}
+							{highestRatedMediaPercentage}
+							{highestRatedCount}
 							{updateWidth}
+							{wrapped}
+							{animeMostTitle}
+							{mangaMostTitle}
 						/>
-						<Anime {animeList} {minutesWatched} {episodes} />
-						<Manga {mangaList} {chapters} />
+						{#if topMedia && topGenresTags && ((topMedia.topGenreMedia && topMedia.genres.length > 0) || (topMedia.topTagMedia && topMedia.tags.length > 0))}
+							<MediaExtras
+								{topMedia}
+								{genreTagTitle}
+								{highestRatedGenreTagPercentage}
+								{updateWidth}
+							/>
+						{/if}
+						{#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL' && activities.length > 0 && selectedYear === currentYear}
+							<ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
+						{/if}
+						{#if watermark}
+							<Watermark />
+						{/if}
 					</div>
-					{#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP' && activities.length > 0 && selectedYear === currentYear}
-						<ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
-					{/if}
-					<MediaPanel
-						{animeList}
-						{mangaList}
-						{highestRatedMediaPercentage}
-						{highestRatedCount}
-						{updateWidth}
-						{wrapped}
-						{animeMostTitle}
-						{mangaMostTitle}
-					/>
-					{#if topMedia && topGenresTags && ((topMedia.topGenreMedia && topMedia.genres.length > 0) || (topMedia.topTagMedia && topMedia.tags.length > 0))}
-						<MediaExtras
-							{topMedia}
-							{genreTagTitle}
-							{highestRatedGenreTagPercentage}
-							{updateWidth}
-						/>
-					{/if}
-					{#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL' && activities.length > 0 && selectedYear === currentYear}
-						<ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
-					{/if}
-					{#if watermark}
-						<Watermark />
-					{/if}
 				</div>
 				<div class="list">
 					<p>
@@ -549,6 +551,22 @@
 						</button>
 					</p>
 
+					<div class:card={generated}>
+						<div id="wrapped-final" />
+
+						{#if generated}
+							<p />
+
+							<blockquote>
+								Click on the image to download, or right click and select "Save Image As...".
+							</blockquote>
+						{/if}
+					</div>
+
+					{#if generated}
+						<p />
+					{/if}
+
 					<details open>
 						<summary>Options</summary>
 						<div id="options">
@@ -596,8 +614,6 @@
 								Width adjustment<br />
 							</details>
 
-							<p />
-
 							<details open>
 								<summary>Calculation</summary>
 
@@ -647,18 +663,6 @@
 							</details>
 						</div>
 					</details>
-
-					<p />
-
-					<div id="wrapped-final" />
-
-					{#if generated}
-						<p />
-
-						<blockquote>
-							Click on the image to download, or right click and select "Save Image As...".
-						</blockquote>
-					{/if}
 				</div>
 			</div>
 		{:catch}
-- 
cgit v1.2.3