Refine 'NotificationMenu.vue'

This commit is contained in:
Wolfgang Huß 2022-11-16 14:16:22 +01:00
parent 4ebae574f2
commit 61effbe403

View File

@ -12,17 +12,19 @@
<counter-icon icon="bell" :count="unreadNotificationsCount" danger /> <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
</base-button> </base-button>
</template> </template>
<template slot="popover"> <template #popover>
<div class="notifications-menu-popover"> <div class="notifications-menu-popover">
<notification-list :notifications="notifications" @markAsRead="markAsRead" /> <notification-list :notifications="notifications" @markAsRead="markAsRead" />
</div> </div>
<ds-flex class="notifications-link-container"> <ds-flex class="notifications-link-container">
<ds-flex-item :width="{ base: '50%' }" centered> <ds-flex-item :width="{ base: 'auto' }" centered>
<nuxt-link :to="{ name: 'notifications' }"> <nuxt-link :to="{ name: 'notifications' }">
{{ $t('notifications.pageLink') }} <ds-button ghost primary>
{{ $t('notifications.pageLink') }}
</ds-button>
</nuxt-link> </nuxt-link>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '50%' }" centered> <ds-flex-item :width="{ base: 'auto' }" centered>
<ds-button ghost primary @click="markAllAsRead" data-test="markAllAsRead-button"> <ds-button ghost primary @click="markAllAsRead" data-test="markAllAsRead-button">
{{ $t('notifications.markAllAsRead') }} {{ $t('notifications.markAllAsRead') }}
</ds-button> </ds-button>
@ -146,7 +148,7 @@ export default {
} }
.notifications-link-container { .notifications-link-container {
background-color: $background-color-softer-active; background-color: $background-color-softer-active;
text-align: center; justify-content: center;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;