Merge pull request #9002 from nextcloud/whitespace

More whitespace: Increase header height from 45px to 50

4 files changed, 38 insertions, 34 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index b1141476a0e..8e520957889 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -49,7 +49,7 @@
 	left: 0;
 	right: 0;
 	z-index: 2000;
-	height: 45px;
+	height: 50px;
 	background-color: $color-primary;
 	box-sizing: border-box;
 	justify-content: space-between;
@@ -57,10 +57,8 @@
 
 /* LOGO and APP NAME -------------------------------------------------------- */
 #nextcloud {
-	padding: 5px;
-	padding-bottom: 0;
-	height: 45px;
-	/* header height */
+	padding: 8px 12px;
+	height: 100%;
 	box-sizing: border-box;
 	opacity: 1;
 	&:focus {
@@ -82,8 +80,8 @@
 		position: absolute;
 		max-width: 350px;
 		max-height: 280px;
-		right: 0;
-		top: 44px;
+		right: 5px;
+		top: 50px;
 		margin: 0;
 
 		&:not(.popovermenu) {
@@ -100,7 +98,7 @@
 			width: 0;
 			position: absolute;
 			pointer-events: none;
-			right: 12px;
+			right: 10px;
 		}
 	}
 	.logo {
@@ -161,13 +159,14 @@
 	.header-right {
 		> div,
 		> form {
+			height: 100%;
 			position: relative;
 			> .menutoggle {
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				width: 44px;
-				height: 44px;
+				width: 50px;
+				height: 100%;
 				cursor: pointer;
 				opacity: 0.6;
 				padding: 0;
@@ -225,14 +224,14 @@
 /* NAVIGATION --------------------------------------------------------------- */
 nav[role='navigation'] {
 	display: inline-block;
-	width: 44px;
-	height: 44px;
-	margin-left: -44px;
+	width: 50px;
+	height: 50px;
+	margin-left: -50px;
 }
 
 .header-left #navigation {
 	position: relative;
-	left: 22px; /* half the togglemenu */
+	left: 25px; /* half the togglemenu */
 	transform: translateX(-50%);
 	width: 160px;
 }
@@ -340,14 +339,15 @@ nav[role='navigation'] {
 
 #settings {
 	display: inline-block;
+	height: 100%;
 	color: rgba($color-primary-text, 0.7);
 	cursor: pointer;
-	margin-right: 13px;
 	flex: 0 0 auto;
 
 	/* User menu on the right */
 	#expand {
 		opacity: 1; /* override icon opacity */
+		padding-right: 12px;
 
 		img {
 			opacity: .7;
@@ -407,6 +407,9 @@ nav[role='navigation'] {
 }
 
 #expanddiv {
+	&.menu {
+		right: 17px;
+	}
 	a {
 		display: inline-flex;
 		align-items: center;
@@ -439,23 +442,24 @@ nav[role='navigation'] {
 #appmenu {
 	display: inline-block;
 	width: auto;
+	min-width: 50px;
+	height: 100%;
 	clear: both;
-	min-width: 88px;
 
 	li {
 		float: left;
 		display: inline-block;
 		position: relative;
 		vertical-align: top !important;
-		height: 45px;
+		height: 100%;
 		cursor: pointer;
 
 		a {
 			position: relative;
 			display: inline-block;
 			margin: 0;
-			padding: 12px;
-			height: 21px;
+			padding: 15px 15px;
+			height: 20px;
 			text-align: center;
 			vertical-align: top !important;
 			opacity: .6;
@@ -496,7 +500,6 @@ nav[role='navigation'] {
 		border-radius: $border-radius;
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
-		margin-top: 0;
 		color: rgba($color-main-text, .7);
 		width: auto;
 		left: 50%;
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index ebc7e094cdb..cfc8c002e17 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -134,10 +134,8 @@ table.multiselect thead {
 
 @media only screen and (max-width: 480px) {
 	#header .header-right .menu {
-		max-width: calc(100vw - 26px);
+		max-width: calc(100vw - 10px);
 		position: fixed;
-		right: 13px;
-		top: 45px;
 		&::after {
 			display: none !important;
 		}
@@ -158,9 +156,14 @@ table.multiselect thead {
 			width: 0;
 			position: absolute;
 			pointer-events: none;
-			right: 13px;
+			right: 15px;
 			z-index: 2001;
 			display: none;
 		}
+
+		/* settings need a different offset, since they have a right padding */
+		&#settings::after {
+			right: 27px;
+		}
 	}
 }
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 0b15718eefd..0bbd89f075b 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -184,17 +184,18 @@ body {
 		padding: 3px;
 		padding-left: 25px;
 		padding-right: 20px;
-		background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
+		background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center;
 		color: $color-primary-text;
 		border: 0;
 		border-radius: $border-radius;
-		margin-top: 3px;
+		margin-top: 9px;
 		width: 0;
 		cursor: pointer;
 		-webkit-transition: all 100ms;
 		transition: all 100ms;
 		opacity: .6;
 		&:focus, &:active, &:valid {
+			background-position-x: 6px;
 			color: $color-primary-text;
 			width: 155px;
 			cursor: text;
@@ -207,10 +208,11 @@ body {
 		& ~ .icon-close-white {
 			display: inline;
 			position: absolute;
-			width: 15px;
-			height: 32px;
-			right: 3px;
+			width: 30px;
+			height: 100%;
+			right: 0;
 			top: 0;
+			margin: 0;
 			&, &:focus, &:active, &:hover {
 				border: none;
 				background-color: transparent;
@@ -287,7 +289,7 @@ body {
 	width: 100%;
 	overflow-x: hidden;
 	/* prevent horizontal scrollbar */
-	padding-top: 45px;
+	padding-top: 50px;
 	box-sizing: border-box;
 }
 
diff --git a/core/js/js.js b/core/js/js.js
index 26dbbdb6e63..3d5f489895d 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -1553,10 +1553,6 @@ function initCore() {
 		if(appList.length-1-appCount >= 1) {
 			appCount--;
 		}
-		// show at least one icon
-		if(appCount < 1) {
-			appCount = 1;
-		}
 
 		$('#more-apps a').removeClass('active');
 		var lastShownApp;