Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-12 20:09:59 +00:00
Code Issues Wiki Activity

feat: handle square preview cards (#363)

Browse source
This commit is contained in:
Ayo Ayco 2022-12-07 20:13:33 +01:00 committed by GitHub
parent 10167b54d8
commit ff3ebc2871
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/status/StatusPreviewCard.vue
View file

@ -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>