diff options
| author | Adam Soltys <[email protected]> | 2024-04-10 18:07:01 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2024-04-10 18:07:01 -0700 |
| commit | c92dce530d00edad2447daba619514f50418f0ac (patch) | |
| tree | 0ad9ffbac584a0132ca41d83e250b44fa03c0b02 /src/components | |
| parent | d490f97ec5604c2a449a73410a3c4aaed4f6051c (diff) | |
| download | coinos-ui-c92dce530d00edad2447daba619514f50418f0ac.tar.gz coinos-ui-c92dce530d00edad2447daba619514f50418f0ac.zip | |
map link
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/About.svelte | 13 | ||||
| -rw-r--r-- | src/components/LocationsMap.svelte | 50 |
2 files changed, 34 insertions, 29 deletions
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, |