feat(ui): overlap multiple account icons in notification (#2869)

This commit is contained in:
TAKAHASHI Shuuji 2024-08-09 15:00:19 +09:00 committed by GitHub
parent 20ac0d5066
commit 879f0d8648
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -27,16 +27,16 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
{{ $t('notification.reblogged_post') }} {{ $t('notification.reblogged_post') }}
</div> </div>
</div> </div>
<div v-if="likes.length" flex="~ gap-1"> <div v-if="likes.length" flex="~ gap-1 wrap">
<div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 /> <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
<template v-for="i, idx of likes" :key="idx"> <template v-for="i, idx of likes" :key="idx">
<AccountHoverWrapper :account="i.account"> <AccountHoverWrapper :account="i.account" relative me--4 border="2 bg-base" rounded-full hover:z-1 focus-within:z-1>
<NuxtLink :to="getAccountRoute(i.account)"> <NuxtLink :to="getAccountRoute(i.account)">
<AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" /> <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
</NuxtLink> </NuxtLink>
</AccountHoverWrapper> </AccountHoverWrapper>
</template> </template>
<div ms1> <div ms-4>
{{ $t('notification.favourited_post') }} {{ $t('notification.favourited_post') }}
</div> </div>
</div> </div>