diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index d1fcca47..3503de59 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -16,16 +16,22 @@
+

+ + + {{ n.notification.doer.getDisplayName() }} + {{ n.toText(userInfo) }} - - {{ formatDateSince(n.created) }} - +

+
+ {{ formatDateSince(n.created) }} +

@@ -52,7 +58,7 @@ export default { data() { return { notificationService: NotificationService, - notifications: [], + allNotifications: [], showNotifications: false, interval: null, } @@ -73,6 +79,9 @@ export default { unreadNotifications() { return this.notifications.filter(n => n.readAt === null).length }, + notifications() { + return this.allNotifications.filter(n => n.name !== '') + }, ...mapState({ userInfo: state => state.auth.info, }), @@ -86,7 +95,7 @@ export default { loadNotifications() { this.notificationService.getAll() .then(r => { - this.$set(this, 'notifications', r) + this.$set(this, 'allNotifications', r) }) .catch(e => { this.error(e, this) @@ -125,7 +134,7 @@ export default { n.read = true this.notificationService.update(n) .then(r => { - this.$set(this.notifications, index, r) + this.$set(this.allNotifications, index, r) }) .catch(e => this.error(e, this)) } diff --git a/src/styles/components/notifications.scss b/src/styles/components/notifications.scss index b3adbccb..22fba6ea 100644 --- a/src/styles/components/notifications.scss +++ b/src/styles/components/notifications.scss @@ -49,6 +49,7 @@ .single-notification { display: flex; align-items: center; + padding: 0.25rem 0; transition: background-color $transition; @@ -70,10 +71,10 @@ } .user { - display: flex; + display: inline-flex; align-items: center; width: auto; - margin-right: .25rem; + margin: 0 .5rem; span { font-family: $family-sans-serif; @@ -82,9 +83,13 @@ .avatar { height: 16px; } + + img { + margin-right: 0; + } } - .detail .created { + .created { color: $grey-400; }