🩹 Fix book shelf layout

likecoin · Nov 18, 2023 · 1dd007c · 1dd007c
1 parent f099b67
commit 1dd007c
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/src/components/NFTBook/Shelf.stories.js b/src/components/NFTBook/Shelf.stories.js
@@ -0,0 +1,24 @@
+import NFTBookShelf from './Shelf';
+
+export default {
+  title: 'NFTBookShelf',
+  argTypes: {
+    itemCount: {
+      type: { name: 'number', required: false, min: 1, max: 30, step: 1 },
+      defaultValue: 4,
+    },
+  },
+};
+
+export const Default = (_, { argTypes }) => ({
+  components: {
+    NFTBookShelf,
+  },
+  props: Object.keys(argTypes),
+  template: `
+    <NFTBookShelf
+      :items="Array(this.itemCount).fill('').map((_, index) => ({ classId: \`likernft\${index}\` }))"
+      :is-dummy="true"
+    />
+  `,
+});
diff --git a/src/components/NFTBook/Shelf.vue b/src/components/NFTBook/Shelf.vue
@@ -15,7 +15,9 @@
         :key="item.classId"
         class="max-w-[220px]"
       >
-        <NFTBookItemCard
+        <component
+          :is="cardTag"
+          :class="{ 'h-[290px] w-[216px] bg-medium-gray': isDummy }"
           :class-id="item.classId"
           preset="shelf"
           :shelf-class="[
@@ -34,8 +36,7 @@
         :key="`dummy-${i}`"
         :class="[
           'hidden',
-          { 'sm:block !desktop:hidden': i === 1 && normalizedItems.length % 2 > 0 },
-          { 'desktop:block': i === 2 && normalizedItems.length % 3 > 0 },
+          getDummyResponsiveClass(i),
           'relative',
           'w-full',
           'max-w-[220px]',
@@ -68,7 +69,8 @@
           :id="classId"
           :key="classId"
         >
-          <NFTBookItemCard
+          <component
+            :is="cardTag"
             :class-id="classId"
             preset="default"
             component-class="!bg-like-cyan-pale"
@@ -89,13 +91,20 @@ export default {
       type: Array,
       default: () => [],
     },
+    isDummy: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       dialogNFTClassList: [],
     };
   },
   computed: {
+    cardTag() {
+      return this.isDummy ? 'div' : 'NFTBookItemCard';
+    },
     normalizedItems() {
       return this.items.map(item => {
         const isMultiple =
@@ -116,6 +125,29 @@ export default {
     },
   },
   methods: {
+    getDummyResponsiveClass(index) {
+      const total = this.normalizedItems.length;
+      switch (total % 3) {
+        case 1:
+          if (index === 1 && total % 2 !== 0) {
+            return 'sm:block';
+          }
+          return 'desktop:block';
+
+        case 2:
+          if (index === 1) {
+            return 'sm:block';
+          }
+          return '';
+
+        case 0:
+        default:
+          if (index === 1 && total % 2 !== 0) {
+            return 'sm:block desktop:hidden';
+          }
+          return '';
+      }
+    },
     handleClickItem(item) {
       if (item.isMultiple) {
         this.dialogNFTClassList = item.classIds;