teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/notification/NotificationCard.vue
View file

@ -17,21 +17,22 @@ const { notification } = defineProps<{
py-3 bg-base top-0 py-3 bg-base top-0
:lang="notification.status?.language ?? undefined" :lang="notification.status?.language ?? undefined"
> >
<div i-ri:user-follow-fill me-1 color-primary /> <div i-ri-user-3-line text-xl me-3 color-blue />
<AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all /> <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
<span ws-nowrap> <span ws-nowrap>
{{ $t('notification.followed_you') }} {{ $t('notification.followed_you') }}
</span> </span>
</div> </div>
<AccountBigCard <AccountBigCard
ms10
:account="notification.account" :account="notification.account"
:lang="notification.status?.language ?? undefined" :lang="notification.status?.language ?? undefined"
/> />
</NuxtLink> </NuxtLink>
</template> </template>
<template v-else-if="notification.type === 'admin.sign_up'"> <template v-else-if="notification.type === 'admin.sign_up'">
<div flex p3 items-center bg-shaded> <div flex p4 items-center bg-shaded>
<div i-ri:user-add-fill me-1 color-purple /> <div i-ri:user-add-line text-xl me-2 color-purple />
<AccountDisplayName <AccountDisplayName
:account="notification.account" :account="notification.account"
text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
@ -41,8 +42,8 @@ const { notification } = defineProps<{
</template> </template>
<template v-else-if="notification.type === 'admin.report'"> <template v-else-if="notification.type === 'admin.report'">
<NuxtLink :to="getReportRoute(notification.report?.id!)"> <NuxtLink :to="getReportRoute(notification.report?.id!)">
<div flex p3 items-center bg-shaded> <div flex p4 items-center bg-shaded>
<div i-ri:flag-fill me-1 color-purple /> <div i-ri:flag-line text-xl me-2 color-purple />
<i18n-t keypath="notification.reported"> <i18n-t keypath="notification.reported">
<AccountDisplayName <AccountDisplayName
:account="notification.account" :account="notification.account"

4
components/notification/NotificationGroupedFollow.vue
View file

@ -15,7 +15,7 @@ const lang = $computed(() => {
<template> <template>
<article flex flex-col relative :lang="lang ?? undefined"> <article flex flex-col relative :lang="lang ?? undefined">
<div flex items-center top-0 left-2 pt-2 px-3> <div flex items-center top-0 left-2 pt-2 px-3>
<div i-ri:user-follow-fill me-3 color-primary aria-hidden="true" /> <div :class="count > 1 ? 'i-ri-group-line' : 'i-ri-user-3-line'" me-3 color-blue text-xl aria-hidden="true" />
<template v-if="count > 1"> <template v-if="count > 1">
<CommonLocalizedNumber <CommonLocalizedNumber
keypath="notification.followed_you_count" keypath="notification.followed_you_count"
@ -32,7 +32,7 @@ const lang = $computed(() => {
</span> </span>
</template> </template>
</div> </div>
<div pb-2> <div pb-2 ps8>
<div v-if="isExpanded"> <div v-if="isExpanded">
<AccountCard <AccountCard
v-for="item in items.items" v-for="item in items.items"

12
components/notification/NotificationGroupedLikes.vue
View file

@ -12,10 +12,10 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
<template> <template>
<article flex flex-col relative> <article flex flex-col relative>
<StatusLink :status="group.status!" pb2 pt3> <StatusLink :status="group.status!" pb4 pt5>
<div flex flex-col gap-2> <div flex flex-col gap-3>
<div v-if="reblogs.length" flex="~ gap-1"> <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"> <template v-for="i, idx of reblogs" :key="idx">
<AccountHoverWrapper :account="i.account"> <AccountHoverWrapper :account="i.account">
<NuxtLink :to="getAccountRoute(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> </div>
<div v-if="likes.length" flex="~ gap-1"> <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"> <template v-for="i, idx of likes" :key="idx">
<AccountHoverWrapper :account="i.account"> <AccountHoverWrapper :account="i.account">
<NuxtLink :to="getAccountRoute(i.account)"> <NuxtLink :to="getAccountRoute(i.account)">
@ -36,12 +36,12 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
</NuxtLink> </NuxtLink>
</AccountHoverWrapper> </AccountHoverWrapper>
</template> </template>
<div ml1> <div ms1>
{{ $t('notification.favourited_post') }} {{ $t('notification.favourited_post') }}
</div> </div>
</div> </div>
</div> </div>
<div pl8 mt-1> <div ps9 mt-1>
<StatusBody :status="group.status!" text-secondary /> <StatusBody :status="group.status!" text-secondary />
<!-- When no text content is presented, we show media instead --> <!-- When no text content is presented, we show media instead -->
<template v-if="!group.status!.content"> <template v-if="!group.status!.content">