From ab2c93e71b09e45eb64908dc84da212fa8d2db1c Mon Sep 17 00:00:00 2001
From: uku <hi@uku.moe>
Date: Thu, 24 Oct 2024 12:10:52 +0200
Subject: [PATCH] fix: make map fit screen

---
 src/routes/+page.svelte | 46 +++++++++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fcc9830..8ffac18 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -87,38 +87,48 @@
 	}
 </script>
 
-<h1 class="banner">{data.gameData.stopName}</h1>
+<div class="container">
+	<span class="title">{data.gameData.stopName}</span>
 
-<div class="banner" hidden={submitted}><button onclick={checkLocation}>SUBMIT</button></div>
+	<div hidden={submitted}><button onclick={checkLocation}>SUBMIT</button></div>
 
-<div class="banner results" hidden={!submitted}>
-	{Math.floor(points)} points! Vous etiez à {Math.floor(distance)}m.
+	<div class="results" hidden={!submitted}>
+		{Math.floor(points)} points! Vous etiez à {Math.floor(distance)}m.
+	</div>
+
+	<div {hidden}>
+		<span>distance: {distance}, points: {points}</span>
+	</div>
+
+	<div {hidden}>
+		<label>lines: <input type="checkbox" bind:checked={lines} /></label>
+		<label>labels: <input type="checkbox" bind:checked={labels} /></label>
+	</div>
+
+	<div id="map" use:createMap></div>
 </div>
 
-<div class="banner" {hidden}>
-	<span>distance: {distance}, points: {points}</span>
-</div>
-
-<div class="banner" {hidden}>
-	<label>lines: <input type="checkbox" bind:checked={lines} /></label>
-	<label>labels: <input type="checkbox" bind:checked={labels} /></label>
-</div>
-
-<div id="map" use:createMap></div>
-
 <style>
-	.banner {
-		padding: 4px;
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		height: 100%;
 		text-align: center;
 	}
 
+	.title {
+		font-weight: bold;
+		font-size: 32px;
+	}
+
 	.results {
 		color: green;
 		font-size: 20px;
 	}
 
 	#map {
-		height: 100%;
+		flex-grow: 1;
 		width: 100%;
 	}
 </style>