diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue index dc854ce2..a36baafa 100644 --- a/components/status/StatusCard.vue +++ b/components/status/StatusCard.vue @@ -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> diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue index f271f89f..f4719f68 100644 --- a/components/status/StatusPreviewCard.vue +++ b/components/status/StatusPreviewCard.vue @@ -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>