ui: improve hover card motion
parent
fd410010ca
commit
b8ce2fc62b
|
@ -14,10 +14,18 @@ defineOptions({
|
|||
<template>
|
||||
<div v-if="hover" relative flex-shrink-0>
|
||||
<div group>
|
||||
<AccountHoverCard top="-3.2" left="-4.4" absolute :account="account" op0 pointer-events-none group-hover="pointer-events-auto op100 scale-100" font-normal delay-250 transition transform scale-20 class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]" />
|
||||
<AccountHoverCard
|
||||
:account="account"
|
||||
absolute top-0 left-0 z-10
|
||||
op0 pointer-events-none rotate--2
|
||||
font-normal delay-300 duration-300 transition transform
|
||||
group-hover="pointer-events-auto op100 rotate-0"
|
||||
translate="x-[calc(-1rem-1px)] y-[calc(-1rem-1px)]"
|
||||
class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]"
|
||||
style="transform-origin: calc(1rem + 1px) calc(0.75rem + 1px);"
|
||||
/>
|
||||
<AccountAvatarImage :account="account" v-bind="$attrs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AccountAvatarImage v-else :account="account" v-bind="$attrs" />
|
||||
</template>
|
||||
|
|
|
@ -25,9 +25,3 @@ defineProps<{
|
|||
<ContentRichSetup text-4 text-gray :content="account.note" :emojis="account.emojis" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.account-hover-card {
|
||||
transform-origin: 3em 3em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -9,7 +9,7 @@ const { link = true } = defineProps<{
|
|||
|
||||
<template>
|
||||
<NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
|
||||
<AccountAvatar :account="account" w-5 h-5 hover />
|
||||
<AccountAvatar :account="account" w-5 h-5 />
|
||||
<ContentRichSetup hover:underline :content="getDisplayName(account)" :emojis="account.emojis" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
|
@ -77,7 +77,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
|
|||
</div>
|
||||
</div>
|
||||
<div flex gap-4>
|
||||
<AccountAvatar mt1 w-12 h-12 :account="status.account" hover />
|
||||
<AccountAvatar w-12 h-12 :account="status.account" hover />
|
||||
<div flex="~ col 1" min-w-0>
|
||||
<div flex>
|
||||
<StatusAccountDetails :account="status.account" />
|
||||
|
|
Loading…
Reference in New Issue