From c389a77dfe00abf4144c8b450b2b51172f4e3bae Mon Sep 17 00:00:00 2001
From: Ax333l <main@axelen.xyz>
Date: Wed, 8 Feb 2023 18:02:58 +0100
Subject: [PATCH] modal width and formatting

---
 src/lib/components/atoms/Button.svelte   | 20 +++++------
 src/lib/components/atoms/Dialogue.svelte |  2 +-
 src/routes/poll/+page.svelte             | 45 ++++++++++++++----------
 3 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index 9d89b47..ad4e236 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -3,16 +3,16 @@
 	$: type = 'button-' + kind;
 	export let maxWidth = false;
 	export let icon = '';
-  export let alt = '';
+	export let alt = '';
 	export let unclickable = false;
 </script>
 
-	<button class={type} class:unclickable on:click style="width: {maxWidth ? '100%' : 'max-content'}">
-		{#if icon}
-			<img src={icon} {alt} />
-		{/if}
-		<slot />
-	</button>
+<button class={type} class:unclickable on:click style="width: {maxWidth ? '100%' : 'max-content'}">
+	{#if icon}
+		<img src={icon} {alt} />
+	{/if}
+	<slot />
+</button>
 
 <style>
 	button {
@@ -29,7 +29,7 @@
 	.button-secondary {
 		min-width: max-content;
 		font-size: 1rem;
-		color: #FFD9E1;
+		color: #ffd9e1;
 		font-weight: 400;
 		border: none;
 		border-radius: 1200px;
@@ -41,9 +41,9 @@
 	}
 
 	.button-primary {
-		background-color: #FFB1C5;
+		background-color: #ffb1c5;
 		box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
-		color: #65002F;
+		color: #65002f;
 	}
 
 	button:hover {
diff --git a/src/lib/components/atoms/Dialogue.svelte b/src/lib/components/atoms/Dialogue.svelte
index a048a65..13daa91 100644
--- a/src/lib/components/atoms/Dialogue.svelte
+++ b/src/lib/components/atoms/Dialogue.svelte
@@ -101,7 +101,7 @@
 		flex-direction: column;
 		gap: 2px;
 		z-index: 1001;
-		padding: 32px;
+		padding: 1rem;
 		box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
 			0px 2px 4px -1px rgba(0, 0, 0, 0.2);
 	}
diff --git a/src/routes/poll/+page.svelte b/src/routes/poll/+page.svelte
index ad4ee54..1211204 100644
--- a/src/routes/poll/+page.svelte
+++ b/src/routes/poll/+page.svelte
@@ -109,10 +109,10 @@
 		transitionDirection = -5;
 	}
 
-function preloadImage(url: string) {
-  var img=new Image();
-  img.src=url;
-}
+	function preloadImage(url: string) {
+		var img = new Image();
+		img.src = url;
+	}
 
 	function nextPage() {
 		if (currentPage >= logoPages || submit) return null;
@@ -121,14 +121,14 @@ function preloadImage(url: string) {
 		min = currentPage * logoAmount;
 		max = min + logoAmount;
 
-    if (currentPage < logoPages) {
-      const nextPage = currentPage + 1;
-      const nextMin = nextPage * logoAmount;
-      const nextMax = nextMin + logoAmount;
-      logos.slice(nextMin, nextMax).forEach(({ variants }) => {
-        variants.forEach(variant => preloadImage(variant.gdrive_direct_url));
-      });
-    }
+		if (currentPage < logoPages) {
+			const nextPage = currentPage + 1;
+			const nextMin = nextPage * logoAmount;
+			const nextMax = nextMin + logoAmount;
+			logos.slice(nextMin, nextMax).forEach(({ variants }) => {
+				variants.forEach((variant) => preloadImage(variant.gdrive_direct_url));
+			});
+		}
 		transitionDirection = 5;
 	}
 
@@ -143,8 +143,8 @@ function preloadImage(url: string) {
 	}
 
 	async function submitBallot() {
-    const selected_ids = [...Object.values(selected)].flat();
-    console.log("selected ids", selected_ids);
+		const selected_ids = [...Object.values(selected)].flat();
+		console.log('selected ids', selected_ids);
 		const data = {
 			votes: logo_ids.map((id) => ({ cid: id, vote: selected_ids.includes(id) }))
 		};
@@ -260,10 +260,12 @@ function preloadImage(url: string) {
 <Modal bind:modalOpen>
 	<svelte:fragment slot="title">How does this work?</svelte:fragment>
 	<svelte:fragment slot="description">
-		<h6>
-			This is an approval voting system. Voters can choose any number of logos. The logo that is
-			selected the most wins. Note that you can only vote once!
-		</h6>
+		<div class="desc">
+			<h6>
+				This is an approval voting system. Voters can choose any number of logos. The logo that is
+				selected the most wins. Note that you can only vote once!
+			</h6>
+		</div>
 	</svelte:fragment>
 	<div class="buttons">
 		<Button
@@ -298,6 +300,7 @@ function preloadImage(url: string) {
 		margin-bottom: -0.5rem;
 	}
 
+	/* "How does this work?" Modal */
 	h6 {
 		color: var(--white);
 		margin-bottom: 0.5rem;
@@ -387,7 +390,11 @@ function preloadImage(url: string) {
 		}
 		.options-grid {
 			/* The magic number, teef */
-			grid-template-columns: repeat(auto-fill, minmax(16.628645896rem, 1fr))
+			grid-template-columns: repeat(auto-fill, minmax(16.628645896rem, 1fr));
+		}
+
+		.desc {
+			min-width: min(20rem, 90vw);
 		}
 	}
 </style>