zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

ui: improve account hover

Browse source
This commit is contained in:
Anthony Fu 2022-11-27 10:13:18 +08:00
parent 33268b1f70
commit 3cd8fb54dd
4 changed files with 31 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/status/StatusAccountDetails.vue
View file

@ -8,11 +8,13 @@ const { account, link = true } = defineProps<{
</script>
<template>
<NuxtLink
:to="link ? getAccountPath(account) : undefined"
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
>
<ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" />
</NuxtLink>
<AccountHoverWrapper :account="account">
<NuxtLink
:to="link ? getAccountPath(account) : undefined"
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
>
<ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" />
</NuxtLink>
</AccountHoverWrapper>
</template>

6
components/status/StatusCard.vue
View file

@ -47,7 +47,11 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</div>
</div>
<div flex gap-4>
<AccountAvatar w-12 h-12 :account="status.account" hover />
<div>
<NuxtLink :to="getAccountPath(status.account)">
<AccountAvatar w-12 h-12 :account="status.account" />
</NuxtLink>
</div>
<div flex="~ col 1" min-w-0>
<div flex>
<StatusAccountDetails :account="status.account" />