mirror/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk synced 2024-11-24 23:26:09 +09:00
Code

fix: improve StatusPreviewCard (#383)

Browse Source
This commit is contained in:
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/status/StatusCard.vue
View File

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

79
components/status/StatusPreviewCard.vue
View File

@ -1,49 +1,68 @@
<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
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 <CommonBlurhash
v-if="card.image"
: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>
p4 max-h-2xl <div v-else min-w-32 w-32 h-32 bg="slate-500/10" flex justify-center items-center>
flex flex-col <div i-ri:profile-line w="30%" h="30%" text-secondary />
> </div>
<p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis> <div
{{ card.providerName }} p4 max-h-2xl
</p> flex flex-col
<strong v-if="card.title" line-clamp-1 text-ellipsis>{{ card.title }}</strong> >
<p v-if="description" text-secondary line-clamp-2 text-ellipsis> <p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis>
{{ description }} {{ card.providerName }}
</p> </p>
</div> <strong v-if="card.title" line-clamp-1 text-ellipsis>{{ card.title }}</strong>
</NuxtLink> <p v-if="description" text-secondary line-clamp-2 text-ellipsis>
</div> {{ description }}
</p>
</div>
</NuxtLink>
</template> </template>