Tweak feed (#3075)

* feed redesign * support long type
dev-protocol · Jan 28, 2025 · a8948f7 · a8948f7
1 parent a1e842e
commit a8948f7
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 40 deletions.
diff --git a/src/components/Feed/Feed.vue b/src/components/Feed/Feed.vue
@@ -5,13 +5,17 @@ import type { PassportItemAssetType } from '@devprotocol/clubs-plugin-passports/
 import type { FeedType } from '@fixtures/api/feed'
 import { computed } from 'vue'
 import { itemToHash } from '@fixtures/router/passportItem'
+import { isDark } from '@fixtures/color'
 
 const props = defineProps<FeedType>()
 
 const assetLink = computed(
   () =>
     `/passport/${props.address}/${props.parentPassportIndex === 0 ? '' : props.parentPassport.id}?i=${itemToHash(props.clipType, props.item.id)}`,
 )
+const dark = computed(() =>
+  props.frameHexColor ? isDark(props.frameHexColor) : undefined,
+)
 </script>
 
 <template>
@@ -20,7 +24,7 @@ const assetLink = computed(
       <div class="grid grid-cols-[auto_1fr] items-center gap-3">
         <a :href="`/passport/${address}`">
           <img
-            class="w-14 h-14 rounded-full object-cover aspect-square bg-lightgray bg-cover bg-center bg-no-repeat _p-avatar"
+            class="w-12 h-12 rounded-full object-cover aspect-square bg-lightgray bg-cover bg-center bg-no-repeat _p-avatar"
             :src="avatarSrc"
             alt="avatar"
           />
@@ -42,6 +46,43 @@ const assetLink = computed(
               {{ props.parentPassport.description?.replace(/\\n/g, ' ') }}
             </span>
           </span>
+        </div>
+      </div>
+
+      <div
+        class="grid gap-2 grid-cols-2 rounded"
+        :class="{ 'p-3': frameHexColor }"
+        :style="
+          frameHexColor
+            ? {
+                backgroundColor: frameHexColor,
+              }
+            : undefined
+        "
+      >
+        <div class="flex flex-col gap-1">
+          <div
+            v-if="description"
+            class="lg:text-xl font-bold text-ellipsis overflow-hidden line-clamp-2"
+            :class="{ 'text-white': dark }"
+          >
+            {{ description }}
+          </div>
+          <p
+            v-if="props.item.tags"
+            class="text-sm line-clamp-3 lg:line-clamp-6"
+            :class="{
+              'text-white/70': dark,
+              'text-black/70': dark === false,
+              'text-violet-500': dark === undefined,
+            }"
+          >
+            <span
+              v-for="tag in props.item.tags"
+              class="text-inherit mr-1 last:mr-0"
+              >#{{ tag }}</span
+            >
+          </p>
           <div
             v-if="tag !== 'ugc'"
             class="flex items-center gap-2 p-1 rounded-sm bg-white"
@@ -59,46 +100,27 @@ const assetLink = computed(
             </p>
           </div>
         </div>
+        <a :href="assetLink" target="_blank">
+          <div v-if="tag !== 'ugc'">
+            <MediaCard
+              class="w-full rounded overflow-hidden"
+              :src="assetSrc"
+              :type="tag as PassportItemAssetType"
+              :found="!!assetSrc"
+            />
+          </div>
+          <div v-if="tag === 'ugc'" class="rounded-xl bg-violet-50 p-2">
+            <MediaEmbed
+              class="w-full rounded-xl aspect-[3/2] mx-auto max-w-40 lg:max-w-xs pointer-events-none overflow-hidden"
+              :found="!!assetSrc"
+              :src="assetSrc"
+              :type="tag"
+              :autoplay="false"
+            />
+          </div>
+        </a>
       </div>
-
-      <div
-        v-if="description"
-        class="text-xl font-bold text-ellipsis overflow-hidden line-clamp-2"
-      >
-        {{ description }}
-      </div>
-      <ul v-if="props.item.tags" class="flex flex-wrap gap-2">
-        <li v-for="tag in props.item.tags" class="text-violet-500 text-sm">
-          #{{ tag }}
-        </li>
-      </ul>
     </div>
-
-    <a :href="assetLink" target="_blank">
-      <div
-        v-if="tag !== 'ugc'"
-        class="p-3"
-        :style="{
-          backgroundColor: frameHexColor,
-        }"
-      >
-        <MediaCard
-          class="w-full rounded aspect-square overflow-hidden"
-          :src="assetSrc"
-          :type="tag as PassportItemAssetType"
-          :found="!!assetSrc"
-        />
-      </div>
-      <div v-if="tag === 'ugc'" class="rounded-xl bg-violet-50 p-2">
-        <MediaEmbed
-          class="w-full rounded-xl aspect-[3/2] mx-auto max-w-xs pointer-events-none"
-          :found="!!assetSrc"
-          :src="assetSrc"
-          :type="tag"
-          :autoplay="false"
-        />
-      </div>
-    </a>
   </div>
 </template>
 

diff --git a/src/pages/passport/components/MediaCard.vue b/src/pages/passport/components/MediaCard.vue
@@ -48,7 +48,7 @@ onMounted(async () => {
         type === 'image-playable' ||
         type === 'image-playable-link')
     "
-    class="rounded-md w-full max-w-full object-cover"
+    class="rounded-md w-full max-w-full object-cover [&:not([src])]:aspect-square"
     :class="props.class"
   />