teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: extra padding when hidding avatar on avatar

Browse source
This commit is contained in:
patak 2022-12-12 21:23:18 +01:00
parent 85f619ea82
commit 07d709c494
1 changed files with 3 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/status/StatusCard.vue
View file

@ -57,6 +57,7 @@ const filterPhrase = $computed(() => filter?.phrase || (filter as any)?.title)
const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.context.includes(props.context) : false)) const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.context.includes(props.context) : false))
const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvatarOnAvatar)) const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvatarOnAvatar))
const showRebloggedByAvatarOnAvatar = rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id
</script> </script>
<template> <template>
@ -69,12 +70,12 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
<div v-if="decorated || rebloggedBy || (showReplyTo && status.inReplyToAccountId)" h-6 /> <div v-if="decorated || rebloggedBy || (showReplyTo && status.inReplyToAccountId)" h-6 />
<div flex gap-4> <div flex gap-4>
<div relative> <div relative>
<AccountHoverWrapper :account="status.account" :class="rebloggedBy && avatarOnAvatar ? 'mt-4' : 'mt-1'"> <AccountHoverWrapper :account="status.account" :class="showRebloggedByAvatarOnAvatar ? 'mt-4' : 'mt-1'">
<NuxtLink :to="getAccountRoute(status.account)" rounded-full> <NuxtLink :to="getAccountRoute(status.account)" rounded-full>
<AccountAvatar w-12 h-12 :account="status.account" /> <AccountAvatar w-12 h-12 :account="status.account" />
</NuxtLink> </NuxtLink>
</AccountHoverWrapper> </AccountHoverWrapper>
<div v-if="(rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)" absolute class="-top-2 -left-2" w-9 h-9 border-bg-base border-3 rounded-full> <div v-if="showRebloggedByAvatarOnAvatar" absolute class="-top-2 -left-2" w-9 h-9 border-bg-base border-3 rounded-full>
<AccountAvatar :account="rebloggedBy" /> <AccountAvatar :account="rebloggedBy" />
</div> </div>
</div> </div>