Skip to content

Commit

Permalink
fix(ui): notification like avatar not shrink
Browse files Browse the repository at this point in the history
  • Loading branch information
cxroop committed Jun 29, 2024
1 parent 83de5da commit 1872522
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 24 deletions.
30 changes: 30 additions & 0 deletions components/notification/NotificationGroupedLikeItem.vue
Original file line number Diff line number Diff line change
@@ -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 changes: 16 additions & 24 deletions components/notification/NotificationGroupedLikes.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down

0 comments on commit 1872522

Please sign in to comment.