From cdf6caab51879838fdc912fafa350731405dfc8d Mon Sep 17 00:00:00 2001
From: setop <setop@zoocoop.com>
Date: Mon, 9 Sep 2024 16:23:54 +0200
Subject: [PATCH] feat(front): change horizontal scroll to grid view. closes
 #1456

---
 src/components/Local/CloseContent.vue | 83 ++-------------------------
 1 file changed, 5 insertions(+), 78 deletions(-)

diff --git a/src/components/Local/CloseContent.vue b/src/components/Local/CloseContent.vue
index f014875f9..519266503 100644
--- a/src/components/Local/CloseContent.vue
+++ b/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>