chore: Update MetaIdPin UI

mvc-labs · Mar 22, 2024 · 43db5ec · 43db5ec
1 parent 151ee01
commit 43db5ec
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/src/pages/nfts/BRCToken.vue b/src/pages/nfts/BRCToken.vue
@@ -6,7 +6,7 @@ const { contentBody, value } = defineProps<{
 </script>
 
 <template>
-  <div class="flex items-center justify-center rounded-md p-1 bg-[#F5F5F5] relative h-[95px] w-full">
+  <div class="flex items-center justify-center rounded-md p-1 bg-[#F5F5F5] relative aspect-square w-full">
     <div class="text-black-primary text-xs break-all scale-75">{{ contentBody }}</div>
     <span class="absolute rounded right-0 bottom-1 py-3px px-1.5 bg-[#EBECFF] text-[#787FFF] text-xs scale-75"
       >{{ value }} sats</span

diff --git a/src/pages/nfts/BRCTokenList.vue b/src/pages/nfts/BRCTokenList.vue
@@ -69,7 +69,7 @@ const toBRC20Detail = (inscriptionId: string) => {
       BRC Token List loading...
     </div>
     <div v-else-if="inscriptions.length">
-      <div class="px-3 py-4 grid grid-cols-3 gap-x-1 gap-y-7">
+      <div class="px-3 py-4 grid grid-cols-3 gap-x-3 gap-y-7">
         <div
           v-for="inscription in inscriptions"
           @click="toBRC20Detail(inscription.inscriptionId)"

diff --git a/src/pages/nfts/MetaIDPinList.vue b/src/pages/nfts/MetaIDPinList.vue
@@ -42,10 +42,10 @@ const toBRC20Detail = (metaIDPin: MetaIDPin) => {
     <div v-if="isLoading" class="w-full py-3 text-center text-sm  text-gray-500">
       MetaID Pin List loading...
     </div>
-    <div v-else-if="metaPins?.length" class="mt-12 px-3 py-4 grid grid-cols-3 gap-x-1 gap-y-7">
+    <div v-else-if="metaPins?.length" class="mt-12 px-3 py-4 grid grid-cols-3 gap-x-3 gap-y-7">
       <div v-for="metaPin in metaPins" @click="toBRC20Detail(metaPin)"
         class="flex flex-col items-center justify-center rounded-md cursor-pointer text-[#999999]">
-        <MetaPin :value="metaPin.outputValue" :content="metaPin.contentSummary" />
+        <MetaPin :value="metaPin.outputValue" :content="metaPin.contentSummary" :contentType="metaPin.contentType" />
         <span class="text-sm text-center mt-3 truncate" :title="'# ' + metaPin.number"># {{
           metaPin.number }}</span>
         <span class="text-xs text-center mt-1 h-[30px]">{{

diff --git a/src/pages/nfts/MetaPin.vue b/src/pages/nfts/MetaPin.vue
@@ -2,16 +2,21 @@
 const { value, content } = defineProps<{
   value: number
   content: string
+  contentType: 'utf-8' | 'image/jpeg' | string
 }>()
 </script>
 
 <template>
-  <div class="flex items-center justify-center rounded-md p-1 bg-[#F5F5F5] relative h-[95px] w-full">
-    <div
-      class="text-black-primary text-xs break-all scale-75 h-[75%] flex items-center justify-center text-center w-full overflow-hidden"
-      :title="content">{{ content }}</div>
-    <span class="absolute rounded right-0 bottom-1 py-3px px-1.5 bg-[#EBECFF] text-[#787FFF] text-xs scale-75">{{ value }}
-      sat</span>
+  <div
+    class="flex items-center justify-center rounded-md p-2 bg-[#F5F5F5] relative aspect-square w-full overflow-hidden"
+  >
+    <img :src="`https://man-test.metaid.io${content}`" alt="" v-if="contentType === 'image/jpeg'"  class="w-full h-full"/>
+    <div class="text-xs overflow-hidden line-clamp-6 break-all" :title="content" v-else>
+      {{ content }}
+    </div>
+    <span class="absolute rounded right-0 bottom-1 py-3px px-1.5 bg-[#EBECFF] text-[#787FFF] text-xs scale-75"
+      >{{ value }} sat</span
+    >
   </div>
 </template>