From e0babb87d04540437028c995290c941653d346e6 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 2 Mar 2016 13:55:48 +0100
Subject: [PATCH] Overhauled frontend header

---
 com.woltlab.wcf/templates/pageHeader.tpl      |  18 +-
 .../templates/pageHeaderSearch.tpl            |   2 +
 .../files/images/default-logo-small.png       | Bin 2246 -> 1751 bytes
 .../files/style/layout/pageHeader.scss        | 315 ++++++++----------
 .../files/style/layout/pageHeaderSticky.scss  | 103 ++++--
 5 files changed, 232 insertions(+), 206 deletions(-)

diff --git a/com.woltlab.wcf/templates/pageHeader.tpl b/com.woltlab.wcf/templates/pageHeader.tpl
index c1f0892f9d..961efe1031 100644
--- a/com.woltlab.wcf/templates/pageHeader.tpl
+++ b/com.woltlab.wcf/templates/pageHeader.tpl
@@ -2,16 +2,20 @@
 	<header id="pageHeader" class="pageHeader">
 		<div>
 			<div class="layoutBoundary">
-				{include file='pageHeaderLogo'}
-				
-				{include file='pageHeaderUser'}
-				
-				{include file='pageHeaderMenu'}
-				
-				{include file='pageHeaderSearch'}
+				<div class="pageHeaderContainerLeft">
+					{include file='pageHeaderLogo'}
+					
+					{include file='pageHeaderMenu'}
+				</div>
+				<div class="pageHeaderContainerRight">
+					{include file='pageHeaderSearch'}
+					
+					{include file='pageHeaderUser'}
+				</div>
 			</div>
 		</div>
 		
+		{* TODO: this should be moved somewhere else and turned into an option *}
 		<script data-relocate="true">
 			require(['WoltLab/WCF/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
 				UiPageHeaderFixed.init();
diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
index 9189baf74a..8b466883e2 100644
--- a/com.woltlab.wcf/templates/pageHeaderSearch.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
@@ -27,6 +27,8 @@
 			</button>
 		</div>
 		
+		<label for="pageHeaderSearchInput" class="pageHeaderSearchLabel"></label>
+		
 		{@$__searchHiddenInputFields}
 		{@SECURITY_TOKEN_INPUT_TAG}
 	</form>
diff --git a/wcfsetup/install/files/images/default-logo-small.png b/wcfsetup/install/files/images/default-logo-small.png
index 0b7e77cd4dae505a2f61a4f25e43cd0be2932d29..f0fec150dae7c2e047e73cca575ab6d5356eab24 100644
GIT binary patch
literal 1751
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

literal 2246
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
bb=yP;<m(Wgee{#({(?3Z4(2tcKC%A-cG=~B

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 5022206521..5c51b60390 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -15,20 +15,29 @@
 	}
 }
 
-.pageHeader > div > div {
-	align-items: center;
+.pageHeader .layoutBoundary {
 	display: flex;
-	flex-wrap: wrap;
 	padding-top: 20px;
 	padding-bottom: 20px;
+	
+	.pageHeaderContainerLeft,
+	.pageHeaderContainerRight {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	
+	.pageHeaderContainerLeft {
+		flex: 1 1 auto;
+	}
+	
+	.pageHeaderContainerRight {
+		flex: 0 0 auto;
+	}
 }
 
 /* LOGO */
 .pageHeaderLogo {
-	// use a fixed width of 50% together with the search bar to force a wrap
-	flex: 0 0 50%;
-	
-	// gap between the two rows formed by the wrapping flex box
 	margin-bottom: 15px;
 	
 	.pageHeaderLogoSmall {
@@ -37,130 +46,68 @@
 }
 
 /* MAIN MENU */
-.mainMenu {
-	flex: 1 1 auto;
+.mainMenu .boxMenu {
+	display: flex;
 	
-	.boxMenu {
-		display: flex;
+	> li {
+		flex: 0 0 auto;
 		
-		> li {
-			@extend .wcfFontHeadline;
-			
-			flex: 0 0 auto;
-			
-			&:not(:last-child) {
-				margin-right: 12px;
-			}
-			
-			> a,
-			> span {
-				background-color: $wcfHeaderMenuBackground;
-				color: $wcfHeaderMenuLink;
-				display: block;
-				font-size: 16px;
-				font-weight: 400;
-				padding: 4px 12px;
-			}
-			
-			> span {
-				cursor: default;
-			}
-			
-			&.active > a,
-			&:hover > a,
-			&.active > span,
-			&:hover > span {
-				background-color: $wcfHeaderMenuBackgroundActive;
-				color: $wcfHeaderMenuLinkActive;
-			}
+		@extend .wcfFontHeadline;
+		
+		> a {
+			background-color: $wcfHeaderMenuBackground;
+			color: $wcfHeaderMenuLink;
+			display: block;
+			font-size: 16px;
+			font-weight: 400;
+			padding: 6px 12px;
 		}
 		
-		> .boxMenuHasChildren {
-			position: relative;
-			
-			&:hover {
-				> a::after {
-					transform: rotateX(180deg);
-				}
-				
-				.boxMenuDepth1 {
-					visibility: visible;
-				}
-			}
-			
-			> a {
-				padding-right: 30px;
-				
-				&::before {
-					border-left: 1px solid $wcfHeaderBackground;
-					bottom: 0;
-					content: "";
-					display: block;
-					position: absolute;
-					right: 22px;
-					top: 0;
-				}
-			}
-			
-			> span {
-				padding-right: 21px;
-			}
-			
-			> a::after,
-			> span::after {
-				content: $fa-var-caret-down;
-				display: block;
-				font-family: FontAwesome;
-				position: absolute;
-				right: 6px;
-				top: 3px;
-				transition: transform .12s ease-out;
-			}
+		> span {
+			cursor: default;
 		}
 		
-		.boxMenuDepth1 {
-			background-color: $wcfHeaderMenuDropdownBackground;
-			border-bottom: 1px solid $wcfHeaderMenuDropdownBorder;
-			box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
-			padding: 3px 0;
-			position: absolute;
-			visibility: hidden;
-			
-			// offset the menu to prevent the staircase effect when two elements with dark and light
-			// colors are right below each other; uses a transparent border rather than a margin to
-			// prevent losing the hover on the <li> causing the menu to collapse when the cursor is
-			// right between the menu item and the menu itself
-			background-clip: padding-box;
-			border-top: 3px solid transparent;
-			
-			@extend .wcfFontDefault;
-			
-			> li {
-				> a {
-					color: $wcfHeaderMenuDropdownLink;
-				}
-				
-				> a,
-				> span {
-					display: block;
-					padding: 5px 20px;
-					white-space: nowrap;
-				}
-				
-				&.active > a,
-				> a:hover {
-					background-color: $wcfHeaderMenuDropdownBackgroundActive;
-					color: $wcfHeaderMenuDropdownLinkActive;
-					text-decoration: none;
-				}
-			}
+		&.active > a,
+		&:hover > a {
+			background-color: $wcfHeaderMenuBackgroundActive;
+			color: $wcfHeaderMenuLinkActive;
+		}
+	}
+	
+	> .boxMenuHasChildren {
+		position: relative;
+		
+		&:hover .boxMenuDepth1 {
+			visibility: visible;
 		}
+	}
+	
+	.boxMenuDepth1 {
+		background-color: $wcfHeaderMenuDropdownBackground;
+		border-bottom: 1px solid $wcfHeaderMenuDropdownBorder;
+		box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
+		padding: 3px 0;
+		position: absolute;
+		visibility: hidden;
+		
+		// offset the menu to prevent the staircase effect when two elements with dark and light
+		// colors are right below each other; uses a transparent border rather than a margin to
+		// prevent losing the hover on the <li> causing the menu to collapse when the cursor is
+		// right between the menu item and the menu itself
+		background-clip: padding-box;
+		border-top: 3px solid transparent;
+		
+		@extend .wcfFontDefault;
 		
-		.boxMenuDepth2 > li {
+		> li {
 			> a {
 				color: $wcfHeaderMenuDropdownLink;
+			}
+			
+			> a,
+			> span {
 				display: block;
-				padding: 5px 20px 5px 40px;
+				padding: 5px 20px;
 				white-space: nowrap;
 			}
 			
@@ -172,72 +119,84 @@
 			}
 		}
 	}
+	
+	.boxMenuDepth2 > li {
+		> a {
+			color: $wcfHeaderMenuDropdownLink;
+			display: block;
+			padding: 5px 20px 5px 40px;
+			white-space: nowrap;
+		}
+		
+		&.active > a,
+		> a:hover {
+			background-color: $wcfHeaderMenuDropdownBackgroundActive;
+			color: $wcfHeaderMenuDropdownLinkActive;
+			text-decoration: none;
+		}
+	}
 }
 
 /* user panel */
-.userPanel {
-	flex: 0 0 50%;
+.userPanel  > ul {
+	display: flex;
+	justify-content: flex-end;
 	
-	> ul {
+	> li {
+		align-items: center;
 		display: flex;
-		justify-content: flex-end;
+		flex: 0 auto;
 		
-		> li {
-			align-items: center;
-			display: flex;
+		/* margin between items, do not use the inner elements (such as a contained <a>) for
+		   this as it causes the last item to be of uneven size compared to all other items */
+		margin-left: 10px;
+		
+		&:not(:last-child) {
+			margin-right: 10px;
+		}
+		
+		> a {
 			flex: 0 auto;
+			position: relative;
 			
-			/* margin between items, do not use the inner elements (such as a contained <a>) for
-			   this as it causes the last item to be of uneven size compared to all other items */
-			margin-left: 10px;
-			
-			&:not(:last-child) {
-				margin-right: 10px;
+			/* set icon color */
+			> .icon {
+				color: $wcfHeaderLink;
 			}
-			
-			> a {
-				flex: 0 auto;
-				position: relative;
-				
-				/* set icon color */
+			&:hover {
 				> .icon {
-					color: $wcfHeaderLink;
-				}
-				&:hover {
-					> .icon {
-						color: $wcfHeaderLinkActive;
-					}
-				}
-				
-				/* hide icon label */
-				> span:not(.icon):not(.badge) {
-					display: none;
-				}
-				
-				/* special styling for update badge */
-				> span.badgeUpdate {
-					box-shadow: -1px 2px 3px rgba(0, 0, 0, .3), inset 0 2px 5px rgba(225, 225, 225, .3);
-					left: 16px;
-					position: absolute;
-					top: -5px;
+					color: $wcfHeaderLinkActive;
 				}
 			}
 			
-			/* ringing animation for notification icon */
-			&#userNotifications:not([data-count="0"]) { 
-				> a > .icon {
-					animation: fa-bell-ring 5s ease 10s 6;
-					transform-origin: 50% 0;
-				}
+			/* hide icon label */
+			> span:not(.icon):not(.badge) {
+				display: none;
 			}
 			
-			/* hover effect for user menu button */
-			&#userMenu {
-				> a {
-					&:hover {
-						> img {
-							box-shadow: 0 0 0 2px $wcfHeaderLink;
-						}
+			/* special styling for update badge */
+			> span.badgeUpdate {
+				box-shadow: -1px 2px 3px rgba(0, 0, 0, .3), inset 0 2px 5px rgba(225, 225, 225, .3);
+				left: 16px;
+				position: absolute;
+				top: -5px;
+			}
+		}
+		
+		/* ringing animation for notification icon */
+		&#userNotifications:not([data-count="0"]) { 
+			> a > .icon {
+				animation: fa-bell-ring 5s ease 10s 6;
+				transform-origin: 50% 0;
+			}
+		}
+		
+		/* hover effect for user menu button */
+		&#userMenu {
+			> a {
+				&:hover {
+					> img {
+						box-shadow: 0 0 0 2px $wcfHeaderLink;
 					}
 				}
 			}
@@ -247,19 +206,20 @@
 
 /* SEARCH AREA */
 .pageHeaderSearch {
-	// use a fixed width of 50% to force a wrap
-	flex: 0 0 50%;
+	margin-bottom: 15px;
 	text-align: right;
+	
+	.pageHeaderSearchLabel {
+		display: none;
+	}
 }
 
 .pageHeaderSearchInputContainer {
-	display: inline-block;
 	position: relative;
 	
 	&:hover {
 		.pageHeaderSearchInput {
 			background-color: $wcfHeaderSearchBoxBackgroundActive;
-			border-color: $wcfHeaderSearchBoxBorderActive;
 			color: $wcfHeaderSearchBoxTextActive;
 		}
 		
@@ -270,13 +230,12 @@
 	
 	.pageHeaderSearchInput {
 		background-color: $wcfHeaderSearchBoxBackground;
-		border-color: $wcfHeaderSearchBoxBorder;
+		border-width: 0;
 		color: $wcfHeaderSearchBoxText;
-		padding-right: 30px;
+		padding: 6px 30px 6px 8px;
 		
 		&:focus {
 			background-color: $wcfHeaderSearchBoxBackgroundActive;
-			border-color: $wcfHeaderSearchBoxBorderActive;
 			color: $wcfHeaderSearchBoxTextActive;
 			
 			~ .pageHeaderSearchInputButton > .icon {
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index 97e62ba7ab..1e8eb63350 100644
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -20,52 +20,113 @@
 		z-index: 301;
 		
 		> div {
-			padding-bottom: 10px;
-			padding-top: 10px;
+			height: 50px;
+			
+			// remove padding, the vertical alignment is done using `align-items`
+			padding-bottom: 0;
+			padding-top: 0;
 		}
 	}
 	
-	.pageHeaderSearchInputContainer:not(.open) {
-		> .pageHeaderSearchInput {
-			padding-right: 20px;
-			width: 20px;
+	@include large-screen-only {
+		.pageHeaderContainerLeft,
+		.pageHeaderContainerRight {
+			align-items: center;
+			flex-direction: row;
+			justify-content: flex-start;
 		}
 		
-		> .pageHeaderSearchInputButton {
-			pointer-events: none;
+		.pageHeaderContainerRight {
+			min-width: 200px;
+			position: relative;
 		}
-	}
-	
-	@include large-screen-only {
-		#logo {
-			flex: 0 auto;
+		
+		.pageHeaderLogo {
 			margin-bottom: 0;
 			order: 1;
 			
-			> a > .large {
+			> a > .pageHeaderLogoLarge {
 				display: none;
 			}
 			
-			> a > .small {
+			> a > .pageHeaderLogoSmall {
 				display: block;
 			}
 		}
 		
 		.mainMenu {
-			flex: 1 auto;
 			order: 2;
 			margin: 0 20px;
+			
+			.boxMenu > li > a {
+				align-items: center;
+				display: flex;
+				height: 50px;
+			}
+			
+			.boxMenuDepth1 {
+				border-top-width: 0;
+			}
 		}
 		
 		.userPanel {
-			flex: 0 auto;
-			order: 3;
-			margin-right: 20px;
+			margin-left: 10px;
+			order: 4;
 		}
 		
 		.pageHeaderSearch {
-			flex: 0 auto;
-			order: 4;
+			margin-bottom: 0;
+			order: 3;
+			
+			.pageHeaderSearchInput {
+				height: 50px;
+				width: 100%;
+			}
+			
+			.pageHeaderSearchLabel {
+				background-color: $wcfHeaderSearchBoxBackground;
+				cursor: pointer;
+				display: block;
+				height: 50px;
+				width: 50px;
+				
+				&:hover {
+					background-color: $wcfHeaderSearchBoxBackgroundActive;
+				}
+				
+				&::before {
+					content: $fa-var-search;
+					display: block;
+					font-family: FontAwesome;
+					font-size: 28px;
+					line-height: 32px;
+					position: relative;
+					right: 11px;
+					top: 9px;
+				}
+			}
+		}
+		
+		.pageHeaderSearchInputContainer {
+			&.open {
+				bottom: 0;
+				left: 0;
+				position: absolute;
+				right: 0;
+				top: 0;
+				z-index: 100;
+				
+				~ .pageHeaderSearchLabel {
+					visibility: hidden;
+				}
+			}
+			
+			&:not(.open) {
+				> .pageHeaderSearchInput,
+				> .pageHeaderSearchInputButton {
+					display: none;
+				}
+			}
 		}
 	}
 }
-- 
2.20.1