From adc0f23b49e136e75b5c10a9fccb14d6a771ba6f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 18 Apr 2021 17:21:14 +0200
Subject: [PATCH] Fix notification styling

---
 .../notifications/notifications.vue           | 23 +++++++++++++------
 src/styles/components/notifications.scss      | 11 ++++++---
 2 files changed, 24 insertions(+), 10 deletions(-)

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 @@
 					<div class="read-indicator" :class="{'read': n.readAt !== null}"></div>
 					<user
 						:user="n.notification.doer"
-						:show-username="true"
+						:show-username="false"
 						:avatar-size="16"
 						v-if="n.notification.doer"/>
 					<span class="detail">
+						<p>
+
+						<span class="has-text-weight-bold" v-if="n.notification.doer">
+							{{ n.notification.doer.getDisplayName() }}
+						</span>
 						<a @click="() => to(n, index)()">
 							{{ n.toText(userInfo) }}
 						</a>
-						<span class="created" v-tooltip="formatDate(n.created)">
-							{{ formatDateSince(n.created) }}
-						</span>
+						</p>
+					<div class="created" v-tooltip="formatDate(n.created)">
+						{{ formatDateSince(n.created) }}
+					</div>
 					</span>
 				</div>
 				<p class="nothing" v-if="notifications.length === 0">
@@ -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;
 			}