From 8809db582ccf45fcd477f46dcf70e106720626a8 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 30 May 2023 16:13:44 +0200
Subject: [PATCH] fix(front): fix homepage event and groups cards snapping

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/EventCard.vue    |  6 +++---
 js/src/components/Group/GroupCard.vue    |  4 ++--
 js/src/components/Local/CloseContent.vue | 14 +++++++++-----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index a7fc8ac8..c2c24f96 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -3,7 +3,7 @@
     class="mbz-card snap-center dark:bg-mbz-purple"
     :class="{
       'sm:flex sm:items-start': mode === 'row',
-      'sm:max-w-xs sm:w-[18rem] shrink-0 flex flex-col': mode === 'column',
+      'sm:max-w-xs w-[18rem] shrink-0 flex flex-col': mode === 'column',
     }"
     :to="to"
     :isInternal="isInternal"
@@ -119,8 +119,8 @@
                 {{
                   t(
                     "{count} participants",
-                    event.participantStats?.participant,
-                    { count: event.participantStats?.participant }
+                    { count: event.participantStats?.participant },
+                    event.participantStats?.participant
                   )
                 }}
               </mobilizon-tag>
diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index fa6992bb..7ef9c2ed 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -2,10 +2,10 @@
   <LinkOrRouterLink
     :to="to"
     :isInternal="isInternal"
-    class="mbz-card shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col"
+    class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col"
     :class="{
       'sm:flex-row': mode === 'row',
-      'sm:max-w-xs sm:w-[18rem] shrink-0 flex flex-col': mode === 'column',
+      'sm:max-w-xs w-[18rem] shrink-0 flex flex-col': mode === 'column',
     }"
   >
     <div class="flex-none p-2 md:p-4">
diff --git a/js/src/components/Local/CloseContent.vue b/js/src/components/Local/CloseContent.vue
index beb90477..f014875f 100644
--- a/js/src/components/Local/CloseContent.vue
+++ b/js/src/components/Local/CloseContent.vue
@@ -19,10 +19,10 @@
       </div>
       <slot name="subtitle" />
     </div>
-    <div class="hidden sm:block" v-show="showScrollLeftButton">
+    <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"
+        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>
@@ -36,10 +36,10 @@
         <slot name="content" />
       </div>
     </div>
-    <div class="hidden sm:block" v-show="showScrollRightButton">
+    <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"
+        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>
@@ -63,7 +63,7 @@ const emit = defineEmits(["doGeoLoc"]);
 
 const { t } = useI18n({ useScope: "global" });
 
-const showScrollRightButton = ref(true);
+const showScrollRightButton = ref(false);
 const showScrollLeftButton = ref(false);
 
 const scrollContainer = ref<any>();
@@ -100,6 +100,10 @@ const scrollHorizontalToVertical = (evt: WheelEvent) => {
 };
 
 onMounted(async () => {
+  // Make sure everything is mounted properly
+  setTimeout(() => {
+    scrollHandler();
+  }, 1500);
   scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
 });