fix: top and bottom padding of small preview card on mobile (#974)
parent
c1e89582f8
commit
689ae0c701
|
@ -54,7 +54,7 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
|
||||||
flex flex-col
|
flex flex-col
|
||||||
display-block of-hidden
|
display-block of-hidden
|
||||||
:class="{
|
:class="{
|
||||||
'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22': isSquare,
|
'sm:(min-w-32 w-32 h-32) min-w-24 w-24 h-24': isSquare,
|
||||||
'w-full aspect-[1.91]': !isSquare,
|
'w-full aspect-[1.91]': !isSquare,
|
||||||
'rounded-lg': root,
|
'rounded-lg': root,
|
||||||
}"
|
}"
|
||||||
|
@ -70,13 +70,13 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
min-w-22 w-22 h-22 sm="min-w-32 w-32 h-32" bg="slate-500/10" flex justify-center items-center
|
min-w-24 w-24 h-24 sm="min-w-32 w-32 h-32" bg="slate-500/10" flex justify-center items-center
|
||||||
:class="[
|
:class="[
|
||||||
root ? 'rounded-lg' : '',
|
root ? 'rounded-lg' : '',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<div :class="cardTypeIconMap[card.type]" w="30%" h="30%" text-secondary />
|
<div :class="cardTypeIconMap[card.type]" w="30%" h="30%" text-secondary />
|
||||||
</div>
|
</div>
|
||||||
<StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" />
|
<StatusPreviewCardInfo :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -12,12 +12,12 @@ defineProps<{
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
p4 max-h-2xl
|
max-h-2xl
|
||||||
flex flex-col
|
flex flex-col
|
||||||
|
my-auto
|
||||||
:class="[
|
:class="[
|
||||||
root ? 'flex-gap-1' : 'justify-center sm:justify-start',
|
root ? 'flex-gap-1' : 'justify-center sm:justify-start',
|
||||||
]"
|
]"
|
||||||
my-auto
|
|
||||||
>
|
>
|
||||||
<p text-secondary ws-pre-wrap break-all line-clamp-1>
|
<p text-secondary ws-pre-wrap break-all line-clamp-1>
|
||||||
{{ provider }}
|
{{ provider }}
|
||||||
|
|
Loading…
Reference in New Issue