From c92dce530d00edad2447daba619514f50418f0ac Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 10 Apr 2024 18:07:01 -0700
Subject: map link

---
 src/components/About.svelte        | 13 +++++++++-
 src/components/LocationsMap.svelte | 50 +++++++++++++++++---------------------
 2 files changed, 34 insertions(+), 29 deletions(-)

(limited to 'src/components')

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 0087e350..e94f3d7a 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -90,6 +90,17 @@
     >
       {@html $t("about.locations.description")}
     </p>
-    <LocationsMap {locations} />
+    <!-- <LocationsMap {locations} /> -->
+    <a href="/map">
+    <div class="relative">
+      <img src="/map.png" class="mx-auto" />
+
+      <button
+        class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80 absolute left-1/2 top-1/2 text-2xl"
+      >
+        View map
+      </button>
+    </div>
+    </a>
   </div>
 {/if}
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index b41b1a73..9996df10 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -214,33 +214,27 @@
   onDestroy(() => map && map.remove());
 </script>
 
-<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">
-        <button
-          class="rounded-full border-2 border-black bg-white w-10 h-10"
-          on:click={toggle}
-        >
-          {#if timeout}
-            <Icon icon="pause" style="w-4 m-auto" />
-          {:else}
-            <Icon icon="play" style="w-4 m-auto" />
-          {/if}
-        </button>
-        <button
-          class="rounded-full border-2 border-black bg-white w-10 h-10"
-          on:click={full}
-        >
-          <Icon icon="full" style="w-4 m-auto" />
-        </button>
-      </div>
-    </div>
+
+<div class="w-screen h-screen flex" 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">
+                                      <button
+                                         class="rounded-full border-2 border-black bg-white w-10 h-10"
+                                         on:click={toggle}
+                                         >
+                                         {#if timeout}
+                                           <Icon icon="pause" style="w-4 m-auto" />
+                                         {:else}
+                                           <Icon icon="play" style="w-4 m-auto" />
+                                         {/if}
+                                      </button>
+                                    </div>
+                                  </div>
   </div>
 
   <!-- <div class="hidden lg:grid grid-cols-3 justify-items-center"> -->
@@ -253,7 +247,7 @@
   <!-- 		> -->
   <!-- 	{/each} -->
   <!-- </div> -->
-</div>
+
 
 <style>
   #map:fullscreen,
-- 
cgit v1.2.3