From cf321fc68a413703ba695c28c69649f9aa4cf273 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Sun, 30 Oct 2022 23:08:33 -0500
Subject: [PATCH] Change max width of main tag, fix button icon formatting, and
 change description transistions.

---
 src/routes/+layout.svelte         |  7 ++-
 src/routes/game/[id]/+page.svelte | 91 +++++++++++++++++--------------
 2 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a56e4d4..c78838a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -129,11 +129,12 @@
 		max-width: 850px;
 		margin: 0 auto;
 		padding: 2rem 0rem;
-		max-width: 80%;
+		max-width: 80vw;
 
-		@media (min-width: 1500px) {
-			max-width: 60%;
+		@media (min-width: 1600px) {
+			max-width: 65vw;
 		}
+
 		box-sizing: border-box;
 	}
 
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index 86b442d..49017cc 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
+	import { fade, fly } from 'svelte/transition';
 	import {
 		ExternalLinkIcon,
 		MinusCircleIcon,
@@ -53,53 +53,56 @@
 			<img src={game.image_url} alt={`Image of ${game.name}`} />
 		</a>
 	</div>
-	<div class="details">
-		<p>Year Published: {game?.year_published}</p>
-		<p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
-		<p>Playtime: {game.playtime} minutes</p>
-		<p>Minimum Age: {game.min_age}</p>
-		{#if +game?.price !== 0.0}
-			<p>Price: ${game?.price}</p>
-		{/if}
-		<a
-			class="with-icon"
-			style="display: flex; gap: 1rem;"
-			href={game.url}
-			target="_blank"
-			rel="noreferrer"
-			aria-label={`Board Game Atlas Link for ${game.name}`}
-			>Board Game Atlas <ExternalLinkIcon width="24" height="24" /></a
-		>
-	</div>
-	<div>
-		{#if existsInCollection}
-			<button class="btn" type="button" on:click={() => removeGame()}
-				>Remove from collection <MinusCircleIcon width="24" height="24" /></button
+	<div style="display: grid; place-items: center;">
+		<div class="details">
+			<p>Year Published: {game?.year_published}</p>
+			<p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
+			<p>Playtime: {game.playtime} minutes</p>
+			<p>Minimum Age: {game.min_age}</p>
+			{#if +game?.price !== 0.0}
+				<p>Price: ${game?.price}</p>
+			{/if}
+			<a
+				class="with-icon"
+				href={game.url}
+				target="_blank"
+				rel="noreferrer"
+				aria-label={`Board Game Atlas Link for ${game.name}`}
+				>Board Game Atlas <ExternalLinkIcon width="24" height="24" /></a
 			>
-		{:else}
-			<button
-				class="btn"
-				type="button"
-				on:click={() => {
-					addToCollection(game);
-					if (browser) {
-						localStorage.collection = JSON.stringify($collectionStore);
-					}
-				}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
-			>
-		{/if}
+		</div>
+		<div>
+			{#if existsInCollection}
+				<button class="btn button-icon" type="button" on:click={() => removeGame()}
+					>Remove from collection <MinusCircleIcon width="24" height="24" /></button
+				>
+			{:else}
+				<button
+					class="btn"
+					type="button"
+					on:click={() => {
+						addToCollection(game);
+						if (browser) {
+							localStorage.collection = JSON.stringify($collectionStore);
+						}
+					}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
+				>
+			{/if}
+		</div>
 	</div>
 </section>
 {#if firstParagraphEnd > 0}
-	<section class="description first-paragraph">
+	<section class="description first-paragraph" style="margin-top: 2rem;">
 		{@html game?.description?.substring(0, firstParagraphEnd)}
 	</section>
 	{#if game?.description?.substring(firstParagraphEnd + 1) !== ''}
-		<section class="description" transition:fade>
+		<section class="description">
 			{#if seeMore}
-				{@html game?.description?.substring(firstParagraphEnd + 1)}
+				<div in:fly={{ opacity: 0, x: 100 }} out:fade>
+					{@html game?.description?.substring(firstParagraphEnd + 1)}
+				</div>
 			{/if}
-			<button class="btn" type="button" on:click={() => (seeMore = !seeMore)}
+			<button class="btn button-icon" type="button" on:click={() => (seeMore = !seeMore)}
 				>See
 				{#if !seeMore}
 					More <PlusIcon width="24" height="24" />
@@ -136,8 +139,15 @@
 		background-color: var(--color-btn-primary-active);
 	}
 
+	.button-icon {
+		display: grid;
+		grid-template-columns: repeat(2, auto);
+		gap: 1rem;
+	}
+
 	.game {
 		display: grid;
+		grid-template-columns: minmax(auto, 400px) 1fr;
 		gap: 2rem;
 		margin: 1rem;
 		place-items: center;
@@ -159,7 +169,7 @@
 			margin: 1rem;
 		}
 
-		@media (max-width: 480px) {
+		@media (max-width: 550px) {
 			grid-template-columns: 1fr;
 		}
 	}
@@ -175,5 +185,6 @@
 		display: flex;
 		flex-wrap: wrap;
 		place-items: center;
+		gap: 1rem;
 	}
 </style>