css

bmlt-enabled · Jun 9, 2024 · 457df76 · 457df76
1 parent 50f8452
commit 457df76
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 18 deletions.
diff --git a/src/routes/Geolocator.svelte b/src/routes/Geolocator.svelte
@@ -284,23 +284,25 @@
 			<span class="value">{$lookupResult.lat ?? ''}</span>
 		</div>
 	</div>
-	<div>
-		<label class="checkbox-label">
-			<input type="checkbox" bind:checked={$showMap} />
-			Show Map
-		</label>
-		{#if $showMap}
-			<div id="map" style="width:100%; height:500px;"></div>
-		{/if}
-	</div>
-	<div>
-		<label class="checkbox-label">
-			<input type="checkbox" bind:checked={$showDebug} />
-			Show Debug
-		</label>
-		{#if $showDebug}
-			<pre>{JSON.stringify($rawGeocodeResponse, null, 2)}</pre>
-		{/if}
+	<div class="map-container">
+		<div>
+			<label class="checkbox-label">
+				<input type="checkbox" bind:checked={$showMap} />
+				Show Map
+			</label>
+			{#if $showMap}
+				<div id="map"></div>
+			{/if}
+		</div>
+		<div class="debug-container">
+			<label class="checkbox-label">
+				<input type="checkbox" bind:checked={$showDebug} />
+				Show Debug
+			</label>
+			{#if $showDebug}
+				<pre>{JSON.stringify($rawGeocodeResponse, null, 2)}</pre>
+			{/if}
+		</div>
 	</div>
 </div>
 

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -212,10 +212,38 @@ a:active {
 #bmlt_tools_main_container label.checkbox-label {
 	display: flex;
 	align-items: center;
+	margin-bottom: 15px;
+	font-size: 20px;
 }
 
 #bmlt_tools_main_container input[type='checkbox'] {
-	margin-right: 8px;
+	margin-right: 10px;
+	transform: scale(1.5);
+}
+
+#map {
+	width: 100%;
+	height: 600px;
+	border: 2px solid #ccc;
+	border-radius: 8px;
+	margin-top: 15px;
+}
+
+.map-container {
+	padding: 20px;
+	font-size: 18px;
+	max-width: 800px;
+	margin: auto;
+}
+
+.debug-container pre {
+	background-color: #f8f8f8;
+	padding: 15px;
+	border: 1px solid #ccc;
+	border-radius: 8px;
+	margin-top: 15px;
+	font-size: 16px;
+	overflow: auto;
 }
 
 @media (max-width: 768px) {