🔀 Merge #2002 into deploy/rinkeby

likecoin · Jan 8, 2025 · f457098 · f457098
2 parents a92720e + 4686c82
commit f457098
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 13 deletions.
diff --git a/src/components/CollapsibleCard.vue b/src/components/CollapsibleCard.vue
@@ -83,10 +83,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    defaultOpen: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
-      isOpen: true,
+      isOpen: this.defaultOpen,
     };
   },
   computed: {

diff --git a/src/components/NFTPage/ChainDataSection/index.vue b/src/components/NFTPage/ChainDataSection/index.vue
@@ -2,6 +2,7 @@
   <CollapsibleCard
     :title="$t('nft_details_page_activity_list_title')"
     :has-content-padding="false"
+    :default-open="false"
   >
     <template #titleIcon>
       <IconActivity />

diff --git a/src/components/NFTPage/CollectorMessageList/Item.vue b/src/components/NFTPage/CollectorMessageList/Item.vue
@@ -8,7 +8,7 @@
         'flex-col',
         'justify-between',
 
-        'p-[12px] laptop:p-[24px]',
+        'p-[16px] laptop:p-[24px]',
         'pb-[12px] laptop:pb-[20px]',
 
         'min-w-[195px] laptop:min-w-[240px]',
@@ -20,14 +20,19 @@
         'bg-cover',
         'bg-center',
       ]"
-      :style="bgStyle"
     >
       <p class="block text-[16px] line-clamp-4" v-text="buyerMessage" />
       <NFTPageCollectorMessageListIdentity
         :is-show-type-label="false"
         :wallet-address="message.id"
-        :avatar-size="32"
-        :wrapper-classes="['!bg-transparent', 'phone:!flex-row']"
+        :avatar-size="24"
+        :wrapper-classes="[
+          '!bg-transparent',
+          'phone:!flex-row',
+          '!pl-[0px]',
+          '!gap-[12px]',
+          '!text-[14px]',
+        ]"
       />
 
       <Identity

diff --git a/src/components/NFTPage/CollectorMessageList/index.vue b/src/components/NFTPage/CollectorMessageList/index.vue
@@ -42,9 +42,9 @@ export default {
       type: Number,
       default: 20,
     },
-    durationMultiplier: {
+    scrollSpeed: {
       type: Number,
-      default: 3.33,
+      default: 7.5,
     },
   },
   computed: {
@@ -61,7 +61,7 @@ export default {
       return loopedMessages;
     },
     durationTime() {
-      return `${this.messages.length * this.durationMultiplier}`;
+      return `${this.displayMessages.length * this.scrollSpeed}`;
     },
   },
   mounted() {

diff --git a/src/components/ScrollingList.vue b/src/components/ScrollingList.vue
@@ -43,6 +43,8 @@ export default {
       isDragging: false,
       startX: 0,
       scrollLeft: 0,
+      velocity: 0,
+      animationFrame: null,
     };
   },
   computed: {
@@ -56,17 +58,40 @@ export default {
       const pageX = event.pageX || event.touches[0].pageX;
       this.startX = pageX - this.$refs.sliderContainer.offsetLeft;
       this.scrollLeft = this.$refs.sliderContainer.scrollLeft;
+
+      cancelAnimationFrame(this.animationFrame);
+      this.velocity = 0;
     },
     onDrag(event) {
       if (!this.isDragging) return;
       event.preventDefault();
       const pageX = event.pageX || event.touches[0].pageX;
       const x = pageX - this.$refs.sliderContainer.offsetLeft;
-      const walk = (x - this.startX) * 1.5;
-      this.$refs.sliderContainer.scrollLeft = this.scrollLeft - walk;
+      const delta = x - this.startX;
+      this.$refs.sliderContainer.scrollLeft = this.scrollLeft - delta;
+      this.velocity = delta;
     },
     endDrag() {
+      if (!this.isDragging) return;
       this.isDragging = false;
+      this.startInertiaScroll();
+    },
+    startInertiaScroll() {
+      const friction = 0.95;
+      const step = () => {
+        if (Math.abs(this.velocity) < 0.1) {
+          cancelAnimationFrame(this.animationFrame);
+          return;
+        }
+
+        this.$refs.sliderContainer.scrollLeft -= this.velocity;
+
+        this.velocity *= friction;
+
+        this.animationFrame = requestAnimationFrame(step);
+      };
+
+      step();
     },
   },
 };

diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
@@ -194,7 +194,9 @@
               <ProgressIndicator preset="thin" />
             </div>
             <div v-else>
-              <div class="flex items-center justify-between mb-[24px]">
+              <div
+                class="flex items-center justify-between mb-[24px] px-[16px] laptop:px-0 sm:px-[32px]"
+              >
                 <h3
                   class="text-[28px] font-600 text-center text-like-green"
                   v-text="$t('nft_collector_message_label')"
@@ -211,7 +213,7 @@
                 :class-id="classId"
                 :creator-avatar="creatorAvatar"
                 :messages="filterCollectorsWithReplies"
-                :duration-multiplier="8"
+                :scroll-speed="7.5"
               />
               <div
                 :class="[
@@ -1136,7 +1138,14 @@ export default {
       );
     },
     overlayClasses() {
-      return ['h-full', 'w-[60px]', 'from-light-gray', 'to-transparent'];
+      return [
+        'h-full',
+        'w-[60px]',
+        'from-light-gray',
+        'to-transparent',
+        'hidden',
+        'laptop:block',
+      ];
     },
   },
   async mounted() {