From 721f0d3d44357f6a18317715abf1b3b0ae6fd814 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 15 Jan 2024 17:29:51 +0100
Subject: [PATCH 1/3] Added clickoutside handler for marker search

---
 src/components/maps/overlay/SearchMarkers.vue | 54 +++++++++++--------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index d9b34462..0d5ddc4a 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MapMarker, MapMarkerGroup, PlayerMarker } from '@/types/Leaflet';
 import type { SearchMode } from '@/types/Search';
-import { useFocus, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
+import { onClickOutside, useFocus, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
 import { computed, onMounted, ref, onUpdated, watch } from 'vue';
 import SearchMarkersTags from './SearchMarkersTags.vue';
 
@@ -19,6 +19,7 @@ const allMarkers = computed(() => {
 
 // Search functions
 const searchBar = ref<HTMLDivElement>()
+const searchBarWrapper = ref<HTMLDivElement>()
 const qInput = ref()
 const { focused: isFocused } = useFocus(qInput)
 
@@ -82,6 +83,9 @@ watch(q, (n, o) => {
     if (n) setSearchMode('query')
 })
 
+// Remove menu if clicked outside
+onClickOutside(searchBarWrapper, () => resetAllFields())
+
 /**
  * Player geolocation
  * Uses native JS to avoid changing leaflet library
@@ -133,6 +137,26 @@ function handleCategorySwitch(g: MapMarkerGroup) {
     }
 }
 
+/**
+ * Custom Markers handling
+ */
+ onMounted(() => {
+    customMarkersData.value = useLocalStorage('custom-markers', []).value
+
+    document.addEventListener('refresh-custom-markers', () => {
+        customMarkersData.value = useLocalStorage('custom-markers', []).value
+    })
+})
+
+/**
+ * Emit event to delete custom marker
+ */
+function emitDeleteCustomMarker(markerTitle: string) {
+    const deleteCMarkerEvent = new CustomEvent(`delete-${markerTitle}`, { bubbles: true })
+
+    searchBar.value?.dispatchEvent(deleteCMarkerEvent)
+}
+
 /**
  * EVENTS
  */
@@ -167,30 +191,10 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
     if (actionAfter === "focusAfter") isFocused.value = true
 }
-
-/**
- * CUSTOM MARKERS HANDLING
- */
-onMounted(() => {
-    customMarkersData.value = useLocalStorage('custom-markers', []).value
-
-    document.addEventListener('refresh-custom-markers', () => {
-        customMarkersData.value = useLocalStorage('custom-markers', []).value
-    })
-})
-
-/**
- * Emit event to delete custom marker
- */
-function emitDeleteCustomMarker(markerTitle: string) {
-    const deleteCMarkerEvent = new CustomEvent(`delete-${markerTitle}`, { bubbles: true })
-
-    searchBar.value?.dispatchEvent(deleteCMarkerEvent)
-}
 </script>
 
 <template>
-    <nav class="toolbar">
+    <nav ref="searchBarWrapper" class="toolbar">
         <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">
             <div class="input-w">
                 <i class="search-icon ph-fill ph-magnifying-glass"></i>
@@ -362,10 +366,14 @@ function emitDeleteCustomMarker(markerTitle: string) {
         }
 
         .search-results {
-            max-height: 50vh;
+            max-height: 20vh;
             overflow-y: auto;
             scrollbar-gutter: stable;
 
+            @media screen and (width >= 900px) {
+                max-height: 50vh;
+            }
+
             &::-webkit-scrollbar,
             &::-webkit-scrollbar-thumb {
                 width: 26px;

From fd018ba4c37b06ee43878c4a93e5563b72895fb9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 15 Jan 2024 17:41:17 +0100
Subject: [PATCH 2/3] Keep value on clickoutside

---
 src/components/maps/overlay/SearchMarkers.vue | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index 0d5ddc4a..1b05abcf 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MapMarker, MapMarkerGroup, PlayerMarker } from '@/types/Leaflet';
 import type { SearchMode } from '@/types/Search';
-import { onClickOutside, useFocus, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
+import { onClickOutside, useFocus, useFocusWithin, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
 import { computed, onMounted, ref, onUpdated, watch } from 'vue';
 import SearchMarkersTags from './SearchMarkersTags.vue';
 
@@ -21,16 +21,20 @@ const allMarkers = computed(() => {
 const searchBar = ref<HTMLDivElement>()
 const searchBarWrapper = ref<HTMLDivElement>()
 const qInput = ref()
-const { focused: isFocused } = useFocus(qInput)
+const { focused: isComponentFocused } = useFocusWithin(searchBarWrapper)
+const { focused: isSearchFocused } = useFocus(qInput)
 
 const currentSearchMode = ref<SearchMode>('query')
 
 onMounted(() => {
-    isFocused.value = true
+    isSearchFocused.value = true
 })
 
 const hasQuery = computed(() => q.value.length > 0)
-const shouldBeActive = computed(() => hasQuery.value || currentSearchMode.value !== "query")
+const shouldBeActive = computed(() =>
+    (hasQuery.value && currentSearchMode.value === "query" && isComponentFocused.value)
+    || currentSearchMode.value !== "query"
+)
 
 const q = ref<string>("")
 
@@ -71,11 +75,10 @@ const shortcutKeyCombo = keys['Shift+Period']
 const eraseKeyCombo = keys['Escape']
 
 whenever(shortcutKeyCombo, () => {
-    isFocused.value = true
+    isSearchFocused.value = true
 })
 whenever(eraseKeyCombo, () => {
-    resetAllFields()
-    isFocused.value = true
+    resetAllFields('focusAfter')
 })
 
 // If query changes and has new value...
@@ -83,8 +86,8 @@ watch(q, (n, o) => {
     if (n) setSearchMode('query')
 })
 
-// Remove menu if clicked outside
-onClickOutside(searchBarWrapper, () => resetAllFields())
+// Toggle menu if clicked outside
+onClickOutside(searchBarWrapper, () => setSearchMode('query'))
 
 /**
  * Player geolocation
@@ -187,9 +190,10 @@ function resetQueryValue() {
  */
 function resetAllFields(actionAfter?: "focusAfter") {
     setSearchMode('query')
+
     resetQueryValue()
 
-    if (actionAfter === "focusAfter") isFocused.value = true
+    if (actionAfter === "focusAfter") isSearchFocused.value = true
 }
 </script>
 

From 93fa674b158e71be09a4e590f438d12cae84ff04 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 15 Jan 2024 17:49:46 +0100
Subject: [PATCH 3/3] Moved ruler to bottom left

---
 src/components/maps/WorldMap.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index 5d9ec16a..e41b6f9e 100644
--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -256,7 +256,7 @@ L.Control.Measure.include({
 const rulerDistanceRatio = 2
 
 const rulerOptions = {
-    position: 'topright',
+    position: 'bottomleft',
     primaryLengthUnit: 'kilometers',
     secondaryLengthUnit: 'days',
     primaryAreaUnit: 'hectares',