1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2025-02-18 16:29:49 +03:00

style: fix broken layout "more from" badge in card with square image ()

This commit is contained in:
TAKAHASHI Shuuji 2025-01-18 18:33:07 +09:00 committed by GitHub
parent 2c0052edc4
commit f5cada0be8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 56 additions and 52 deletions

View file

@ -11,7 +11,8 @@ defineProps<{
max-h-2xl
flex gap-2
my-auto
bg-gray-300
p-4 py-2
light:bg-gray-3 dark:bg-gray-8
>
<span z-0>More from</span>
<AccountInlineInfo :account="account" hover:bg-gray-300 />

View file

@ -45,69 +45,72 @@ function loadAttachment() {
bg-card
hover:bg-active
:class="{
'flex': isSquare,
'flex flex-col': isSquare,
'p-4': root,
'rounded-lg': !root,
}"
target="_blank"
external
>
<div
v-if="card.image"
flex flex-col
display-block of-hidden
:class="{
'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,
}"
relative
>
<CommonBlurhash
:blurhash="card.blurhash"
:src="card.image"
:width="card.width"
:height="card.height"
:alt="alt"
:should-load-image="shouldLoadAttachment"
w-full h-full object-cover
:class="!shouldLoadAttachment ? 'brightness-60' : ''"
/>
<button
v-if="!shouldLoadAttachment"
type="button"
absolute
class="status-preview-card-load bg-black/64"
p-2
transition
rounded
hover:bg-black
cursor-pointer
@click.stop.prevent="!shouldLoadAttachment ? loadAttachment() : null"
<div :class="isSquare ? 'flex' : ''">
<!-- image -->
<div
v-if="card.image"
flex flex-col
display-block of-hidden
:class="{
'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,
}"
relative
>
<span
text-sm
text-white
flex flex-col justify-center items-center
gap-3 w-6 h-6
i-ri:file-download-line
<CommonBlurhash
:blurhash="card.blurhash"
:src="card.image"
:width="card.width"
:height="card.height"
:alt="alt"
:should-load-image="shouldLoadAttachment"
w-full h-full object-cover
:class="!shouldLoadAttachment ? 'brightness-60' : ''"
/>
</button>
<button
v-if="!shouldLoadAttachment"
type="button"
absolute
class="status-preview-card-load bg-black/64"
p-2
transition
rounded
hover:bg-black
cursor-pointer
@click.stop.prevent="!shouldLoadAttachment ? loadAttachment() : null"
>
<span
text-sm
text-white
flex flex-col justify-center items-center
gap-3 w-6 h-6
i-ri:file-download-line
/>
</button>
</div>
<div
v-else
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>
<!-- description -->
<StatusPreviewCardInfo :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
</div>
<div
v-else
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 :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
<StatusPreviewCardMoreFromAuthor
v-if="card?.authors?.[0].account"
:account="card.authors[0].account"
p-4 py-2
/>
</NuxtLink>
</template>