From 7f9c7eb10a6fb6c06fcb1260079a337c29f3d836 Mon Sep 17 00:00:00 2001
From: laylafogiel-hash <laylafogiel@gmail.com>
Date: Mon, 13 Oct 2025 03:18:52 +0300
Subject: [PATCH] Carousel UI improvements (#258)

* make carousel pagination clickable

* make carousel in game pages wrap around

* make items in store fit the row when the filter menu is visible

---------

Co-authored-by: udifogiel <udifogiel@proton.me>
---
 server/components/CarouselPagination.vue | 15 ++++++++-------
 server/components/StoreView.vue          |  2 +-
 server/pages/library/game/[id]/index.vue |  2 +-
 server/pages/store/[id]/index.vue        |  2 +-
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/server/components/CarouselPagination.vue b/server/components/CarouselPagination.vue
index 61be4b90..fe6117de 100644
--- a/server/components/CarouselPagination.vue
+++ b/server/components/CarouselPagination.vue
@@ -3,9 +3,10 @@
     <button
       v-for="(_, i) in amount"
       :key="i"
+      @click="slideTo(i)"
       :class="[
-        carousel.currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
-        'transition-all cursor-pointer h-2 rounded-full',
+        carousel.currentSlide === i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
+        'transition-all cursor-pointer h-2 rounded-full'
       ]"
     />
   </div>
@@ -18,8 +19,8 @@ const carousel = inject(injectCarousel)!;
 
 const amount = carousel.maxSlide - carousel.minSlide + 1;
 
-// function slideTo(index: number) {
-//   const offsetIndex = index + carousel.minSlide;
-//   carousel.nav.slideTo(offsetIndex);
-// }
-</script>
+function slideTo(index: number) {
+  const offsetIndex = index + carousel.minSlide;
+  carousel.nav.slideTo(offsetIndex);
+}
+</script>
\ No newline at end of file
diff --git a/server/components/StoreView.vue b/server/components/StoreView.vue
index ea9bdaa7..97e91fb9 100644
--- a/server/components/StoreView.vue
+++ b/server/components/StoreView.vue
@@ -292,7 +292,7 @@
             <div
               v-if="games?.length ?? 0 > 0"
               ref="product-grid"
-              class="relative lg:col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7 gap-4"
+              class="relative lg:col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
             >
               <!-- Your content -->
               <GamePanel
diff --git a/server/pages/library/game/[id]/index.vue b/server/pages/library/game/[id]/index.vue
index 7c501c50..369528f4 100644
--- a/server/pages/library/game/[id]/index.vue
+++ b/server/pages/library/game/[id]/index.vue
@@ -72,7 +72,7 @@
                 {{ $t("store.images") }}
               </h2>
               <div class="relative">
-                <VueCarousel :items-to-show="1">
+                <VueCarousel :items-to-show="1" :wrap-around="true">
                   <VueSlide
                     v-for="image in game.mImageCarouselObjectIds"
                     :key="image"
diff --git a/server/pages/store/[id]/index.vue b/server/pages/store/[id]/index.vue
index 4bcd942d..de4383a3 100644
--- a/server/pages/store/[id]/index.vue
+++ b/server/pages/store/[id]/index.vue
@@ -183,7 +183,7 @@
             {{ game.mShortDescription }}
           </p>
           <div class="mt-6 py-4 rounded">
-            <VueCarousel :items-to-show="1">
+            <VueCarousel :items-to-show="1" :wrap-around="true">
               <VueSlide
                 v-for="image in game.mImageCarouselObjectIds"
                 :key="image"