From 02a17ca6bd97bd5bbbd566bb7b2fbfabbdb86b4b Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 8 Apr 2016 12:31:13 +0200
Subject: [PATCH] Fixed user profile

---
 com.woltlab.wcf/templates/userHeader.tpl      | 105 +++++++++---------
 .../install/files/style/ui/userProfile.scss   |  13 ++-
 2 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/com.woltlab.wcf/templates/userHeader.tpl b/com.woltlab.wcf/templates/userHeader.tpl
index 9a4b702c1f..f2c07b578a 100644
--- a/com.woltlab.wcf/templates/userHeader.tpl
+++ b/com.woltlab.wcf/templates/userHeader.tpl
@@ -16,63 +16,64 @@
 			{/if}>
 			
 			<div class="layoutBoundary">
-				<div class="userAvatar">
+				<header class="contentHeader">
 					{if $user->userID == $__wcf->user->userID}
-						<a href="{link controller='AvatarEdit'}{/link}" class="jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{@$user->getAvatar()->getImageTag(128)}</a>
+						<a href="{link controller='AvatarEdit'}{/link}" class="contentHeaderIcon jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{@$user->getAvatar()->getImageTag(128)}</a>
 					{else}
-						<span>{@$user->getAvatar()->getImageTag(128)}</span>
-					{/if}
-				</div>
-				
-				<header class="contentHeader">
-					<h1 class="contentTitle">
-						{$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}
-					</h1>
-					{if MODULE_USER_RANK}
-						{if $user->getUserTitle()}
-							<span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
-						{/if}
-						{if $user->getRank() && $user->getRank()->rankImage}
-							<span class="userRankImage">{@$user->getRank()->getImage()}</span>
-						{/if}
+						<span class="contentHeaderIcon">{@$user->getAvatar()->getImageTag(128)}</span>
 					{/if}
-				</header>
-				
-				<div class="buttonGroupNavigation">
-					<ul id="profileButtonContainer" class="buttonGroup">
-						{hascontent}
-							<li class="dropdown">
-								<a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
-								<ul class="dropdownMenu">
-									{content}
-									{event name='quickSearchItems'}
-									{/content}
-								</ul>
-							</li>
-						{/hascontent}
-						
-						{if $__wcf->session->getPermission('user.profile.canReportContent')}
-							<li class="jsReportUser jsOnly" data-object-id="{@$user->userID}"><a href="#" title="{lang}wcf.user.profile.report{/lang}" class="button jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.user.profile.report{/lang}</span></a></li>
-						{/if}
-						
-						{if $user->userID != $__wcf->user->userID}
-							{if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
-								<li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
-							{elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
-								<li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+					
+					<div class="contentHeaderTitle">
+						<h1 class="contentTitle">
+							{$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}
+						</h1>
+						{if MODULE_USER_RANK}
+							{if $user->getUserTitle()}
+								<span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
+							{/if}
+							{if $user->getRank() && $user->getRank()->rankImage}
+								<span class="userRankImage">{@$user->getRank()->getImage()}</span>
 							{/if}
 						{/if}
-						
-						{event name='buttons'}
-						
-						{if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
-							<li class="dropdown">
-								<a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="button jsTooltip jsUserInlineEditor" title="{lang}wcf.user.moderate{/lang}"><span class="icon icon16 fa-wrench"></span> <span class="invisible">{lang}wcf.user.moderate{/lang}</span></a>
-								<ul class="dropdownMenu"></ul>
-							</li>
-						{/if}
-					</ul>
-				</div>
+					</div>
+					
+					
+					<div class="buttonGroupNavigation">
+						<ul id="profileButtonContainer" class="buttonGroup">
+							{hascontent}
+								<li class="dropdown">
+									<a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
+									<ul class="dropdownMenu">
+										{content}
+										{event name='quickSearchItems'}
+										{/content}
+									</ul>
+								</li>
+							{/hascontent}
+							
+							{if $__wcf->session->getPermission('user.profile.canReportContent')}
+								<li class="jsReportUser jsOnly" data-object-id="{@$user->userID}"><a href="#" title="{lang}wcf.user.profile.report{/lang}" class="button jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.user.profile.report{/lang}</span></a></li>
+							{/if}
+							
+							{if $user->userID != $__wcf->user->userID}
+								{if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
+									<li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+								{elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
+									<li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+								{/if}
+							{/if}
+							
+							{event name='buttons'}
+							
+							{if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
+								<li class="dropdown">
+									<a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="button jsTooltip jsUserInlineEditor" title="{lang}wcf.user.moderate{/lang}"><span class="icon icon16 fa-wrench"></span> <span class="invisible">{lang}wcf.user.moderate{/lang}</span></a>
+									<ul class="dropdownMenu"></ul>
+								</li>
+							{/if}
+						</ul>
+					</div>
+				</header>
 			</div>
 		</div>
 		<div class="userProfileDetails">
diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index 20ad3dd8de..40599d8217 100644
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -29,7 +29,13 @@
 		}
 	}
 	
-	.userAvatar {
+	.contentHeader {
+		align-items: center;
+		color: $wcfHeaderText;
+		width: 100%;
+	}
+	
+	.contentHeaderIcon {
 		background-color: $wcfHeaderBackground;
 		border-radius: 50%;
 		left: 0;
@@ -46,9 +52,8 @@
 		}
 	}
 	
-	.contentHeader {
-		color: $wcfHeaderText;
-		flex: 1 1 auto;
+	.contentTitle + span {
+		margin-top: 5px;
 	}
 	
 	.buttonGroupNavigation {
-- 
2.20.1