Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-10 04:22:09 +10:00
Code Issues Packages Projects Releases Wiki Activity

Carousel UI improvements (#258)

Browse Source 
* 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>
This commit is contained in:
laylafogiel-hash
2025-10-13 03:18:52 +03:00
committed by GitHub
parent 67de1f6c02
commit f5cb856d3d
4 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/CarouselPagination.vue
View File

@ -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>

2
components/StoreView.vue
View File

@ -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

2
pages/library/game/[id]/index.vue
View File

@ -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"

2
pages/store/[id]/index.vue
View File

@ -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"