Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages Activity

fix: avatar glitches in some OS/browsers

Browse source
This commit is contained in:
patak 2022-12-28 22:14:29 +01:00
parent 8a338ed021
commit ab4ceae1e3
5 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/account/AccountBigAvatar.vue Normal file
View file

@ -0,0 +1,16 @@
<script setup lang="ts">
import type { Account } from 'masto'
// Avatar with a background base achieving a 3px border to be used in status cards
// The border is used for Avatar on Avatar for reblogs and connecting replies
defineProps<{
account: Account
}>()
</script>
<template>
<div :key="account.avatar" v-bind="$attrs" rounded-full bg-base w-54px h-54px flex items-center justify-center>
<AccountAvatar :account="account" w-48px h-48px />
</div>
</template>

2
components/account/AccountInfo.vue
View file

@ -17,7 +17,7 @@ defineOptions({
<template> <template>
<component :is="as" flex gap-3 v-bind="$attrs"> <component :is="as" flex gap-3 v-bind="$attrs">
<AccountHoverWrapper :disabled="!hoverCard" :account="account" shrink-0> <AccountHoverWrapper :disabled="!hoverCard" :account="account" shrink-0>
<AccountAvatar :account="account" account-avatar-normal /> <AccountBigAvatar :account="account" />
</AccountHoverWrapper> </AccountHoverWrapper>
<div flex="~ col" shrink overflow-hidden justify-center leading-none> <div flex="~ col" shrink overflow-hidden justify-center leading-none>
<div flex="~" gap-2> <div flex="~" gap-2>

2
components/publish/PublishWidget.vue
View file

@ -188,7 +188,7 @@ defineExpose({
<div flex gap-3 flex-1> <div flex gap-3 flex-1>
<NuxtLink :to="getAccountRoute(currentUser.account)"> <NuxtLink :to="getAccountRoute(currentUser.account)">
<AccountAvatar :account="currentUser.account" account-avatar-normal /> <AccountBigAvatar :account="currentUser.account" />
</NuxtLink> </NuxtLink>
<!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing --> <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
<div <div

2
components/status/StatusCard.vue
View file

@ -109,7 +109,7 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
</template> </template>
<AccountHoverWrapper :account="status.account"> <AccountHoverWrapper :account="status.account">
<NuxtLink :to="getAccountRoute(status.account)" rounded-full> <NuxtLink :to="getAccountRoute(status.account)" rounded-full>
<AccountAvatar :account="status.account" account-avatar-normal :class="showRebloggedByAvatarOnAvatar ? 'mt-11px ' : 'mt-3px'" /> <AccountBigAvatar :account="status.account" :class="showRebloggedByAvatarOnAvatar ? 'mt-11px ' : 'mt-3px'" />
</NuxtLink> </NuxtLink>
</AccountHoverWrapper> </AccountHoverWrapper>
<div v-if="connectReply" w-full h-full flex justify-center> <div v-if="connectReply" w-full h-full flex justify-center>

3
unocss.config.ts
View file

@ -55,9 +55,6 @@ export default defineConfig({
'flex-v-center': 'items-center', 'flex-v-center': 'items-center',
'flex-h-center': 'justify-center', 'flex-h-center': 'justify-center',
'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)', 'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)',
// account
'account-avatar-normal': 'w-54px h-54px border-3 border-bg-base',
}, },
], ],
presets: [ presets: [