forked from Mirrors/elk
feat: add account hover card (#80)
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
This commit is contained in:
parent
4505080ba8
commit
410d41a0a8
2 changed files with 39 additions and 1 deletions
33
components/account/AccountHoverCard.vue
Normal file
33
components/account/AccountHoverCard.vue
Normal file
|
@ -0,0 +1,33 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { Account } from 'masto'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
account: Account
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card">
|
||||||
|
<AccountInfo :account="account" />
|
||||||
|
<div text-sm flex flex-row text-gray mt-4>
|
||||||
|
<NuxtLink :to="`/${getAccountHandle(account)}/`">
|
||||||
|
{{ account.statusesCount }} Posts
|
||||||
|
</NuxtLink>
|
||||||
|
<span flex-1 text-center> • </span>
|
||||||
|
<NuxtLink :to="`/${getAccountHandle(account)}/following`">
|
||||||
|
{{ account.followingCount }} Following
|
||||||
|
</NuxtLink>
|
||||||
|
<span flex-1 text-center> • </span>
|
||||||
|
<NuxtLink :to="`/${getAccountHandle(account)}/followers`">
|
||||||
|
{{ account.followersCount }} Followers
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<ContentRichSetup text-4 text-gray :content="account.note" :emojis="account.emojis" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.account-hover-card {
|
||||||
|
transform-origin: 3em 3em;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -79,7 +79,12 @@ const timeago = useTimeAgo(() => status.createdAt, {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div flex gap-4>
|
<div flex gap-4>
|
||||||
|
<div relative flex-shrink-0>
|
||||||
|
<div group>
|
||||||
|
<AccountHoverCard top="-3.2" left="-4.4" absolute :account="status.account" op0 pointer-events-none group-hover="pointer-events-auto op100 scale-100" delay-250 transition transform scale-20 class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]" />
|
||||||
<AccountAvatar mt1 w-12 h-12 :account="status.account" />
|
<AccountAvatar mt1 w-12 h-12 :account="status.account" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div flex="~ col 1">
|
<div flex="~ col 1">
|
||||||
<div flex>
|
<div flex>
|
||||||
<StatusAccountDetails :account="status.account" />
|
<StatusAccountDetails :account="status.account" />
|
||||||
|
|
Loading…
Reference in a new issue