Fix event map view

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/EventMap.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="modal-card">
+  <div class="">
-    <header class="modal-card-head">
+    <div class="text-end">
-      <button type="button" class="delete" @click="$emit('close')" />
+      <button @click="emit('close')">
-    </header>
+        <Close />
-    <div class="modal-card-body">
+        <span class="sr-only">{{ t("Close map") }}</span>
+      </button>
+    </div>
     <section class="map">
       <map-leaflet
         v-if="physicalAddress?.geom"
@@ -14,63 +16,73 @@
         }"
       />
     </section>
-      <section class="columns is-centered map-footer">
+    <section class="flex flex-col items-center mt-4">
-        <div class="column is-half has-text-centered">
+      <p v-if="physicalAddress?.fullName" class="flex gap-2 text-xl font-bold">
-          <p class="address" v-if="physicalAddress?.fullName">
+        <MapMarker />
-            <i class="mdi mdi-map-marker"></i>
         {{ physicalAddress.fullName }}
       </p>
-          <p class="getting-there">{{ $t("Getting there") }}</p>
+      <p class="mt-4">{{ t("Getting there") }}</p>
       <div
-            class="buttons"
+        class="flex gap-2"
         v-if="
           addressLinkToRouteByCar ||
           addressLinkToRouteByBike ||
           addressLinkToRouteByFeet
         "
       >
-            <a
+        <o-button
-              class="button"
+          tag="a"
           target="_blank"
           v-if="addressLinkToRouteByFeet"
           :href="addressLinkToRouteByFeet"
         >
-              <i class="mdi mdi-walk"></i
+          <Walk />
-            ></a>
+          <span class="sr-only">{{ t("On foot") }}</span>
-            <a
+        </o-button>
-              class="button"
+        <o-button
+          tag="a"
           target="_blank"
           v-if="addressLinkToRouteByBike"
           :href="addressLinkToRouteByBike"
         >
-              <i class="mdi mdi-bike"></i
+          <Bike />
-            ></a>
+          <span class="sr-only">{{ t("By bike") }}</span>
-            <a
+        </o-button>
-              class="button"
+        <o-button
+          tag="a"
           target="_blank"
           v-if="addressLinkToRouteByTransit"
           :href="addressLinkToRouteByTransit"
         >
-              <i class="mdi mdi-bus"></i
+          <Bus />
-            ></a>
+          <span class="sr-only">{{ t("By transit") }}</span>
-            <a
+        </o-button>
-              class="button"
+        <o-button
+          tag="a"
           target="_blank"
           v-if="addressLinkToRouteByCar"
           :href="addressLinkToRouteByCar"
         >
-              <i class="mdi mdi-car"></i>
+          <Car />
-            </a>
+          <span class="sr-only">{{ t("By car") }}</span>
-          </div>
+        </o-button>
       </div>
     </section>
   </div>
-  </div>
 </template>
 <script lang="ts" setup>
 import { Address, IAddress } from "@/types/address.model";
 import { RoutingTransportationType, RoutingType } from "@/types/enums";
 import { computed, defineAsyncComponent } from "vue";
+import { useI18n } from "vue-i18n";
+import Car from "vue-material-design-icons/Car.vue";
+import Bike from "vue-material-design-icons/Bike.vue";
+import Bus from "vue-material-design-icons/Bus.vue";
+import Walk from "vue-material-design-icons/Walk.vue";
+import MapMarker from "vue-material-design-icons/MapMarker.vue";
+import Close from "vue-material-design-icons/Close.vue";
+
+const { t } = useI18n({ useScope: "global" });
 
 const RoutingParamType = {
   [RoutingType.OPENSTREETMAP]: {
@@ -96,6 +108,8 @@ const props = defineProps<{
   routingType: RoutingType;
 }>();
 
+const emit = defineEmits(["close"]);
+
 const physicalAddress = computed((): Address | null => {
   if (!props.address) return null;
 
@@ -150,25 +164,8 @@ const addressLinkToRouteByTransit = computed((): undefined | string => {
 });
 </script>
 <style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.modal-card-head {
-  justify-content: flex-end;
-  // button.delete {
-  //   @include margin-right(1rem);
-  // }
-}
-
 section.map {
-  height: calc(100% - 8rem);
+  height: 75vh;
-  width: calc(100% - 20px);
+  width: 100%;
-}
-
-section.map-footer {
-  p.address {
-    margin: 1rem auto;
-  }
-  div.buttons {
-    justify-content: center;
-  }
 }
 </style>

js/src/views/Event/EventView.vue

@@ -205,11 +205,11 @@
         full-screen
         :can-cancel="['escape', 'outside']"
       >
-        <template #default="props">
+        <template #default>
           <event-map
             :routingType="routingType ?? RoutingType.OPENSTREETMAP"
             :address="event.physicalAddress"
-            @close="props.close"
+            @close="showMap = false"
           />
         </template>
       </o-modal>