From 88a466fe9863919e8f5d10d117b561f91bb2964e Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 17 Nov 2023 10:18:24 -0800
Subject: map styles

---
 src/components/LocationsMap.svelte | 28 +++++++++++++---------------
 src/routes/map/+page.svelte        |  2 +-
 2 files changed, 14 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index ebbf8df4..07669a42 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -158,8 +158,6 @@
 							props: { tags }
 						});
 
-            if (tags.name?.startsWith("Cord")) console.log(location)
-
 						let marker = new maplibre.Marker({ color: '#F7931A' })
 							.setLngLat([lon, lat])
 							.setPopup(new maplibre.Popup().setDOMContent(popupContainer))
@@ -214,8 +212,8 @@
 	onDestroy(() => map && map.remove());
 </script>
 
-<div class="container mx-auto max-w-4xl">
-	<div class="flex w-full h-[400px]" id="map" bind:this={mapWrapper}>
+<div class="container mx-auto p-2 space-y-5">
+	<div class="flex w-full h-[60vh]" id="map" bind:this={mapWrapper}>
 		<div id="map-container" class="mx-auto h-full w-full z-0" bind:this={mapContainer} />
 		<div class="relative">
 			<div class="flex absolute flex top-2 right-2 gap-2">
@@ -230,19 +228,19 @@
 					<Icon icon="full" style="w-4 m-auto" />
 				</button>
 			</div>
-
-			<div class="absolute bottom-2 right-2 w-60 h-24 bg-white overflow-y-scroll p-4 bg-opacity-80">
-				{#each inview as m}
-					<button
-						on:click={() => select(m)}
-						class="text-left"
-						class:font-bold={m.id === inview[currentIndex]?.id}
-						id={`marker-${m.id}`}>{m.tags.name}</button
-					>
-				{/each}
-			</div>
 		</div>
 	</div>
+
+	<div class="hidden lg:grid grid-cols-3 justify-items-center">
+		{#each inview as m}
+			<button
+				on:click={() => select(m)}
+				class="text-left"
+				class:font-bold={m.id === inview[currentIndex]?.id}
+				id={`marker-${m.id}`}>{m.tags.name}</button
+			>
+		{/each}
+	</div>
 </div>
 
 <style>
diff --git a/src/routes/map/+page.svelte b/src/routes/map/+page.svelte
index c602ac1d..baf067d7 100644
--- a/src/routes/map/+page.svelte
+++ b/src/routes/map/+page.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="pt-4">
-	<div class="w-[243px] mx-auto mb-10">
+	<div class="w-[243px] mx-auto mb-4">
 		<a href="/">
 			<Icon icon="logo" />
 		</a>
-- 
cgit v1.2.3