Fix event map view

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

js/src/components/Event/EventMap.vue

@@ -1,76 +1,88 @@
 <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>
-      <section class="map">
+      </button>
-        <map-leaflet
-          v-if="physicalAddress?.geom"
-          :coords="physicalAddress.geom"
-          :marker="{
-            text: physicalAddress.fullName,
-            icon: physicalAddress.poiInfos.poiIcon.icon,
-          }"
-        />
-      </section>
-      <section class="columns is-centered map-footer">
-        <div class="column is-half has-text-centered">
-          <p class="address" v-if="physicalAddress?.fullName">
-            <i class="mdi mdi-map-marker"></i>
-            {{ physicalAddress.fullName }}
-          </p>
-          <p class="getting-there">{{ $t("Getting there") }}</p>
-          <div
-            class="buttons"
-            v-if="
-              addressLinkToRouteByCar ||
-              addressLinkToRouteByBike ||
-              addressLinkToRouteByFeet
-            "
-          >
-            <a
-              class="button"
-              target="_blank"
-              v-if="addressLinkToRouteByFeet"
-              :href="addressLinkToRouteByFeet"
-            >
-              <i class="mdi mdi-walk"></i
-            ></a>
-            <a
-              class="button"
-              target="_blank"
-              v-if="addressLinkToRouteByBike"
-              :href="addressLinkToRouteByBike"
-            >
-              <i class="mdi mdi-bike"></i
-            ></a>
-            <a
-              class="button"
-              target="_blank"
-              v-if="addressLinkToRouteByTransit"
-              :href="addressLinkToRouteByTransit"
-            >
-              <i class="mdi mdi-bus"></i
-            ></a>
-            <a
-              class="button"
-              target="_blank"
-              v-if="addressLinkToRouteByCar"
-              :href="addressLinkToRouteByCar"
-            >
-              <i class="mdi mdi-car"></i>
-            </a>
-          </div>
-        </div>
-      </section>
     </div>
+    <section class="map">
+      <map-leaflet
+        v-if="physicalAddress?.geom"
+        :coords="physicalAddress.geom"
+        :marker="{
+          text: physicalAddress.fullName,
+          icon: physicalAddress.poiInfos.poiIcon.icon,
+        }"
+      />
+    </section>
+    <section class="flex flex-col items-center mt-4">
+      <p v-if="physicalAddress?.fullName" class="flex gap-2 text-xl font-bold">
+        <MapMarker />
+        {{ physicalAddress.fullName }}
+      </p>
+      <p class="mt-4">{{ t("Getting there") }}</p>
+      <div
+        class="flex gap-2"
+        v-if="
+          addressLinkToRouteByCar ||
+          addressLinkToRouteByBike ||
+          addressLinkToRouteByFeet
+        "
+      >
+        <o-button
+          tag="a"
+          target="_blank"
+          v-if="addressLinkToRouteByFeet"
+          :href="addressLinkToRouteByFeet"
+        >
+          <Walk />
+          <span class="sr-only">{{ t("On foot") }}</span>
+        </o-button>
+        <o-button
+          tag="a"
+          target="_blank"
+          v-if="addressLinkToRouteByBike"
+          :href="addressLinkToRouteByBike"
+        >
+          <Bike />
+          <span class="sr-only">{{ t("By bike") }}</span>
+        </o-button>
+        <o-button
+          tag="a"
+          target="_blank"
+          v-if="addressLinkToRouteByTransit"
+          :href="addressLinkToRouteByTransit"
+        >
+          <Bus />
+          <span class="sr-only">{{ t("By transit") }}</span>
+        </o-button>
+        <o-button
+          tag="a"
+          target="_blank"
+          v-if="addressLinkToRouteByCar"
+          :href="addressLinkToRouteByCar"
+        >
+          <Car />
+          <span class="sr-only">{{ t("By car") }}</span>
+        </o-button>
+      </div>
+    </section>
   </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>