From: Marcel Werk <burntime@woltlab.com>
Date: Mon, 28 Nov 2016 16:17:48 +0000 (+0100)
Subject: Overhauled buttons in mobile user-panel
X-Git-Tag: 3.0.0_RC_1~113
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0a6f84dc6df25964b2719978c3d163c7f9c69c5d;p=GitHub%2FWoltLab%2FWCF.git

Overhauled buttons in mobile user-panel
---

diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index 294580c1e8..de4f28b748 100644
--- 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 fa207377e4..c254570e72 100644
--- 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;
 		}
 	}