From b8ce2fc62bcd379ff6fd914dda22f866c9ccb5cf Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 25 Nov 2022 21:58:49 +0800
Subject: [PATCH] ui: improve hover card motion

---
 components/account/AccountAvatar.vue     | 12 ++++++++++--
 components/account/AccountHoverCard.vue  |  6 ------
 components/account/AccountInlineInfo.vue |  2 +-
 components/status/StatusCard.vue         |  2 +-
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index e6829f9e..45abefe7 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -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>
diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index aefcd703..c2738eee 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -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>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index bcaa59ba..f4957b11 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -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>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 7426a6e8..686dbe7e 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -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" />