From dcffab9b70b90d2fe60db3b944c01d271c417af5 Mon Sep 17 00:00:00 2001
From: Massedil <massedil-framagit.org@msd.im>
Date: Fri, 14 Feb 2025 14:32:56 +0100
Subject: [PATCH] Improves aligment of location components

Solves #1621
---
 .../Event/FullAddressAutoComplete.vue         | 324 +++++++++---------
 src/components/Home/SearchFields.vue          |   1 +
 2 files changed, 159 insertions(+), 166 deletions(-)

diff --git a/src/components/Event/FullAddressAutoComplete.vue b/src/components/Event/FullAddressAutoComplete.vue
index 83793a46f..db63c383a 100644
--- a/src/components/Event/FullAddressAutoComplete.vue
+++ b/src/components/Event/FullAddressAutoComplete.vue
@@ -1,187 +1,179 @@
 <template>
   <div class="address-autocomplete">
-    <div class="">
-      <o-field
-        :label-for="id"
-        :message="fieldErrors"
-        :variant="fieldErrors ? 'danger' : ''"
-        class="!-mt-2"
-        :labelClass="labelClass"
+    <o-field
+      :label-for="id"
+      :message="fieldErrors"
+      :variant="fieldErrors ? 'danger' : ''"
+      class="!-mt-2"
+      :labelClass="labelClass"
+    >
+      <template #label>
+        {{ actualLabel }}
+      </template>
+      <o-button
+        v-if="canShowLocateMeButton"
+        class="!h-auto"
+        ref="mapMarker"
+        icon-right="map-marker"
+        @click="locateMe"
+        :title="t('Use my location')"
+      />
+      <o-autocomplete
+        :data="addressData"
+        v-model="queryTextWithDefault"
+        :placeholder="placeholderWithDefault"
+        :formatter="(elem: IAddress) => addressFullName(elem)"
+        :debounce="debounceDelay"
+        @input="asyncData"
+        :icon="canShowLocateMeButton ? null : 'map-marker'"
+        expanded
+        @select="setSelected"
+        :id="id"
+        :disabled="disabled"
+        dir="auto"
+        class="!mt-0 !h-full"
       >
-        <template #label>
-          {{ actualLabel }}
+        <template #default="{ option }">
+          <p class="flex gap-1">
+            <o-icon :icon="addressToPoiInfos(option).poiIcon.icon" />
+            <b>{{ addressToPoiInfos(option).name }}</b>
+          </p>
+          <p class="text-small">
+            {{ addressToPoiInfos(option).alternativeName }}
+          </p>
         </template>
-        <o-button
-          v-if="canShowLocateMeButton"
-          class="!h-auto"
-          ref="mapMarker"
-          icon-right="map-marker"
-          @click="locateMe"
-          :title="t('Use my location')"
-        />
-        <o-autocomplete
-          :data="addressData"
-          v-model="queryTextWithDefault"
-          :placeholder="placeholderWithDefault"
-          :formatter="(elem: IAddress) => addressFullName(elem)"
-          :debounce="debounceDelay"
-          @input="asyncData"
-          :icon="canShowLocateMeButton ? null : 'map-marker'"
-          expanded
-          @select="setSelected"
-          :id="id"
-          :disabled="disabled"
-          dir="auto"
-          class="!mt-0"
-        >
-          <template #default="{ option }">
-            <p class="flex gap-1">
-              <o-icon :icon="addressToPoiInfos(option).poiIcon.icon" />
-              <b>{{ addressToPoiInfos(option).name }}</b>
+        <template #empty>
+          <template v-if="isFetching">{{ t("Searching…") }}</template>
+          <template v-else-if="queryTextWithDefault.length >= 3">
+            <p>
+              {{
+                t('No results for "{queryText}"', {
+                  queryText: queryTextWithDefault,
+                })
+              }}
             </p>
-            <p class="text-small">
-              {{ addressToPoiInfos(option).alternativeName }}
+            <p>
+              {{
+                t(
+                  "You can try another search term or add the address details manually below."
+                )
+              }}
             </p>
           </template>
-          <template #empty>
-            <template v-if="isFetching">{{ t("Searching…") }}</template>
-            <template v-else-if="queryTextWithDefault.length >= 3">
-              <p>
-                {{
-                  t('No results for "{queryText}"', {
-                    queryText: queryTextWithDefault,
-                  })
-                }}
-              </p>
-              <p>
-                {{
-                  t(
-                    "You can try another search term or add the address details manually below."
-                  )
-                }}
-              </p>
-            </template>
-          </template>
-        </o-autocomplete>
-        <slot></slot>
-        <o-button
-          :disabled="!queryTextWithDefault"
-          @click="resetAddress"
-          class="reset-area !h-auto"
-          icon-left="close"
-          :title="t('Clear address field')"
+        </template>
+      </o-autocomplete>
+      <slot></slot>
+      <o-button
+        :disabled="!queryTextWithDefault"
+        @click="resetAddress"
+        class="reset-area !h-auto"
+        icon-left="close"
+        :title="t('Clear address field')"
+      />
+    </o-field>
+    <p v-if="gettingLocation" class="flex gap-2">
+      <Loading class="animate-spin" />
+      {{ t("Getting location") }}
+    </p>
+    <div
+      class="mt-2 p-2 rounded-lg shadow-md bg-white dark:bg-violet-3"
+      v-if="!hideSelected && (selected?.originId || selected?.url)"
+    >
+      <div class="">
+        <address-info
+          :address="selected"
+          :show-icon="true"
+          :show-timezone="true"
+          :user-timezone="userTimezone"
         />
-      </o-field>
-      <p v-if="gettingLocation" class="flex gap-2">
-        <Loading class="animate-spin" />
-        {{ t("Getting location") }}
-      </p>
-      <div
-        class="mt-2 p-2 rounded-lg shadow-md bg-white dark:bg-violet-3"
-        v-if="!hideSelected && (selected?.originId || selected?.url)"
-      >
-        <div class="">
-          <address-info
-            :address="selected"
-            :show-icon="true"
-            :show-timezone="true"
-            :user-timezone="userTimezone"
-          />
-        </div>
       </div>
     </div>
-    <o-collapse
-      v-model:open="detailsAddress"
-      :aria-id="`${id}-address-details`"
-      class="my-3"
-      v-if="allowManualDetails"
-    >
-      <template #trigger>
-        <o-button
-          variant="primary"
-          outlined
-          :aria-controls="`${id}-address-details`"
-          :icon-right="detailsAddress ? 'chevron-up' : 'chevron-down'"
-        >
-          {{ t("Details") }}
-        </o-button>
-      </template>
-      <form @submit.prevent="saveManualAddress">
-        <header>
-          <h2>{{ t("Manually enter address") }}</h2>
-        </header>
-        <section>
-          <o-field :label="t('Name')" labelFor="addressNameInput">
+  </div>
+  <o-collapse
+    v-model:open="detailsAddress"
+    :aria-id="`${id}-address-details`"
+    class="my-3"
+    v-if="allowManualDetails"
+  >
+    <template #trigger>
+      <o-button
+        variant="primary"
+        outlined
+        :aria-controls="`${id}-address-details`"
+        :icon-right="detailsAddress ? 'chevron-up' : 'chevron-down'"
+      >
+        {{ t("Details") }}
+      </o-button>
+    </template>
+    <form @submit.prevent="saveManualAddress">
+      <header>
+        <h2>{{ t("Manually enter address") }}</h2>
+      </header>
+      <section>
+        <o-field :label="t('Name')" labelFor="addressNameInput">
+          <o-input
+            aria-required="true"
+            required
+            v-model="selected.description"
+            id="addressNameInput"
+            expanded
+          />
+        </o-field>
+
+        <o-field :label="t('Street')" labelFor="streetInput">
+          <o-input v-model="selected.street" id="streetInput" expanded />
+        </o-field>
+
+        <o-field grouped>
+          <o-field :label="t('Postal Code')" labelFor="postalCodeInput">
             <o-input
-              aria-required="true"
-              required
-              v-model="selected.description"
-              id="addressNameInput"
+              v-model="selected.postalCode"
+              id="postalCodeInput"
               expanded
             />
           </o-field>
 
-          <o-field :label="t('Street')" labelFor="streetInput">
-            <o-input v-model="selected.street" id="streetInput" expanded />
+          <o-field :label="t('Locality')" labelFor="localityInput">
+            <o-input v-model="selected.locality" id="localityInput" expanded />
+          </o-field>
+        </o-field>
+
+        <o-field grouped>
+          <o-field :label="t('Region')" labelFor="regionInput">
+            <o-input v-model="selected.region" id="regionInput" expanded />
           </o-field>
 
-          <o-field grouped>
-            <o-field :label="t('Postal Code')" labelFor="postalCodeInput">
-              <o-input
-                v-model="selected.postalCode"
-                id="postalCodeInput"
-                expanded
-              />
-            </o-field>
-
-            <o-field :label="t('Locality')" labelFor="localityInput">
-              <o-input
-                v-model="selected.locality"
-                id="localityInput"
-                expanded
-              />
-            </o-field>
+          <o-field :label="t('Country')" labelFor="countryInput">
+            <o-input v-model="selected.country" id="countryInput" expanded />
           </o-field>
-
-          <o-field grouped>
-            <o-field :label="t('Region')" labelFor="regionInput">
-              <o-input v-model="selected.region" id="regionInput" expanded />
-            </o-field>
-
-            <o-field :label="t('Country')" labelFor="countryInput">
-              <o-input v-model="selected.country" id="countryInput" expanded />
-            </o-field>
-          </o-field>
-        </section>
-        <footer class="mt-3 flex gap-2 items-center">
-          <o-button native-type="submit">
-            {{ t("Save") }}
-          </o-button>
-          <o-button outlined type="button" @click="resetAddress">
-            {{ t("Clear") }}
-          </o-button>
-          <p>
-            {{
-              t(
-                "You can drag and drop the marker below to the desired location"
-              )
-            }}
-          </p>
-        </footer>
-      </form>
-    </o-collapse>
-    <div
-      class="map"
-      v-if="!hideMap && !disabled && (selected.geom || detailsAddress)"
-    >
-      <map-leaflet
-        :coords="selected.geom ?? defaultCoords"
-        :marker="mapMarkerValue"
-        :updateDraggableMarkerCallback="reverseGeoCode"
-        :options="{ zoom: mapDefaultZoom }"
-        :readOnly="false"
-      />
-    </div>
+        </o-field>
+      </section>
+      <footer class="mt-3 flex gap-2 items-center">
+        <o-button native-type="submit">
+          {{ t("Save") }}
+        </o-button>
+        <o-button outlined type="button" @click="resetAddress">
+          {{ t("Clear") }}
+        </o-button>
+        <p>
+          {{
+            t("You can drag and drop the marker below to the desired location")
+          }}
+        </p>
+      </footer>
+    </form>
+  </o-collapse>
+  <div
+    class="map"
+    v-if="!hideMap && !disabled && (selected.geom || detailsAddress)"
+  >
+    <map-leaflet
+      :coords="selected.geom ?? defaultCoords"
+      :marker="mapMarkerValue"
+      :updateDraggableMarkerCallback="reverseGeoCode"
+      :options="{ zoom: mapDefaultZoom }"
+      :readOnly="false"
+    />
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/src/components/Home/SearchFields.vue b/src/components/Home/SearchFields.vue
index 5e87156fd..03f20e8bf 100644
--- a/src/components/Home/SearchFields.vue
+++ b/src/components/Home/SearchFields.vue
@@ -35,6 +35,7 @@
         <o-dropdown v-model="distance" position="bottom-right" v-if="distance">
           <template #trigger="{ active }">
             <o-button
+              class="!h-full"
               :title="t('Select distance')"
               :icon-right="active ? 'menu-up' : 'menu-down'"
             >