Improved styling in notification list

diff --git a/com.woltlab.wcf/templates/notificationList.tpl b/com.woltlab.wcf/templates/notificationList.tpl
index 83d8b250f1b352ec287c08c3fae2f2c207c98b96..59da3e6d8cfd40511cab946800e10334557567ed 100644 (file)
--- 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 c08a551fe850eb99672f04120ed98c9f004c1ce0..5593d79442ac00be04ff2a7845454dc9057d1f2f 100644 (file)
--- 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;
+               }
+       }
+}