From a9c59c2c2fa31c006107daeab2526edb02536593 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Mon, 4 Nov 2024 17:01:22 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=92=84=20Use=20wrong=20component=20fo?=
 =?UTF-8?q?r=20publisher=20&=20author?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/ItemCard.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
index aded3938b..ace83c7d8 100644
--- a/src/components/NFTBook/ItemCard.vue
+++ b/src/components/NFTBook/ItemCard.vue
@@ -149,8 +149,8 @@
               class="flex flex-col justify-center min-w-0"
             >
               <NFTBookSpecTableLabel :text="$t('identity_type_author')" />
-              <NFTBookSpecTableLabel
-                :text="iscnWorkAuthor"
+              <NFTBookSpecTableValue
+                :label="iscnWorkAuthor"
                 :is-campaign="preset === 'campaign'"
               />
             </li>
@@ -159,8 +159,8 @@
               class="flex flex-col justify-center min-w-0"
             >
               <NFTBookSpecTableLabel :text="$t('identity_type_publisher')" />
-              <NFTBookSpecTableLabel
-                :text="iscnWorkPublisher"
+              <NFTBookSpecTableValue
+                :label="iscnWorkPublisher"
                 :is-campaign="preset === 'campaign'"
               />
             </li>

From df653ec63b717d9b855dc9cd2347346999988457 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Mon, 4 Nov 2024 17:06:26 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=A8=20Rename=20prop=20name=20label?=
 =?UTF-8?q?=20to=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/ItemCard.vue                     | 4 ++--
 src/components/NFTBook/SpecTableItemAccessMethod.vue    | 4 ++--
 src/components/NFTBook/SpecTableItemAvailableFormat.vue | 4 ++--
 src/components/NFTBook/SpecTableItemDateReleased.vue    | 2 +-
 src/components/NFTBook/SpecTableValue.vue               | 6 +++---
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
index ace83c7d8..a8687486f 100644
--- a/src/components/NFTBook/ItemCard.vue
+++ b/src/components/NFTBook/ItemCard.vue
@@ -150,7 +150,7 @@
             >
               <NFTBookSpecTableLabel :text="$t('identity_type_author')" />
               <NFTBookSpecTableValue
-                :label="iscnWorkAuthor"
+                :text="iscnWorkAuthor"
                 :is-campaign="preset === 'campaign'"
               />
             </li>
@@ -160,7 +160,7 @@
             >
               <NFTBookSpecTableLabel :text="$t('identity_type_publisher')" />
               <NFTBookSpecTableValue
-                :label="iscnWorkPublisher"
+                :text="iscnWorkPublisher"
                 :is-campaign="preset === 'campaign'"
               />
             </li>
diff --git a/src/components/NFTBook/SpecTableItemAccessMethod.vue b/src/components/NFTBook/SpecTableItemAccessMethod.vue
index 1313f5e91..c4d0d20ff 100644
--- a/src/components/NFTBook/SpecTableItemAccessMethod.vue
+++ b/src/components/NFTBook/SpecTableItemAccessMethod.vue
@@ -3,7 +3,7 @@
     <NFTBookSpecTableLabel
       :text="$t('nft_details_page_label_access_methods')"
     />
-    <NFTBookSpecTableValue :label="label" :is-campaign="isCampaign" />
+    <NFTBookSpecTableValue :text="value" :is-campaign="isCampaign" />
   </component>
 </template>
 
@@ -24,7 +24,7 @@ export default {
     },
   },
   computed: {
-    label() {
+    value() {
       return this.isDownloadable
         ? this.$t('nft_details_page_label_access_methods_downloadable')
         : this.$t('nft_details_page_label_access_methods_web_only');
diff --git a/src/components/NFTBook/SpecTableItemAvailableFormat.vue b/src/components/NFTBook/SpecTableItemAvailableFormat.vue
index 2a0aced9d..e8c61d1cb 100644
--- a/src/components/NFTBook/SpecTableItemAvailableFormat.vue
+++ b/src/components/NFTBook/SpecTableItemAvailableFormat.vue
@@ -1,7 +1,7 @@
 <template>
   <component :is="tag">
     <NFTBookSpecTableLabel :text="$t('nft_details_page_label_content_types')" />
-    <NFTBookSpecTableValue :label="label" :is-campaign="isCampaign" />
+    <NFTBookSpecTableValue :text="value" :is-campaign="isCampaign" />
   </component>
 </template>
 <script>
@@ -21,7 +21,7 @@ export default {
     },
   },
   computed: {
-    label() {
+    value() {
       return this.contentTypes
         .map(type => this.getContentType(type))
         .join(' + ');
diff --git a/src/components/NFTBook/SpecTableItemDateReleased.vue b/src/components/NFTBook/SpecTableItemDateReleased.vue
index 5a9a3dd31..93de10e5b 100644
--- a/src/components/NFTBook/SpecTableItemDateReleased.vue
+++ b/src/components/NFTBook/SpecTableItemDateReleased.vue
@@ -1,7 +1,7 @@
 <template>
   <component :is="tag">
     <NFTBookSpecTableLabel :text="label" />
-    <NFTBookSpecTableValue :label="dateValue" :is-campaign="isCampaign" />
+    <NFTBookSpecTableValue :text="dateValue" :is-campaign="isCampaign" />
   </component>
 </template>
 <script>
diff --git a/src/components/NFTBook/SpecTableValue.vue b/src/components/NFTBook/SpecTableValue.vue
index 63e15da75..426e27793 100644
--- a/src/components/NFTBook/SpecTableValue.vue
+++ b/src/components/NFTBook/SpecTableValue.vue
@@ -1,11 +1,11 @@
 <template>
-  <div :class="['font-[600]', labelStyle]">{{ label }}</div>
+  <div :class="['font-[600]', textStyle]">{{ text }}</div>
 </template>
 
 <script>
 export default {
   props: {
-    label: {
+    text: {
       type: String,
       default: '',
     },
@@ -15,7 +15,7 @@ export default {
     },
   },
   computed: {
-    labelStyle() {
+    textStyle() {
       if (this.isCampaign) return 'text-white';
       return 'text-dark-gray';
     },

From 89ce48cfaba1324e1b5a2640f083a18a37d4f59d Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Mon, 4 Nov 2024 17:16:59 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20Replace=20is-campaign=20prop?=
 =?UTF-8?q?=20with=20preset=20string?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/ItemCard.vue                | 14 ++++++--------
 .../NFTBook/SpecTableItemAccessMethod.vue          |  8 ++++----
 .../NFTBook/SpecTableItemAvailableFormat.vue       |  8 ++++----
 .../NFTBook/SpecTableItemDateReleased.vue          |  8 ++++----
 src/components/NFTBook/SpecTableValue.vue          | 12 +++++++-----
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
index a8687486f..3fef52398 100644
--- a/src/components/NFTBook/ItemCard.vue
+++ b/src/components/NFTBook/ItemCard.vue
@@ -149,10 +149,7 @@
               class="flex flex-col justify-center min-w-0"
             >
               <NFTBookSpecTableLabel :text="$t('identity_type_author')" />
-              <NFTBookSpecTableValue
-                :text="iscnWorkAuthor"
-                :is-campaign="preset === 'campaign'"
-              />
+              <NFTBookSpecTableValue :text="iscnWorkAuthor" :preset="preset" />
             </li>
             <li
               v-if="iscnWorkPublisher"
@@ -161,7 +158,7 @@
               <NFTBookSpecTableLabel :text="$t('identity_type_publisher')" />
               <NFTBookSpecTableValue
                 :text="iscnWorkPublisher"
-                :is-campaign="preset === 'campaign'"
+                :preset="preset"
               />
             </li>
             <client-only>
@@ -216,15 +213,16 @@
             <NFTBookSpecTableItemDateReleased
               :is-published-date="!!iscnData?.contentMetadata?.datePublished"
               :date="releasedDate"
+              :preset="preset"
               :is-campaign="preset === 'campaign'"
             />
             <NFTBookSpecTableItemAvailableFormat
-              :is-campaign="preset === 'campaign'"
+              :preset="preset"
               :content-types="contentTypes"
             />
             <NFTBookSpecTableItemAccessMethod
-              :is-campaign="preset === 'campaign'"
               :is-downloadable="!nftIsDownloadHidden"
+              :preset="preset"
             />
           </NFTBookSpecTable>
           <div class="flex flex-col items-center w-full laptop:hidden">
@@ -272,7 +270,7 @@ import { ellipsis } from '~/util/ui';
 
 import nftMixin from '~/mixins/nft';
 
-const PRESET_TYPE = {
+export const PRESET_TYPE = {
   SHELF: 'shelf', // (Landing page) shelf style
   CAMPAIGN: 'campaign', // (Landing page) like-green bg
   COMPACT: 'compact', // (Landing page) compact style
diff --git a/src/components/NFTBook/SpecTableItemAccessMethod.vue b/src/components/NFTBook/SpecTableItemAccessMethod.vue
index c4d0d20ff..04d6db29f 100644
--- a/src/components/NFTBook/SpecTableItemAccessMethod.vue
+++ b/src/components/NFTBook/SpecTableItemAccessMethod.vue
@@ -3,7 +3,7 @@
     <NFTBookSpecTableLabel
       :text="$t('nft_details_page_label_access_methods')"
     />
-    <NFTBookSpecTableValue :text="value" :is-campaign="isCampaign" />
+    <NFTBookSpecTableValue :text="value" :preset="preset" />
   </component>
 </template>
 
@@ -18,9 +18,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    isCampaign: {
-      type: Boolean,
-      default: false,
+    preset: {
+      type: String,
+      default: undefined,
     },
   },
   computed: {
diff --git a/src/components/NFTBook/SpecTableItemAvailableFormat.vue b/src/components/NFTBook/SpecTableItemAvailableFormat.vue
index e8c61d1cb..c2065a550 100644
--- a/src/components/NFTBook/SpecTableItemAvailableFormat.vue
+++ b/src/components/NFTBook/SpecTableItemAvailableFormat.vue
@@ -1,7 +1,7 @@
 <template>
   <component :is="tag">
     <NFTBookSpecTableLabel :text="$t('nft_details_page_label_content_types')" />
-    <NFTBookSpecTableValue :text="value" :is-campaign="isCampaign" />
+    <NFTBookSpecTableValue :text="value" :preset="preset" />
   </component>
 </template>
 <script>
@@ -15,9 +15,9 @@ export default {
       type: Array,
       default: () => [],
     },
-    isCampaign: {
-      type: Boolean,
-      default: false,
+    preset: {
+      type: String,
+      default: undefined,
     },
   },
   computed: {
diff --git a/src/components/NFTBook/SpecTableItemDateReleased.vue b/src/components/NFTBook/SpecTableItemDateReleased.vue
index 93de10e5b..189d22998 100644
--- a/src/components/NFTBook/SpecTableItemDateReleased.vue
+++ b/src/components/NFTBook/SpecTableItemDateReleased.vue
@@ -1,7 +1,7 @@
 <template>
   <component :is="tag">
     <NFTBookSpecTableLabel :text="label" />
-    <NFTBookSpecTableValue :text="dateValue" :is-campaign="isCampaign" />
+    <NFTBookSpecTableValue :text="dateValue" :preset="preset" />
   </component>
 </template>
 <script>
@@ -19,9 +19,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    isCampaign: {
-      type: Boolean,
-      default: false,
+    preset: {
+      type: String,
+      default: undefined,
     },
   },
   computed: {
diff --git a/src/components/NFTBook/SpecTableValue.vue b/src/components/NFTBook/SpecTableValue.vue
index 426e27793..9a00a0fa5 100644
--- a/src/components/NFTBook/SpecTableValue.vue
+++ b/src/components/NFTBook/SpecTableValue.vue
@@ -1,22 +1,24 @@
 <template>
-  <div :class="['font-[600]', textStyle]">{{ text }}</div>
+  <div :class="['font-[600]', textStyle]" v-text="text" />
 </template>
 
 <script>
+import { PRESET_TYPE } from '~/components/NFTBook/ItemCard';
+
 export default {
   props: {
     text: {
       type: String,
       default: '',
     },
-    isCampaign: {
-      type: Boolean,
-      default: false,
+    preset: {
+      type: String,
+      default: PRESET_TYPE.DEFAULT,
     },
   },
   computed: {
     textStyle() {
-      if (this.isCampaign) return 'text-white';
+      if (this.preset === PRESET_TYPE.CAMPAIGN) return 'text-white';
       return 'text-dark-gray';
     },
   },

From c39563b2f5216b3908a996846cff1ce1f30d65e9 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Mon, 4 Nov 2024 17:34:52 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=93=B1=20Fix=20book=20cover=20not=20a?=
 =?UTF-8?q?lign=20in=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/Cover.vue    |  4 ++--
 src/components/NFTBook/ItemCard.vue | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/NFTBook/Cover.vue b/src/components/NFTBook/Cover.vue
index db213be0d..fc07db02b 100644
--- a/src/components/NFTBook/Cover.vue
+++ b/src/components/NFTBook/Cover.vue
@@ -5,7 +5,7 @@
       class="w-full h-full"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 210 297"
-      :style="`color: ${placeholderColor}`"
+      :style="`max-width: ${resize}; color: ${placeholderColor}`"
     >
       <rect width="210" height="297" fill="currentColor" opacity="0.2" />
       <path
@@ -17,7 +17,7 @@
     <img
       v-if="!isError"
       ref="img"
-      :class="coverClass"
+      :class="[{ hidden: !isLoaded }, coverClass]"
       :src="resizedSrc"
       :alt="isLoaded ? alt : ''"
       @load="handleMediaLoad"
diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
index 3fef52398..dd7f2fb10 100644
--- a/src/components/NFTBook/ItemCard.vue
+++ b/src/components/NFTBook/ItemCard.vue
@@ -92,7 +92,16 @@
             @show.once="fetchInfo"
           />
         </client-only>
-        <div class="flex flex-col items-center shrink-0 w-full max-w-[200px]">
+        <div
+          :class="[
+            'flex',
+            'flex-col',
+            'items-center',
+            'shrink-0',
+            'w-full',
+            'laptop:max-w-[200px]',
+          ]"
+        >
           <NFTCover
             v-if="videoSrc"
             :class="['mt-[-48px]', coverClasses]"