feat(front): change horizontal scroll to grid view. closes #1456

src/components/Local/CloseContent.vue

@@ -19,36 +19,16 @@
       </div>
       <slot name="subtitle" />
     </div>
-    <div class="" v-show="showScrollLeftButton">
-      <button
-        @click="scrollLeft"
-        class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -left-5 ml-2"
-      >
-        <span class="">&lt;</span>
-      </button>
-    </div>
-    <div class="overflow-hidden">
-      <div
-        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="" 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 mr-2"
-      >
-        <span class="">&gt;</span>
-      </button>
+
+    <div
+      class="grid auto-rows-[1fr] gap-x-2 gap-y-2 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))] justify-items-center"
+    >
+      <slot name="content" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 withDefaults(
@@ -62,57 +42,4 @@ withDefaults(
 const emit = defineEmits(["doGeoLoc"]);
 
 const { t } = useI18n({ useScope: "global" });
-
-const showScrollRightButton = ref(false);
-const showScrollLeftButton = ref(false);
-
-const scrollContainer = ref<any>();
-
-const scrollHandler = () => {
-  if (scrollContainer.value) {
-    showScrollRightButton.value =
-      scrollContainer.value.scrollLeft <
-      scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth;
-    showScrollLeftButton.value = scrollContainer.value.scrollLeft > 0;
-  }
-};
-
-const doScroll = (e: Event, left: number) => {
-  e.preventDefault();
-  if (scrollContainer.value) {
-    scrollContainer.value.scrollBy({
-      left,
-      behavior: "smooth",
-    });
-  }
-};
-
-const scrollLeft = (e: Event) => {
-  doScroll(e, -300);
-};
-
-const scrollRight = (e: Event) => {
-  doScroll(e, 300);
-};
-
-const scrollHorizontalToVertical = (evt: WheelEvent) => {
-  evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
-};
-
-onMounted(async () => {
-  // Make sure everything is mounted properly
-  setTimeout(() => {
-    scrollHandler();
-  }, 1500);
-  scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
-});
-
-onUnmounted(() => {
-  if (scrollContainer.value) {
-    scrollContainer.value.removeEventListener(
-      "wheel",
-      scrollHorizontalToVertical
-    );
-  }
-});
 </script>

src/components/Local/CloseEvents.vue

@@ -7,13 +7,13 @@
     <template #title>
       <template v-if="userLocation?.name">
         {{
-          t("Incoming events and activities nearby {position}", {
+          t("Incoming events nearby {position}", {
             position: userLocation?.name,
           })
         }}
       </template>
       <template v-else>
-        {{ t("Incoming events and activities") }}
+        {{ t("Incoming events") }}
       </template>
     </template>
     <template #subtitle>
@@ -124,6 +124,7 @@ const eventsQuery = useQuery<{
   longevents: false,
   location: geoHash.value,
   radius: distance.value,
+  limit: 93,
 }));
 
 const events = computed(

src/views/HomeView.vue

@@ -334,7 +334,7 @@ const filteredFollowedGroupsEvents = computed<IEvent[]>(() => {
           .map(({ event: { id: event_id } }) => event_id)
           .includes(id)
     )
-    .slice(0, 4);
+    .slice(0, 93);
 });
 
 const welcomeBack = ref(false);