mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-07 04:39:10 +01:00
fix: improve StatusPreviewCard
(#383)
This commit is contained in:
parent
31820c6265
commit
f249087a95
2 changed files with 55 additions and 31 deletions
|
@ -96,7 +96,12 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
|
||||||
</div>
|
</div>
|
||||||
<StatusActionsMore :status="status" mr--2 />
|
<StatusActionsMore :status="status" mr--2 />
|
||||||
</div>
|
</div>
|
||||||
<div :class="status.visibility === 'direct' ? 'my3 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''">
|
<div
|
||||||
|
space-y-2
|
||||||
|
:class="{
|
||||||
|
'my3 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none': status.visibility === 'direct',
|
||||||
|
}"
|
||||||
|
>
|
||||||
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
|
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
|
||||||
<template #spoiler>
|
<template #spoiler>
|
||||||
<p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>
|
<p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>
|
||||||
|
|
|
@ -1,37 +1,57 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Card } from 'masto'
|
import type { Card } from 'masto'
|
||||||
|
|
||||||
const prop = defineProps<{
|
const props = defineProps<{
|
||||||
card: Card
|
card: Card
|
||||||
|
/** For the preview image, only the small image mode is displayed */
|
||||||
|
smallPictureOnly?: boolean
|
||||||
|
/** When it is root card in the list, not appear as a child card */
|
||||||
|
root?: boolean
|
||||||
}>()
|
}>()
|
||||||
const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
|
const alt = $computed(() => `${props.card.title} - ${props.card.title}`)
|
||||||
const isSquare = $computed(() => prop.card.width === prop.card.height)
|
const isSquare = $computed(() => props.smallPictureOnly || props.card.width === props.card.height)
|
||||||
const description = $computed(() => prop.card.description ? prop.card.description : new URL(prop.card.url).hostname)
|
const description = $computed(() => props.card.description ? props.card.description : new URL(props.card.url).hostname)
|
||||||
|
|
||||||
// TODO: handle card.type: 'photo' | 'video' | 'rich';
|
// TODO: handle card.type: 'photo' | 'video' | 'rich';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<NuxtLink
|
||||||
v-if="card"
|
block
|
||||||
border="~ base"
|
of-hidden
|
||||||
display-block
|
hover:bg-active
|
||||||
rounded-lg
|
:to="card.url"
|
||||||
|
:class="{
|
||||||
|
'flex': isSquare,
|
||||||
|
'p-4': root,
|
||||||
|
'rounded-lg border border-base': !root,
|
||||||
|
}"
|
||||||
|
target="_blank"
|
||||||
>
|
>
|
||||||
<NuxtLink display-block :to="card.url" :class="{ flex: isSquare }">
|
<div
|
||||||
<CommonBlurhash
|
|
||||||
v-if="card.image"
|
v-if="card.image"
|
||||||
|
flex flex-col
|
||||||
|
display-block of-hidden
|
||||||
|
|
||||||
|
border="base"
|
||||||
|
:class="{
|
||||||
|
'min-w-32 w-32 h-32 border-r': isSquare,
|
||||||
|
'w-full aspect-[1.91] border-b': !isSquare,
|
||||||
|
'rounded-lg': root,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<CommonBlurhash
|
||||||
:blurhash="card.blurhash"
|
:blurhash="card.blurhash"
|
||||||
:src="card.image"
|
:src="card.image"
|
||||||
:width="card.width"
|
:width="card.width"
|
||||||
:height="card.height"
|
:height="card.height"
|
||||||
:alt="alt"
|
:alt="alt"
|
||||||
flex flex-col
|
w-full h-full object-cover
|
||||||
display-block
|
|
||||||
rounded-lg
|
|
||||||
:class="isSquare ? 'rounded-r-none w-32' : 'rounded-b-none w-full'"
|
|
||||||
object-cover
|
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else min-w-32 w-32 h-32 bg="slate-500/10" flex justify-center items-center>
|
||||||
|
<div i-ri:profile-line w="30%" h="30%" text-secondary />
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
p4 max-h-2xl
|
p4 max-h-2xl
|
||||||
flex flex-col
|
flex flex-col
|
||||||
|
@ -45,5 +65,4 @@ const description = $computed(() => prop.card.description ? prop.card.descriptio
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in a new issue