From 98618a3e4daccf640ca01da049d68982cb72fd5b Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Sun, 21 Aug 2016 16:10:04 +0200
Subject: [PATCH] Improved styling in notification list

---
 .../templates/notificationList.tpl            |  4 +--
 .../install/files/style/ui/userProfile.scss   | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/com.woltlab.wcf/templates/notificationList.tpl b/com.woltlab.wcf/templates/notificationList.tpl
index 83d8b250f1..59da3e6d8c 100644
--- a/com.woltlab.wcf/templates/notificationList.tpl
+++ b/com.woltlab.wcf/templates/notificationList.tpl
@@ -77,10 +77,10 @@
 								</p>
 								<p><small>{@$notification[time]|time}</small></p>
 								
-								<ul>
+								<ul class="userAvatarList small">
 									{foreach from=$notification[event]->getAuthors() item=author}
 										{if $author->userID}
-											<li style="display: inline-block" class="jsTooltip" title="{$author->username}"><a href="{link controller='User' object=$author}{/link}">{@$author->getAvatar()->getImageTag(24)}</a></li>
+											<li class="jsTooltip" title="{$author->username}"><a href="{link controller='User' object=$author}{/link}">{@$author->getAvatar()->getImageTag(24)}</a></li>
 										{/if}
 									{/foreach}
 								</ul>
diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index c08a551fe8..5593d79442 100644
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -114,6 +114,22 @@
 			}
 		}
 	}
+	
+	&.small {
+		> li {
+			flex: 0 0 24px;
+			
+			&:not(:last-child) {
+				margin-right: -6px;
+			}
+			
+			> a {
+				> img {
+					padding: 1px;
+				}
+			}
+		}	
+	}
 }
 
 .userList {
@@ -147,3 +163,19 @@
 	
 	@include wcfFontSmall;
 }
+
+/* user notifications */
+.userNotificationItemList > .notificationItem {
+	&.notificationUnconfirmed {
+		align-items: center;
+		display: flex;
+		
+		> .box32 {
+			flex: 1 1 auto;
+		}
+		
+		> .notificationItemMarkAsConfirmed {
+			flex: 0 0 auto;
+		}
+	}
+}
-- 
2.20.1