From 202509251cffb551aa2df4dcf1a8f16f5ef04f12 Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Tue, 3 Jan 2017 16:06:53 +0100
Subject: [PATCH 1/8] Use flexbox for header and rearrange some elements

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 core/css/header.scss           |  23 +++++--
 core/css/styles.scss           |   2 -
 core/templates/layout.user.php | 117 +++++++++++++++++----------------
 3 files changed, 77 insertions(+), 65 deletions(-)

diff --git a/core/css/header.scss b/core/css/header.scss
index 886c2489a6..a4e568244a 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -38,6 +38,7 @@
 #body-user #header,
 #body-settings #header,
 #body-public #header {
+	display: inline-flex;
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -47,13 +48,11 @@
 	line-height: 2.5em;
 	background-color: #0082c9;
 	box-sizing: border-box;
+	justify-content: space-between;
 }
 
 /* LOGO and APP NAME -------------------------------------------------------- */
 #nextcloud {
-	position: absolute;
-	top: 0;
-	left: 0;
 	padding: 5px;
 	padding-bottom: 0;
 	height: 45px;
@@ -92,8 +91,6 @@
 	}
 	.header-appname-container {
 		display: inline-block;
-		position: absolute;
-		left: 70px;
 		height: 27px;
 		padding-top: 18px;
 		padding-right: 10px;
@@ -108,6 +105,19 @@
 		padding: 0;
 		vertical-align: middle;
 	}
+
+	#header-left #header-right {
+		display: flex;
+	}
+
+	div.header-left {
+		flex: 0 0 50%;
+	}
+
+	#header-right {
+		display: flex;
+		justify-content: flex-end;
+	}
 }
 
 /* hover effect for app switcher label */
@@ -306,7 +316,7 @@
 }
 
 #settings {
-	float: right;
+	display: inline-block;
 	color: #ddd;
 	cursor: pointer;
 	.icon-loading-small-dark {
@@ -315,6 +325,7 @@
 		margin-right: 6px;
 		background-size: 16px 16px;
 	}
+	flex: 0 0 auto;
 }
 
 /* User menu on the right */
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 27ce681391..e7aeb06314 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -169,7 +169,6 @@ body {
 	border: 0;
 	border-radius: 3px;
 	margin-top: 9px;
-	float: right;
 	width: 0;
 	cursor: pointer;
 	-webkit-transition: all 100ms;
@@ -179,7 +178,6 @@ body {
 	&:focus, &:active, &:valid {
 		color: #fff;
 		width: 155px;
-		max-width: 50%;
 		cursor: text;
 		background-color: #0082c9;
 		border: 1px solid rgba(255, 255, 255, 0.5);
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index c53e016c1c..05f71e4b68 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -42,67 +42,70 @@
 		<div id="notification"></div>
 	</div>
 	<header role="banner"><div id="header">
-			<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
-				id="nextcloud" tabindex="1">
-				<div class="logo-icon">
-					<h1 class="hidden-visually">
-						<?php p($theme->getName()); ?>
-					</h1>
-				</div>
-			</a>
-
-			<a href="#" class="header-appname-container menutoggle" tabindex="2">
-				<h1 class="header-appname">
-					<?php p(!empty($_['application'])?$_['application']: $l->t('Apps')); ?>
-				</h1>
-				<div class="icon-caret"></div>
-			</a>
-
-			<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
-			<div id="settings">
-				<div id="expand" tabindex="6" role="link" class="menutoggle">
-					<?php if ($_['enableAvatars']): ?>
-					<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown'); } else { print_unescaped('" style="display: none'); } ?>">
-						<?php if ($_['userAvatarSet']): ?>
-							<img alt="" width="32" height="32"
-							src="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 32, 'v' => $_['userAvatarVersion']]));?>"
-							srcset="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 64, 'v' => $_['userAvatarVersion']]));?> 2x, <?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 128, 'v' => $_['userAvatarVersion']]));?> 4x"
-							>
-						<?php endif; ?>
+			<div class="header-left">
+				<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
+					id="nextcloud" tabindex="1">
+					<div class="logo-icon">
+						<h1 class="hidden-visually">
+							<?php p($theme->getName()); ?>
+						</h1>
 					</div>
-					<?php endif; ?>
-					<span id="expandDisplayName"><?php  p(trim($_['user_displayname']) != '' ? $_['user_displayname'] : $_['user_uid']) ?></span>
+				</a>
+
+				<a href="#" class="header-appname-container menutoggle" tabindex="2">
+					<h1 class="header-appname">
+						<?php p(!empty($_['application'])?$_['application']: $l->t('Apps')); ?>
+					</h1>
 					<div class="icon-caret"></div>
-				</div>
-				<div id="expanddiv">
-				<ul>
-				<?php foreach($_['settingsnavigation'] as $entry):?>
-					<li>
-						<a href="<?php print_unescaped($entry['href']); ?>"
-							<?php if( $entry["active"] ): ?> class="active"<?php endif; ?>>
-							<img alt="" src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>">
-							<?php p($entry['name']) ?>
-						</a>
-					</li>
-				<?php endforeach; ?>
-					<li>
-						<a id="logout" <?php print_unescaped(OC_User::getLogoutAttribute()); ?>>
-							<img alt="" src="<?php print_unescaped(image_path('', 'actions/logout.svg') . '?v=' . $_['versionHash']); ?>">
-							<?php p($l->t('Log out'));?>
-						</a>
-					</li>
-				</ul>
-				</div>
+				</a>
 			</div>
 
-			<form class="searchbox" action="#" method="post" role="search" novalidate>
-				<label for="searchbox" class="hidden-visually">
-					<?php p($l->t('Search'));?>
-				</label>
-				<input id="searchbox" type="search" name="query"
-					value="" required
-					autocomplete="off" tabindex="5">
-			</form>
+			<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
+			<div id="header-right">
+				<form class="searchbox" action="#" method="post" role="search" novalidate>
+					<label for="searchbox" class="hidden-visually">
+						<?php p($l->t('Search'));?>
+					</label>
+					<input id="searchbox" type="search" name="query"
+						value="" required
+						autocomplete="off" tabindex="5">
+				</form>
+				<div id="settings">
+					<div id="expand" tabindex="6" role="link" class="menutoggle">
+						<?php if ($_['enableAvatars']): ?>
+						<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown'); } else { print_unescaped('" style="display: none'); } ?>">
+							<?php if ($_['userAvatarSet']): ?>
+								<img alt="" width="32" height="32"
+								src="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 32, 'v' => $_['userAvatarVersion']]));?>"
+								srcset="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 64, 'v' => $_['userAvatarVersion']]));?> 2x, <?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 128, 'v' => $_['userAvatarVersion']]));?> 4x"
+								>
+							<?php endif; ?>
+						</div>
+						<?php endif; ?>
+						<span id="expandDisplayName"><?php  p(trim($_['user_displayname']) != '' ? $_['user_displayname'] : $_['user_uid']) ?></span>
+						<div class="icon-caret"></div>
+					</div>
+					<div id="expanddiv">
+					<ul>
+					<?php foreach($_['settingsnavigation'] as $entry):?>
+						<li>
+							<a href="<?php print_unescaped($entry['href']); ?>"
+								<?php if( $entry["active"] ): ?> class="active"<?php endif; ?>>
+								<img alt="" src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>">
+								<?php p($entry['name']) ?>
+							</a>
+						</li>
+					<?php endforeach; ?>
+						<li>
+							<a id="logout" <?php print_unescaped(OC_User::getLogoutAttribute()); ?>>
+								<img alt="" src="<?php print_unescaped(image_path('', 'actions/logout.svg') . '?v=' . $_['versionHash']); ?>">
+								<?php p($l->t('Log out'));?>
+							</a>
+						</li>
+					</ul>
+					</div>
+				</div>
+			</div>
 		</div></header>
 
 		<nav role="navigation"><div id="navigation">

From b590658221c4abb4444856d1eea640d30ffef545 Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Mon, 9 Jan 2017 14:03:13 +0100
Subject: [PATCH 2/8] use less space for the left part of the header

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 core/css/header.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/css/header.scss b/core/css/header.scss
index a4e568244a..5cbcad1f88 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -111,7 +111,8 @@
 	}
 
 	div.header-left {
-		flex: 0 0 50%;
+		flex: 0 0;
+		flex-grow: 1;
 	}
 
 	#header-right {

From 7c824a6177db47e8c21065e9943e163ecf3e8e38 Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Mon, 16 Jan 2017 14:29:41 +0100
Subject: [PATCH 3/8] fix scss

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 core/css/header.scss           | 5 +++--
 core/templates/layout.user.php | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/core/css/header.scss b/core/css/header.scss
index 5cbcad1f88..8ecdfaa1a9 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -106,11 +106,12 @@
 		vertical-align: middle;
 	}
 
-	#header-left #header-right {
+	#header-left,
+	#header-right {
 		display: flex;
 	}
 
-	div.header-left {
+	#header-left {
 		flex: 0 0;
 		flex-grow: 1;
 	}
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 05f71e4b68..6cf4a0b8f2 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -42,7 +42,7 @@
 		<div id="notification"></div>
 	</div>
 	<header role="banner"><div id="header">
-			<div class="header-left">
+			<div id="header-left">
 				<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
 					id="nextcloud" tabindex="1">
 					<div class="logo-icon">

From bfa50a4444a9542e8c7d47def2b330d21dd6323b Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Mon, 16 Jan 2017 20:30:38 +0100
Subject: [PATCH 4/8] more cleanup

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 apps/files_sharing/templates/public.php | 56 ++++++++++++-------------
 core/css/header.scss                    | 16 +------
 2 files changed, 28 insertions(+), 44 deletions(-)

diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 2c321f2a39..8d6558612b 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -35,40 +35,36 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 
 
 <header><div id="header" class="<?php p((isset($_['folder']) ? 'share-folder' : 'share-file')) ?>">
-		<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
-		   title="" id="nextcloud">
-			<div class="logo-icon svg">
-			</div>
-		</a>
-
-		<div class="header-appname-container">
-			<h1 class="header-appname">
-				<?php p($theme->getName()); ?>
-			</h1>
+		<div id="header-left">
+			<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
+				title="" id="nextcloud">
+				<div class="logo-icon svg">
+					<h1 class="header-appname">
+						<?php p($theme->getName()); ?>
+					</h1>
+				</div>
+			</a>
 		</div>
 
 		<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
-		<div class="header-right">
-			<span id="details">
-				<?php
-				if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) {
-					if ($_['server2serversharing']) {
-						?>
-						<span id="save" data-protected="<?php p($_['protected']) ?>"
-							  data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>">
-						<button id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></button>
-						<form class="save-form hidden" action="#">
-							<input type="email" id="remote_address" placeholder="user@yourNextcloud.org"/>
-							<button id="save-button-confirm" class="icon-confirm svg" disabled></button>
-						</form>
-					</span>
-					<?php } ?>
-					<a href="<?php p($_['downloadURL']); ?>" id="download" class="button">
-						<span class="icon icon-download"></span>
-						<span id="download-text"><?php p($l->t('Download'))?></span>
-					</a>
+		<div id="header-right">
+			<?php if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) {
+				if ($_['server2serversharing']) {
+					?>
+					<span id="save" data-protected="<?php p($_['protected']) ?>"
+						  data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>">
+					<button id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></button>
+					<form class="save-form hidden" action="#">
+						<input type="email" id="remote_address" placeholder="user@yourNextcloud.org"/>
+						<button id="save-button-confirm" class="icon-confirm svg" disabled></button>
+					</form>
+				</span>
 				<?php } ?>
-			</span>
+				<a href="<?php p($_['downloadURL']); ?>" id="download" class="button">
+					<span class="icon icon-download"></span>
+					<span id="download-text"><?php p($l->t('Download'))?></span>
+				</a>
+			<?php } ?>
 		</div>
 	</div></header>
 <div id="content-wrapper">
diff --git a/core/css/header.scss b/core/css/header.scss
index 8ecdfaa1a9..a46326e6a4 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -108,7 +108,8 @@
 
 	#header-left,
 	#header-right {
-		display: flex;
+		display: inline-flex;
+		align-items: center;
 	}
 
 	#header-left {
@@ -117,7 +118,6 @@
 	}
 
 	#header-right {
-		display: flex;
 		justify-content: flex-end;
 	}
 }
@@ -305,18 +305,6 @@
 
 /* USER MENU -----------------------------------------------------------------*/
 
-/* info part on the right, used e.g. for info on who shared something */
-.header-right {
-	position: absolute;
-	right: 0;
-	padding: 7px 5px;
-	color: #fff;
-	height: 100%;
-	max-width: 80%;
-	white-space: nowrap;
-	box-sizing: border-box;
-}
-
 #settings {
 	display: inline-block;
 	color: #ddd;

From a1f9425e65dc374328156479473b3078a0c846ab Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Mon, 16 Jan 2017 20:45:10 +0100
Subject: [PATCH 5/8] fix log and app name

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 apps/files_sharing/templates/public.php | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 8d6558612b..dd2ea855b0 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -38,11 +38,10 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 		<div id="header-left">
 			<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
 				title="" id="nextcloud">
-				<div class="logo-icon svg">
-					<h1 class="header-appname">
-						<?php p($theme->getName()); ?>
-					</h1>
-				</div>
+				<div class="logo-icon svg"></div>
+				<h1 class="header-appname">
+					<?php p($theme->getName()); ?>
+				</h1>
 			</a>
 		</div>
 

From 47c63e6a3e4626c1565be83f45bc5dab087f4c5e Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Tue, 17 Jan 2017 08:56:11 +0100
Subject: [PATCH 6/8] fix public sharing buttons

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 apps/files_sharing/css/public.css | 7 +++++--
 core/css/header.scss              | 1 -
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
index 70df204a69..9c8c4a6663 100644
--- a/apps/files_sharing/css/public.css
+++ b/apps/files_sharing/css/public.css
@@ -131,6 +131,9 @@ thead {
 
 #remote_address {
 	width: 200px;
+
+	margin-right: 4px;
+	height: 31px;
 }
 
 #save-button-confirm {
@@ -138,8 +141,8 @@ thead {
 	background-color: transparent;
 	border: none;
 	margin: 2px 4px !important;
-	right: 4px;
-	box-shadow: none;
+	right: 7px;
+	top: -8px;
 	height: 30px;
 }
 
diff --git a/core/css/header.scss b/core/css/header.scss
index a46326e6a4..a8f72c7129 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -45,7 +45,6 @@
 	right: 0;
 	z-index: 2000;
 	height: 45px;
-	line-height: 2.5em;
 	background-color: #0082c9;
 	box-sizing: border-box;
 	justify-content: space-between;

From bfc4590c2819b5ce4d652f993c026d4ea32caf8f Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Tue, 17 Jan 2017 09:06:15 +0100
Subject: [PATCH 7/8] fix searchbox position

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 core/css/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/css/styles.scss b/core/css/styles.scss
index e7aeb06314..9b0dd21e23 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -168,7 +168,7 @@ body {
 	color: #fff;
 	border: 0;
 	border-radius: 3px;
-	margin-top: 9px;
+	margin-top: 3px;
 	width: 0;
 	cursor: pointer;
 	-webkit-transition: all 100ms;

From ac6d50165722a7394e14b909614dbe8ac87d8fdf Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Tue, 17 Jan 2017 09:10:09 +0100
Subject: [PATCH 8/8] fix appname position

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 core/css/header.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/core/css/header.scss b/core/css/header.scss
index a8f72c7129..0134ca951d 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -90,8 +90,7 @@
 	}
 	.header-appname-container {
 		display: inline-block;
-		height: 27px;
-		padding-top: 18px;
+		padding-top: 22px;
 		padding-right: 10px;
 	}
 	/* show caret indicator next to logo to make clear it is tappable */
@@ -161,7 +160,7 @@
 	font-size: 16px;
 	font-weight: 300;
 	margin: 0;
-	margin-top: -24px;
+	margin-top: -27px;
 	padding: 7px 0 7px 5px;
 	vertical-align: middle;
 }