From a9dfde4bb2c45ea0e0f879d0a1a9a8afc2378908 Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sat, 24 Jun 2023 16:49:58 +0800
Subject: [PATCH 1/2] feat: Drop image examples and carousel

---
 .../collection/unlockable/ImageSlider.vue     | 53 +++++++++++++++----
 .../unlockable/UnlockableContainer.vue        |  6 ++-
 components/collection/unlockable/const.ts     |  2 +
 locales/en.json                               |  1 +
 styles/components/_carousel-arrows.scss       |  5 ++
 styles/global.scss                            |  4 ++
 6 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/components/collection/unlockable/ImageSlider.vue b/components/collection/unlockable/ImageSlider.vue
index 12f3526237..d18565ad8f 100644
--- a/components/collection/unlockable/ImageSlider.vue
+++ b/components/collection/unlockable/ImageSlider.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="unlockable-image-slider mt-6">
+    <div
+      class="unlockable-image-tip border px-4 py-2 theme-background-color has-z-index-1">
+      {{ $t('mint.unlockable.imageTip') }}
+    </div>
     <div ref="container" class="keen-slider">
       <img
         v-for="image in imageList"
@@ -10,15 +14,13 @@
 
     <Transition name="fade">
       <div
-        v-if="sliderSettings.leftArrowValid"
-        class="arrow arrow-left"
-        @click="slider?.moveToIdx(sliderSettings.leftCarouselIndex)"></div>
+        class="arrow arrow-left arrow-small-size"
+        @click="slider?.moveToIdx(sliderSettings.leftCarouselIndex)" />
     </Transition>
     <Transition name="fade">
       <div
-        v-if="sliderSettings.rightArrowValid"
-        class="arrow arrow-right"
-        @click="slider?.moveToIdx(sliderSettings.rightCarouselIndex)"></div>
+        class="arrow arrow-right arrow-small-size"
+        @click="slider?.moveToIdx(sliderSettings.rightCarouselIndex)" />
     </Transition>
     <div ref="thumbnail" class="keen-slider thumbnail">
       <div v-for="image in imageList" :key="image" class="keen-slider__slide">
@@ -70,13 +72,16 @@ function ThumbnailPlugin(main) {
   }
 }
 
-const [container, slider] = useKeenSlider({})
+const [container, slider] = useKeenSlider({
+  loop: true,
+})
 const [thumbnail] = useKeenSlider(
   {
     initial: 0,
+    loop: true,
     slides: {
       perView: 4,
-      spacing: 1,
+      spacing: 10,
     },
   },
   [ThumbnailPlugin(slider)]
@@ -89,8 +94,8 @@ const sliderSettings = computed(() => {
     const perView = Number(4)
     const leftArrowValid = abs !== 0
     const rightArrowValid = abs + perView < slides.length
-    const leftCarouselIndex = Math.max(abs - 1, 0)
-    const rightCarouselIndex = Math.min(abs + 1, slides.length - perView)
+    const leftCarouselIndex = (abs - 1 + perView) % perView
+    const rightCarouselIndex = (abs + 1) % perView
 
     return {
       leftArrowValid,
@@ -106,12 +111,15 @@ const sliderSettings = computed(() => {
 
 <style scoped lang="scss">
 @import '@/styles/abstracts/variables';
+@import '@/styles/components/carousel-arrows';
 
 .unlockable-image-slider {
   width: 580px;
+  position: relative;
 
   @include mobile {
-    width: 100%;
+    width: 100% !important;
+    height: 100% !important;
     max-width: 560px;
   }
   @include tablet-only {
@@ -122,6 +130,17 @@ const sliderSettings = computed(() => {
       border: 1px solid theme('border-color');
     }
   }
+
+  .unlockable-image-tip {
+    border-radius: 3rem;
+    position: absolute;
+    left: 26px;
+    top: -14px;
+    @include mobile {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
   .keen-slider__slide {
     height: 580px;
     width: 580px;
@@ -164,4 +183,16 @@ const sliderSettings = computed(() => {
     }
   }
 }
+.arrow {
+  display: block;
+  height: 40px;
+  &-left {
+    left: 10px;
+    top: 34%;
+  }
+  &-right {
+    right: 10px;
+    top: 34%;
+  }
+}
 </style>
diff --git a/components/collection/unlockable/UnlockableContainer.vue b/components/collection/unlockable/UnlockableContainer.vue
index f8ab6c7315..19e8f1c002 100644
--- a/components/collection/unlockable/UnlockableContainer.vue
+++ b/components/collection/unlockable/UnlockableContainer.vue
@@ -171,7 +171,7 @@ import UnlockableSlider from '@/components/collection/unlockable/UnlockableSlide
 import UnlockableSchedule from '@/components/collection/unlockable/UnlockableSchedule.vue'
 import unloackableBanner from '@/assets/unlockable-introduce.svg'
 import { doWaifu, getLatestWaifuImages } from '@/services/waifu'
-import { collectionId, countDownTime } from './const'
+import { DISPLAY_SLIDE_IMAGE_COUNT, collectionId, countDownTime } from './const'
 import { UNLOCKABLE_CAMPAIGN, createUnlockableMetadata } from './utils'
 import { endOfHour, startOfHour } from 'date-fns'
 import type Vue from 'vue'
@@ -200,7 +200,9 @@ const justMinted = ref('')
 
 onMounted(async () => {
   const res = await getLatestWaifuImages()
-  imageList.value = res.result.map((item) => item.output)
+  imageList.value = res.result
+    .slice(0, DISPLAY_SLIDE_IMAGE_COUNT)
+    .map((item) => item.output)
   resultList.value = res.result
 })
 
diff --git a/components/collection/unlockable/const.ts b/components/collection/unlockable/const.ts
index 4ad3db1dda..a97a512130 100644
--- a/components/collection/unlockable/const.ts
+++ b/components/collection/unlockable/const.ts
@@ -5,3 +5,5 @@ export const countDownTime = endOfHour(now).getTime()
 
 export const slidesCountOnTimeCountdown = 10
 export const collectionId = '8'
+
+export const DISPLAY_SLIDE_IMAGE_COUNT = 4
diff --git a/locales/en.json b/locales/en.json
index 2b46dc6f23..ef6b6e8975 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -482,6 +482,7 @@
       "viewItem": "View Item",
       "preparing": "Preparing Your Item...",
       "alreadyMinted": "🎉 You already have this NFT, check it here",
+      "imageTip": "Examples Of Possible Drop",
       "loader": {
         "shareSuccess": "Share your success",
         "onTwitter": "on Twitter",
diff --git a/styles/components/_carousel-arrows.scss b/styles/components/_carousel-arrows.scss
index f7d8484fff..a5dad450ce 100644
--- a/styles/components/_carousel-arrows.scss
+++ b/styles/components/_carousel-arrows.scss
@@ -2,6 +2,11 @@
   $side-y: 32px;
   $side-x: 55px;
 
+  &-small-size {
+    $side-y: 20px;
+    $side-x: 32px;
+  }
+
   width: $side-x;
   height: $side-x;
   position: absolute;
diff --git a/styles/global.scss b/styles/global.scss
index 90c0ce4a63..a690caad13 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -429,3 +429,7 @@ a.has-text-grey {
 .is-flex-1 {
   flex: 1;
 }
+
+.has-z-index-1 {
+  z-index: 1;
+}

From e9aa60e8fc67ec80a8c9bef443a7e6c99da44ff3 Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sun, 25 Jun 2023 01:01:38 +0800
Subject: [PATCH 2/2] fix: mobile responsive

---
 components/collection/unlockable/ImageSlider.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/collection/unlockable/ImageSlider.vue b/components/collection/unlockable/ImageSlider.vue
index d18565ad8f..dabbf6730e 100644
--- a/components/collection/unlockable/ImageSlider.vue
+++ b/components/collection/unlockable/ImageSlider.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="unlockable-image-slider mt-6">
     <div
-      class="unlockable-image-tip border px-4 py-2 theme-background-color has-z-index-1">
+      class="unlockable-image-tip border px-4 py-2 theme-background-color has-z-index-1 no-wrap">
       {{ $t('mint.unlockable.imageTip') }}
     </div>
     <div ref="container" class="keen-slider">
@@ -78,7 +78,6 @@ const [container, slider] = useKeenSlider({
 const [thumbnail] = useKeenSlider(
   {
     initial: 0,
-    loop: true,
     slides: {
       perView: 4,
       spacing: 10,
@@ -147,9 +146,11 @@ const sliderSettings = computed(() => {
     object-fit: cover;
     @include tablet-only {
       width: 768px;
+      height: 100%;
     }
     @include mobile {
       width: 100%;
+      height: 100%;
     }
   }
   .thumbnail .keen-slider__slide {
@@ -158,16 +159,17 @@ const sliderSettings = computed(() => {
     width: 136px;
     @include tablet-only {
       width: calc(768px / 4);
+      height: 100%;
     }
     @include mobile {
       width: 25%;
       max-width: 136px;
     }
     img {
-      height: 136px;
-      width: 136px;
-      @include touch {
-        width: calc(100% - 8px);
+      width: 100%;
+      height: 100%;
+      @include mobile {
+        height: min-content;
       }
       object-fit: cover;
       &:hover {