teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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 card: Card
}>() }>()
const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`) 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'; // TODO: handle card.type: 'photo' | 'video' | 'rich';
</script> </script>
@ -16,7 +17,7 @@ const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
display-block display-block
rounded-lg rounded-lg
> >
<NuxtLink display-block :to="card.url"> <NuxtLink display-block :to="card.url" :class="{ flex: isSquare }">
<CommonBlurhash <CommonBlurhash
v-if="card.image" v-if="card.image"
:blurhash="card.blurhash" :blurhash="card.blurhash"
@ -24,13 +25,16 @@ const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
:width="card.width" :width="card.width"
:height="card.height" :height="card.height"
:alt="alt" :alt="alt"
flex flex-col
display-block display-block
rounded-lg rounded-lg
rounded-b-none :class="isSquare ? 'rounded-r-none w-32' : 'rounded-b-none w-full'"
object-cover 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> <p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis>
{{ card.providerName }} {{ card.providerName }}
</p> </p>