mirrors/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2025-03-14 04:00:32 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): notification like avatar not shrink

Browse source
This commit is contained in:
cxroop 2024-06-29 11:55:32 +08:00
parent 83de5da08a
commit 1872522203
2 changed files with 46 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
components/notification/NotificationGroupedLikeItem.vue Normal file
View file

@ -0,0 +1,30 @@
<script lang="ts" setup>
import type { GroupedAccountLike } from '~/types'
const { likes } = defineProps<{
likes: GroupedAccountLike[]
hint: string
}>()
</script>
<template>
<div v-if="likes.length" flex="~ gap-1">
<slot name="icon" />
<div flex="~ col">
<div flex="~ wrap gap-1">
<template v-for="i, idx of likes" :key="idx">
<div flex-shrink-0>
<AccountHoverWrapper class="flex-shrink-0" :account="i.account">
<NuxtLink :to="getAccountRoute(i.account)">
<AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
</NuxtLink>
</AccountHoverWrapper>
</div>
</template>
</div>
<div mt2>
{{ hint }}
</div>
</div>
</div>
</template>

40
components/notification/NotificationGroupedLikes.vue
View file

@ -14,32 +14,24 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
<article flex flex-col relative>
<StatusLink :status="group.status!" pb4 pt5>
<div flex flex-col gap-3>
<div v-if="reblogs.length" flex="~ gap-1">
<div i-ri:repeat-fill text-xl me-2 color-green />
<template v-for="i, idx of reblogs" :key="idx">
<AccountHoverWrapper :account="i.account">
<NuxtLink :to="getAccountRoute(i.account)">
<AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
</NuxtLink>
</AccountHoverWrapper>
<NotificationGroupedLikeItem
v-if="reblogs.length"
:likes="reblogs"
:hint="$t('notification.reblogged_post')"
>
<template #icon>
<div i-ri:repeat-fill text-xl me-2 color-green />
</template>
<div ml1>
{{ $t('notification.reblogged_post') }}
</div>
</div>
<div v-if="likes.length" flex="~ gap-1">
<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">
<AccountHoverWrapper :account="i.account">
<NuxtLink :to="getAccountRoute(i.account)">
<AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
</NuxtLink>
</AccountHoverWrapper>
</NotificationGroupedLikeItem>
<NotificationGroupedLikeItem
v-if="likes.length"
:likes="likes"
:hint="$t('notification.favourited_post')"
>
<template #icon>
<div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
</template>
<div ms1>
{{ $t('notification.favourited_post') }}
</div>
</div>
</NotificationGroupedLikeItem>
</div>
<div ps9 mt-1>
<StatusBody :status="group.status!" text-secondary />