teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: top and bottom padding of small preview card on mobile (#974)

Browse source
This commit is contained in:
Ayo Ayco 2023-01-11 20:08:15 +01:00 committed by GitHub
parent c1e89582f8
commit 689ae0c701
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/status/StatusPreviewCard.vue
View file

@ -54,7 +54,7 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
flex flex-col
display-block of-hidden
: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,
'rounded-lg': root,
}"
@ -70,13 +70,13 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
</div>
<div
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="[
root ? 'rounded-lg' : '',
]"
>
<div :class="cardTypeIconMap[card.type]" w="30%" h="30%" text-secondary />
</div>
<StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" />
<StatusPreviewCardInfo :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
</NuxtLink>
</template>

4
components/status/StatusPreviewCardInfo.vue
View file

@ -12,12 +12,12 @@ defineProps<{
<template>
<div
p4 max-h-2xl
max-h-2xl
flex flex-col
my-auto
:class="[
root ? 'flex-gap-1' : 'justify-center sm:justify-start',
]"
my-auto
>
<p text-secondary ws-pre-wrap break-all line-clamp-1>
{{ provider }}