js/src/components/Local/CloseContent.vue

@@ -29,11 +29,21 @@
     </div>
     <div class="overflow-hidden">
       <div
-        class="multi-card-event"
+        class="relative w-full snap-x snap-always snap-mandatory overflow-x-auto flex pb-6 gap-x-5 gap-y-8 p-1"
+        ref="scrollContainer"
+        @scroll="scrollHandler"
       >
         <slot name="content" />
       </div>
     </div>
+    <div class="hidden sm:block" v-show="showScrollRightButton">
+      <button
+        @click="scrollRight"
+        class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -right-5"
+      >
+        <span class="">&gt;</span>
+      </button>
+    </div>
   </div>
 </template>
 
@@ -102,19 +112,3 @@ onUnmounted(() => {
   }
 });
 </script>
-
-<style lang="scss" scoped>
-.multi-card-event {
-  display: grid;
-  grid-auto-rows: 1fr;
-  grid-column-gap: 20px;
-  grid-row-gap: 30px;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  .event-card {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-}
-</style>
-

js/src/views/HomeView.vue

@@ -144,9 +144,9 @@
   <CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" />
   <OnlineEvents />
   <UpcomingEvents v-if="instanceName" :instanceName="instanceName" />
-  <!-- <LastEvents v-if="instanceName" :instanceName="instanceName" /> -->
+  <LastEvents v-if="instanceName" :instanceName="instanceName" />
   <!-- Unlogged content section -->
-  <!-- <picture v-if="!currentUser?.isLoggedIn">
+  <picture v-if="!currentUser?.isLoggedIn">
     <source
       media="(max-width: 799px)"
       :srcset="`/img/pics/homepage-480w.webp`"
@@ -180,7 +180,7 @@
     />
   </picture>
   <presentation v-if="!currentUser?.isLoggedIn" />
-</template> -->
+</template>
 
 <script lang="ts" setup>
 import { ParticipantRole } from "@/types/enums";
@@ -196,7 +196,7 @@ import { IEvent } from "../types/event.model";
 // import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
 import CloseEvents from "@/components/Local/CloseEvents.vue";
 import CloseGroups from "@/components/Local/CloseGroups.vue";
-// import LastEvents from "@/components/Local/LastEvents.vue";
+import LastEvents from "@/components/Local/LastEvents.vue";
 import UpcomingEvents from "@/components/Local/UpcomingEvents.vue";
 import OnlineEvents from "@/components/Local/OnlineEvents.vue";
 import {