fix: improve `StatusPreviewCard` (#383)

zio/stable
Ayaka Rizumu 2022-12-10 05:13:59 +08:00 committed by GitHub
parent 31820c6265
commit f249087a95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 31 deletions

View File

@ -96,7 +96,12 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
</div>
<StatusActionsMore :status="status" mr--2 />
</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">
<template #spoiler>
<p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>

View File

@ -1,49 +1,68 @@
<script setup lang="ts">
import type { Card } from 'masto'
const prop = defineProps<{
const props = defineProps<{
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 isSquare = $computed(() => prop.card.width === prop.card.height)
const description = $computed(() => prop.card.description ? prop.card.description : new URL(prop.card.url).hostname)
const alt = $computed(() => `${props.card.title} - ${props.card.title}`)
const isSquare = $computed(() => props.smallPictureOnly || props.card.width === props.card.height)
const description = $computed(() => props.card.description ? props.card.description : new URL(props.card.url).hostname)
// TODO: handle card.type: 'photo' | 'video' | 'rich';
</script>
<template>
<div
v-if="card"
border="~ base"
display-block
rounded-lg
<NuxtLink
block
of-hidden
hover:bg-active
: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
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
v-if="card.image"
:blurhash="card.blurhash"
:src="card.image"
:width="card.width"
:height="card.height"
:alt="alt"
flex flex-col
display-block
rounded-lg
:class="isSquare ? 'rounded-r-none w-32' : 'rounded-b-none w-full'"
object-cover
w-full h-full object-cover
/>
<div
p4 max-h-2xl
flex flex-col
>
<p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis>
{{ card.providerName }}
</p>
<strong v-if="card.title" line-clamp-1 text-ellipsis>{{ card.title }}</strong>
<p v-if="description" text-secondary line-clamp-2 text-ellipsis>
{{ description }}
</p>
</div>
</NuxtLink>
</div>
</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
p4 max-h-2xl
flex flex-col
>
<p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis>
{{ card.providerName }}
</p>
<strong v-if="card.title" line-clamp-1 text-ellipsis>{{ card.title }}</strong>
<p v-if="description" text-secondary line-clamp-2 text-ellipsis>
{{ description }}
</p>
</div>
</NuxtLink>
</template>