[TAS-2544] 💄 Fix product page UI

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"

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]"
@@ -149,19 +158,16 @@
               class="flex flex-col justify-center min-w-0"
             >
               <NFTBookSpecTableLabel :text="$t('identity_type_author')" />
-              <NFTBookSpecTableLabel
-                :text="iscnWorkAuthor"
-                :is-campaign="preset === 'campaign'"
-              />
+              <NFTBookSpecTableValue :text="iscnWorkAuthor" :preset="preset" />
             </li>
             <li
               v-if="iscnWorkPublisher"
               class="flex flex-col justify-center min-w-0"
             >
               <NFTBookSpecTableLabel :text="$t('identity_type_publisher')" />
-              <NFTBookSpecTableLabel
+              <NFTBookSpecTableValue
                 :text="iscnWorkPublisher"
-                :is-campaign="preset === 'campaign'"
+                :preset="preset"
               />
             </li>
             <client-only>
@@ -216,15 +222,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 +279,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

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" :preset="preset" />
   </component>
 </template>
 
@@ -18,13 +18,13 @@ export default {
       type: Boolean,
       default: false,
     },
-    isCampaign: {
-      type: Boolean,
-      default: false,
+    preset: {
+      type: String,
+      default: undefined,
     },
   },
   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');

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" :preset="preset" />
   </component>
 </template>
 <script>
@@ -15,13 +15,13 @@ export default {
       type: Array,
       default: () => [],
     },
-    isCampaign: {
-      type: Boolean,
-      default: false,
+    preset: {
+      type: String,
+      default: undefined,
     },
   },
   computed: {
-    label() {
+    value() {
       return this.contentTypes
         .map(type => this.getContentType(type))
         .join(' + ');

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" :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: {

src/components/NFTBook/SpecTableValue.vue

@@ -1,22 +1,24 @@
 <template>
-  <div :class="['font-[600]', labelStyle]">{{ label }}</div>
+  <div :class="['font-[600]', textStyle]" v-text="text" />
 </template>
 
 <script>
+import { PRESET_TYPE } from '~/components/NFTBook/ItemCard';
+
 export default {
   props: {
-    label: {
+    text: {
       type: String,
       default: '',
     },
-    isCampaign: {
-      type: Boolean,
-      default: false,
+    preset: {
+      type: String,
+      default: PRESET_TYPE.DEFAULT,
     },
   },
   computed: {
-    labelStyle() {
-      if (this.isCampaign) return 'text-white';
+    textStyle() {
+      if (this.preset === PRESET_TYPE.CAMPAIGN) return 'text-white';
       return 'text-dark-gray';
     },
   },