versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Add backdrop when user card is hovered on

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-07-21 19:20:31 +02:00
parent 78e4fa0f04
commit b515b361cd
No known key found for this signature in database
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/social-elements/users/UserCard.vue
View file

@ -2,14 +2,19 @@
<HoverCard.Root :positioning="{ <HoverCard.Root :positioning="{
placement: 'bottom', placement: 'bottom',
strategy: 'fixed', strategy: 'fixed',
}" v-if="isEnabled.value"> }" v-if="isEnabled.value" v-model:open="open">
<HoverCard.Trigger :as-child="true"> <HoverCard.Trigger :as-child="true">
<slot /> <slot />
</HoverCard.Trigger> </HoverCard.Trigger>
<Teleport to="body" v-if="account"> <Teleport to="body" v-if="account">
<Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0"
enter-to-class="opacity-100" leave-active-class="duration-200 ease-in-out"
leave-from-class="opacity-100" leave-to-class="opacity-0">
<div class="fixed bg-black/70 inset-0 z-10 pointer-events-none" v-if="open"></div>
</Transition>
<HoverCard.Positioner> <HoverCard.Positioner>
<HoverCard.Content <HoverCard.Content
class="bg-dark-700 w-96 overflow-y-auto rounded ring-1 ring-white/10 max-h-[60vh] text-sm"> class="bg-dark-700 w-96 z-20 overflow-y-auto rounded overflow-x-hidden ring-1 ring-white/20 shadow-xl max-h-[60vh] text-sm">
<Avatar :src="account.header" :alt="`${account.acct}'s header image'`" <Avatar :src="account.header" :alt="`${account.acct}'s header image'`"
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" /> class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
@ -91,6 +96,7 @@ const props = defineProps<{
const config = useConfig(); const config = useConfig();
const isEnabled = useSetting(SettingIds.PopupAvatarHover); const isEnabled = useSetting(SettingIds.PopupAvatarHover);
const open = ref(false);
const formattedJoin = computed(() => const formattedJoin = computed(() =>
Intl.DateTimeFormat("en-US", { Intl.DateTimeFormat("en-US", {