zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

fix(ui): improve notifications alignment and icons consistenty

Browse source
This commit is contained in:
Anthony Fu 2023-09-08 18:14:19 +02:00
parent 06ef226440
commit 319f9c4ece
3 changed files with 14 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/notification/NotificationGroupedLikes.vue
View file

@ -12,10 +12,10 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
<template>
<article flex flex-col relative>
<StatusLink :status="group.status!" pb2 pt3>
<div flex flex-col gap-2>
<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-1 color-green />
<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)">
@ -28,7 +28,7 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
</div>
</div>
<div v-if="likes.length" flex="~ gap-1">
<div :class="useStarFavoriteIcon ? 'i-ri:star-fill color-yellow' : 'i-ri:heart-fill color-red'" text-xl me-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)">
@ -36,12 +36,12 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
</NuxtLink>
</AccountHoverWrapper>
</template>
<div ml1>
<div ms1>
{{ $t('notification.favourited_post') }}
</div>
</div>
</div>
<div pl8 mt-1>
<div ps9 mt-1>
<StatusBody :status="group.status!" text-secondary />
<!-- When no text content is presented, we show media instead -->
<template v-if="!group.status!.content">