From a4f7a955f8f07644f8724252c51ea619eb260b99 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 5 Jan 2024 21:17:40 -0800
Subject: feat(wrapped): move generate into card

---
 src/lib/Tools/Wrapped.svelte | 201 +++++++++++++++++++++----------------------
 1 file changed, 98 insertions(+), 103 deletions(-)

(limited to 'src')

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 2c5009d7..ea2d7536 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -554,19 +554,13 @@
 					</div>
 				</div>
 				<div class="list">
-					<p>
-						<button on:click={screenshot} data-umami-event="Generate Wrapped">
-							Generate image
-						</button>
-					</p>
-
 					<div class:card={generated}>
 						<div id="wrapped-final" />
 
 						{#if generated}
 							<p />
 
-							<blockquote>
+							<blockquote style="margin: 0 0 0 1.5rem;">
 								Click on the image to download, or right click and select "Save Image As...".
 							</blockquote>
 						{/if}
@@ -576,102 +570,103 @@
 						<p />
 					{/if}
 
-					<details open>
-						<summary>Options</summary>
-						<div id="options">
-							<details class="no-shadow" open>
-								<summary>Display</summary>
-
-								<input type="checkbox" bind:checked={watermark} /> Show watermark<br />
-								<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br
-								/>
-								<input type="checkbox" bind:checked={lightMode} />
-								Enable light mode<br />
-								<input type="checkbox" bind:checked={topGenresTags} />
-								Show top genres and tags<br />
-								<input
-									type="checkbox"
-									bind:checked={disableActivityHistory}
-									disabled={selectedYear !== currentYear}
-								/>
-								Hide activity history<br />
-								<input type="checkbox" bind:checked={highestRatedMediaPercentage} /> Show highest
-								rated media percentages<br />
-								<input type="checkbox" bind:checked={highestRatedGenreTagPercentage} /> Show highest
-								rated genre and tag percentages<br />
-								<select bind:value={activityHistoryPosition}>
-									<option value="ORIGINAL">Original</option>
-									<option value="TOP">Top</option>
-									<option value="BELOW_TOP">Below Top</option>
-								</select>
-								Activity history position<br />
-								<select bind:value={highestRatedCount}>
-									{#each [3, 4, 5, 6, 7, 8, 9, 10] as count}
-										<option value={count}>{count}</option>
-									{/each}
-								</select>
-								Highest rated media count<br />
-								<select bind:value={genreTagCount}>
-									{#each [3, 4, 5, 6, 7, 8, 9, 10] as count}
-										<option value={count}>{count}</option>
-									{/each}
-								</select>
-								Highest genre and tag count<br />
-								<button on:click={updateWidth}>Find best fit</button>
-								<button on:click={() => (width -= 25)}>-25px</button>
-								<button on:click={() => (width += 25)}>+25px</button>
-								Width adjustment<br />
-							</details>
-
-							<details class="no-shadow" open>
-								<summary>Calculation</summary>
-
-								<input type="checkbox" bind:checked={useFullActivityHistory} />
-								Enable full-year activity<button class="smaller-button" on:click={pruneFullYear}
-									>Refresh data</button
-								>
-								<br />
-								<select bind:value={selectedYear}>
-									{#each Array.from({ length: currentYear - 2012 }) as _, i}
-										<option value={currentYear - i}>
-											{currentYear - i}
-										</option>
-									{/each}
-								</select>
-								Calculate for year<br />
-								<select bind:value={mediaSort}>
-									<option value={SortOptions.SCORE}>Score</option>
-									<option value={SortOptions.MINUTES_WATCHED}>Minutes Watched/Read</option>
-								</select>
-								Anime and manga sort<br />
-								<select bind:value={genreTagsSort}>
-									<option value={SortOptions.SCORE}>Score</option>
-									<option value={SortOptions.MINUTES_WATCHED}>Minutes Watched/Read</option>
-									<option value={SortOptions.COUNT}>Count</option>
-								</select>
-								Genre and tag sort<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<br />
-								<input type="checkbox" bind:checked={includeOVAs} /> Include OVAs<br />
-								<input type="checkbox" bind:checked={includeMovies} /> Include movies<br />
-								<input
-									type="text"
-									bind:value={excludedKeywordsInput}
-									on:keypress={(e) => {
-										e.key === 'Enter' && submitExcludedKeywords();
-									}}
-								/>
-								Excluded keywords
-								<button on:click={submitExcludedKeywords} title="Or click your Enter key"
-									>Submit</button
-								>
-								<br />
-								<SettingHint>Comma separated list (e.g., "My Hero, Kaguya")</SettingHint>
-							</details>
-						</div>
-					</details>
+					<div id="options" class="card">
+						<button on:click={screenshot} data-umami-event="Generate Wrapped">
+							Generate image
+						</button>
+
+						<details class="no-shadow" open>
+							<summary>Display</summary>
+
+							<input type="checkbox" bind:checked={watermark} /> Show watermark<br />
+							<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br
+							/>
+							<input type="checkbox" bind:checked={lightMode} />
+							Enable light mode<br />
+							<input type="checkbox" bind:checked={topGenresTags} />
+							Show top genres and tags<br />
+							<input
+								type="checkbox"
+								bind:checked={disableActivityHistory}
+								disabled={selectedYear !== currentYear}
+							/>
+							Hide activity history<br />
+							<input type="checkbox" bind:checked={highestRatedMediaPercentage} /> Show highest
+							rated media percentages<br />
+							<input type="checkbox" bind:checked={highestRatedGenreTagPercentage} /> Show highest
+							rated genre and tag percentages<br />
+							<select bind:value={activityHistoryPosition}>
+								<option value="ORIGINAL">Original</option>
+								<option value="TOP">Top</option>
+								<option value="BELOW_TOP">Below Top</option>
+							</select>
+							Activity history position<br />
+							<select bind:value={highestRatedCount}>
+								{#each [3, 4, 5, 6, 7, 8, 9, 10] as count}
+									<option value={count}>{count}</option>
+								{/each}
+							</select>
+							Highest rated media count<br />
+							<select bind:value={genreTagCount}>
+								{#each [3, 4, 5, 6, 7, 8, 9, 10] as count}
+									<option value={count}>{count}</option>
+								{/each}
+							</select>
+							Highest genre and tag count<br />
+							<button on:click={updateWidth}>Find best fit</button>
+							<button on:click={() => (width -= 25)}>-25px</button>
+							<button on:click={() => (width += 25)}>+25px</button>
+							Width adjustment<br />
+						</details>
+
+						<details class="no-shadow" open>
+							<summary>Calculation</summary>
+
+							<input type="checkbox" bind:checked={useFullActivityHistory} />
+							Enable full-year activity<button class="smaller-button" on:click={pruneFullYear}
+								>Refresh data</button
+							>
+							<br />
+							<select bind:value={selectedYear}>
+								{#each Array.from({ length: currentYear - 2012 }) as _, i}
+									<option value={currentYear - i}>
+										{currentYear - i}
+									</option>
+								{/each}
+							</select>
+							Calculate for year<br />
+							<select bind:value={mediaSort}>
+								<option value={SortOptions.SCORE}>Score</option>
+								<option value={SortOptions.MINUTES_WATCHED}>Minutes Watched/Read</option>
+							</select>
+							Anime and manga sort<br />
+							<select bind:value={genreTagsSort}>
+								<option value={SortOptions.SCORE}>Score</option>
+								<option value={SortOptions.MINUTES_WATCHED}>Minutes Watched/Read</option>
+								<option value={SortOptions.COUNT}>Count</option>
+							</select>
+							Genre and tag sort<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<br />
+							<input type="checkbox" bind:checked={includeOVAs} /> Include OVAs<br />
+							<input type="checkbox" bind:checked={includeMovies} /> Include movies<br />
+							<input
+								type="text"
+								bind:value={excludedKeywordsInput}
+								on:keypress={(e) => {
+									e.key === 'Enter' && submitExcludedKeywords();
+								}}
+							/>
+							Excluded keywords
+							<button on:click={submitExcludedKeywords} title="Or click your Enter key"
+								>Submit</button
+							>
+							<br />
+							<SettingHint>Comma separated list (e.g., "My Hero, Kaguya")</SettingHint>
+						</details>
+					</div>
 				</div>
 			</div>
 		{:catch}
-- 
cgit v1.2.3