diff options
| author | Adam Soltys <[email protected]> | 2023-11-17 10:18:24 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2023-11-17 10:18:24 -0800 |
| commit | 88a466fe9863919e8f5d10d117b561f91bb2964e (patch) | |
| tree | 304e5e3ebd948f04ae9f6d22f259ff782de2a39b | |
| parent | 9f42d4e4e7e7baf3697aef0c43393a5a443c3b39 (diff) | |
| download | coinos-ui-88a466fe9863919e8f5d10d117b561f91bb2964e.tar.gz coinos-ui-88a466fe9863919e8f5d10d117b561f91bb2964e.zip | |
map styles
| -rw-r--r-- | src/components/LocationsMap.svelte | 28 | ||||
| -rw-r--r-- | src/routes/map/+page.svelte | 2 |
2 files changed, 14 insertions, 16 deletions
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> |