Homepage cards improvements

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

js/src/components/Event/EventCard.vue

@@ -1,9 +1,9 @@
 <template>
   <router-link
-    class="mbz-card max-w-xs"
+    class="mbz-card max-w-xs shrink-0 w-[18rem] snap-center"
     :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
-    <div class="bg-secondary">
+    <div class="bg-secondary rounded-lg">
       <figure class="block relative pt-40">
         <lazy-image-wrapper
           :picture="event.picture"
@@ -35,7 +35,7 @@
         </div>
       </figure>
     </div>
-    <div class="h-full p-2">
+    <div class="p-2">
       <div class="relative flex flex-col h-full">
         <div class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-start">
           <date-calendar-icon

js/src/components/Local/CloseContent.vue

@@ -1,18 +1,22 @@
 <template>
   <div class="relative pt-10 px-2">
-    <div class="w-full flex flex-wrap gap-3 mb-2 items-center">
-      <h1
-        class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
-      >
-        <slot name="title" />
-      </h1>
-      <button
-        v-if="suggestGeoloc && isIPLocation"
-        class="inline-flex bg-primary rounded text-white flex-initial px-4 py-2 justify-center w-full md:w-min whitespace-nowrap"
-        @click="emit('doGeoLoc')"
-      >
-        {{ t("Geolocate me") }}
-      </button>
+    <div class="mb-2">
+      <div class="w-full flex flex-wrap gap-3 items-center">
+        <h2
+          class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
+        >
+          <slot name="title" />
+        </h2>
+
+        <button
+          v-if="suggestGeoloc && isIPLocation"
+          class="inline-flex bg-primary rounded text-white flex-initial px-4 py-2 justify-center w-full md:w-min whitespace-nowrap"
+          @click="emit('doGeoLoc')"
+        >
+          {{ t("Geolocate me") }}
+        </button>
+      </div>
+      <slot name="subtitle" />
     </div>
     <div class="hidden sm:block" v-show="showScrollLeftButton">
       <button
@@ -24,7 +28,7 @@
     </div>
     <div class="overflow-hidden">
       <div
-        class="relative w-full snap-x overflow-x-auto pb-6 grid auto-rows-[1fr] gap-x-5 gap-y-8 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))]"
+        class="relative w-full snap-x snap-always snap-mandatory overflow-x-auto flex pb-6 gap-x-5 gap-y-8"
         ref="scrollContainer"
         @scroll="scrollHandler"
       >
@@ -99,7 +103,7 @@ const scrollRight = (e: Event) => {
 };
 
 const scrollHorizontalToVertical = (evt: WheelEvent) => {
-  evt.deltaY > 0 ? doScroll(evt, 600) : doScroll(evt, -600);
+  evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
 };
 
 onMounted(async () => {

js/src/components/Local/LastEvents.vue

@@ -0,0 +1,76 @@
+<template>
+  <close-content
+    v-show="loadingEvents || (events && events.total > 0)"
+    :suggestGeoloc="false"
+    v-on="attrs"
+  >
+    <template #title>
+      {{ t("Last published events") }}
+    </template>
+    <template #subtitle>
+      <i18n-t
+        class="text-slate-700 dark:text-slate-300"
+        tag="p"
+        keypath="On {instance} and other federated instances"
+      >
+        <template #instance>
+          <b>{{ instanceName }}</b>
+        </template>
+      </i18n-t>
+    </template>
+    <template #content>
+      <skeleton-event-result
+        v-for="i in 6"
+        class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
+        :key="i"
+        v-show="loadingEvents"
+      />
+      <event-card
+        v-for="event in events.elements"
+        :event="event"
+        :key="event.uuid"
+      />
+      <more-content
+        :to="{
+          name: 'SEARCH',
+          query: {
+            contentType: 'EVENTS',
+          },
+        }"
+      >
+        {{ t("View more events") }}
+      </more-content>
+    </template>
+  </close-content>
+</template>
+
+<script lang="ts" setup>
+import MoreContent from "./MoreContent.vue";
+import CloseContent from "./CloseContent.vue";
+import { computed, useAttrs } from "vue";
+import { IEvent } from "@/types/event.model";
+import { useQuery } from "@vue/apollo-composable";
+import EventCard from "../Event/EventCard.vue";
+import { Paginate } from "@/types/paginate";
+import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
+import { EventSortField, SortDirection } from "@/types/enums";
+import { FETCH_EVENTS } from "@/graphql/event";
+import { useI18n } from "vue-i18n";
+
+defineProps<{
+  instanceName: string;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+const attrs = useAttrs();
+
+const { result: resultEvents, loading: loadingEvents } = useQuery<{
+  events: Paginate<IEvent>;
+}>(FETCH_EVENTS, {
+  orderBy: EventSortField.INSERTED_AT,
+  direction: SortDirection.DESC,
+});
+const events = computed(
+  () => resultEvents.value?.events ?? { total: 0, elements: [] }
+);
+</script>

js/src/components/Local/MoreContent.vue

@@ -60,12 +60,11 @@
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
-import { RouteLocationNormalizedLoaded } from "vue-router";
 import { CategoryPictureLicencing } from "../Categories/constants";
 
 const props = defineProps<{
   to: { name: string; query: Record<string, string> };
-  picture: CategoryPictureLicencing & { url: string };
+  picture?: CategoryPictureLicencing & { url: string };
 }>();
 
 const imageAuthor = computed(