Overhauled buttons in mobile user-panel

diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index 294580c1e8d2291375e40aa85e1d872c5e5f3885..de4f28b7489a7bf073b141989661506544a9bbad 100644 (file)
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -1,4 +1,8 @@
-<nav id="topMenu" class="userPanel">
+<nav id="topMenu" class="userPanel{if $__wcf->user->userID} userPanelLoggedIn{/if}">
+       {if $__wcf->user->userID}
+               <span class="userPanelAvatar">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</span>
+       {/if}
+       
        <ul class="userPanelItems">
                {if $__wcf->user->userID}
                        <!-- user menu -->

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index fa207377e494dc2aa4048ad9611c2c4aa3006a40..c254570e72997bb9fa6133045e9ff13dc85b2333 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -284,6 +284,10 @@
                        }
                }
        }
+       
+       .userPanelAvatar {
+               display: none;
+       }
 }
 
 /* LOGO */
@@ -435,13 +439,14 @@
        .userPanel {
                flex: 0 0 auto;
                
-               &::before {
-                       content: $fa-var-user;
-               }
-               
                > .userPanelItems {
                        display: none;
                }
+               
+               .userPanelAvatar {
+                       display: block;
+                       padding: 0 5px;
+               }
        }
        
        .mainMenu {
@@ -460,31 +465,37 @@
        .userPanel {
                position: relative;
                
+               &.pageMenuMobileButtonHasContent::after {
+                       background-color: rgb(244, 67, 54);
+                       border: 2px solid $wcfHeaderBackground;
+                       border-radius: 50%;
+                       content: "";
+                       height: 14px;
+                       position: absolute;
+                       right: -3px;
+                       top: -3px;
+                       width: 14px;
+               }
+       }
+       
+       .mainMenu,
+       .userPanel:not(.userPanelLoggedIn) {
                &::before {
-                       background-color: $wcfHeaderMenuBackground;
-                       border-radius: 2px;
                        color: $wcfHeaderMenuLink;
                        font-family: FontAwesome;
                        font-size: 28px;
                        line-height: 32px;
-                       padding: 5px 10px;
+                       padding: 5px 5px;
                }
                
                &:hover::before {
-                       background-color: $wcfHeaderMenuLinkBackgroundActive;
                        color: $wcfHeaderMenuLinkActive;
                }
-               
-               &.pageMenuMobileButtonHasContent::after {
-                       background-color: rgb(244, 67, 54);
-                       border: 2px solid $wcfHeaderBackground;
-                       border-radius: 50%;
-                       content: "";
-                       height: 14px;
-                       position: absolute;
-                       right: -5px;
-                       top: -8px;
-                       width: 14px;
+       }
+       
+       .userPanel:not(.userPanelLoggedIn) {
+               &::before {
+                       content: $fa-var-user;
                }
        }