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,11 +1,13 @@
 <template>
   <div class="relative pt-10 px-2">
-    <div class="w-full flex flex-wrap gap-3 mb-2 items-center">
+    <div class="mb-2">
-      <h1
+      <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" />
-      </h1>
+        </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"
@@ -14,6 +16,8 @@
           {{ t("Geolocate me") }}
         </button>
       </div>
+      <slot name="subtitle" />
+    </div>
     <div class="hidden sm:block" v-show="showScrollLeftButton">
       <button
         @click="scrollLeft"
@@ -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(

js/src/views/HomeView.vue

@@ -216,77 +216,9 @@
           >
         </span>
       </section>
-      <hr
-        role="presentation"
-        class="home-separator"
-        v-if="canShowFollowedGroupEvents"
-      />
 
-      <!-- Events close to you -->
+      <CloseEvents @doGeoLoc="performGeoLocation()" />
-      <!-- <section class="events-close" v-if="canShowCloseEvents && radius">
+      <LastEvents :instanceName="config.name" class="mb-10" />
-        <h2 class="title">
-          {{ $t("Events nearby") }}
-        </h2>
-        <p>
-          {{
-            $t("Within {number} kilometers of {place}", {
-              radius,
-              place: locationName,
-            }, radius)
-          }}
-          <router-link
-            :to="{ name: RouteName.PREFERENCES }"
-            :title="$t('Change')"
-          >
-            <o-icon class="clickable" icon="pencil" size="small" />
-          </router-link>
-        </p>
-        <multi-card :events="closeEvents.elements.slice(0, 4)" />
-      </section> -->
-      <hr
-        role="presentation"
-        class="home-separator"
-        v-if="canShowMyUpcomingEvents"
-      />
-      <section class="events-recent px-2">
-        <h2 class="dark:text-white text-2xl font-bold">
-          {{ $t("Last published events") }}
-        </h2>
-        <p class="mb-3">
-          <i18n-t
-            class="text-slate-700 dark:text-slate-300"
-            tag="span"
-            keypath="On {instance} and other federated instances"
-          >
-            <template #instance>
-              <b>{{ config.name }}</b>
-            </template>
-          </i18n-t>
-        </p>
-
-        <div v-if="events && events.total > 0">
-          <multi-card :events="events.elements.slice(0, 8)" />
-          <span
-            class="block mt-2 text-right underline text-slate-700 dark:text-slate-300"
-          >
-            <router-link
-              :to="{ name: RouteName.SEARCH }"
-              class="hover:text-slate-800 hover:dark:text-slate-400"
-              >{{ $t("View everything") }} >></router-link
-            >
-          </span>
-        </div>
-        <o-notification v-else variant="danger"
-          >{{ $t("No events found") }}<br />
-          <div v-if="goingToEvents.size > 0">
-            <InformationOutline :size="16" />
-            <small>{{
-              $t("The events you created are not shown here.")
-            }}</small>
-          </div>
-        </o-notification>
-      </section>
-      <close-events @doGeoLoc="performGeoLocation()" />
     </div>
   </div>
 </template>
@@ -314,6 +246,7 @@ import { CONFIG } from "../graphql/config";
 import { IConfig } from "../types/config.model";
 // import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
 import CloseEvents from "@/components/Local/CloseEvents.vue";
+import LastEvents from "@/components/Local/LastEvents.vue";
 import { computed, onMounted, reactive, watch } from "vue";
 import { useMutation, useQuery } from "@vue/apollo-composable";
 import { useRouter } from "vue-router";

js/src/views/SearchView.vue

@@ -540,7 +540,7 @@ const searchVariables = reactive({
   groupPage: groupPage,
   limit: EVENT_PAGE_LIMIT,
   type: type.value === "" ? undefined : type,
-  eventCategory: eventCategory,
+  category: eventCategory,
 });
 
 const {