feat: handle square preview cards (#363)
parent
10167b54d8
commit
ff3ebc2871
|
@ -5,6 +5,7 @@ const prop = defineProps<{
|
|||
card: Card
|
||||
}>()
|
||||
const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
|
||||
const isSquare = $computed(() => prop.card.width === prop.card.height)
|
||||
|
||||
// TODO: handle card.type: 'photo' | 'video' | 'rich';
|
||||
</script>
|
||||
|
@ -16,7 +17,7 @@ const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
|
|||
display-block
|
||||
rounded-lg
|
||||
>
|
||||
<NuxtLink display-block :to="card.url">
|
||||
<NuxtLink display-block :to="card.url" :class="{ flex: isSquare }">
|
||||
<CommonBlurhash
|
||||
v-if="card.image"
|
||||
:blurhash="card.blurhash"
|
||||
|
@ -24,13 +25,16 @@ const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
|
|||
:width="card.width"
|
||||
:height="card.height"
|
||||
:alt="alt"
|
||||
flex flex-col
|
||||
display-block
|
||||
rounded-lg
|
||||
rounded-b-none
|
||||
:class="isSquare ? 'rounded-r-none w-32' : 'rounded-b-none w-full'"
|
||||
object-cover
|
||||
w-full
|
||||
/>
|
||||
<div p4 max-h-2xl>
|
||||
<div
|
||||
p4 max-h-2xl
|
||||
flex flex-col
|
||||
>
|
||||
<p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis>
|
||||
{{ card.providerName }}
|
||||
</p>
|
||||
|
|
Loading…
Reference in New Issue