Optimize header

* Optimize header, introduce header-center, place notifications in it * Please ignore colors, will be removed in final version Signed-off-by: Michael Letzgus <[email protected]>
nextcloud · Mar 27, 2017 · c53ed5b · c53ed5b
1 parent 56243e0
commit c53ed5b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/core/css/header.scss b/core/css/header.scss
@@ -124,17 +124,28 @@
 	}
 
 	#header-left,
+	#header-center,
 	#header-right {
 		display: inline-flex;
 		align-items: center;
+		background:red;
 	}
 
 	#header-left {
-		flex: 0 0;
-		flex-grow: 1;
+		flex: 0 0 auto;
+		justify-content: flex-start;
+		background:green;
+	}
+
+	#header-center {
+		flex: 1 1 auto;
+		justify-content: center;
+		align-items: flex-start;
+		background:yellow;
 	}
 
 	#header-right {
+		flex: 0 0 auto;
 		justify-content: flex-end;
 	}
 }

diff --git a/core/css/styles.scss b/core/css/styles.scss
@@ -810,15 +810,14 @@ td.avatar {
 }
 
 #notification-container {
-	position: absolute;
-	top: 0;
 	width: 100%;
+	height:45px;
 	text-align: center;
 }
 
 #notification {
 	margin: 0 auto;
-	max-width: 60%;
+	max-width: 100%;
 	z-index: 8000;
 	background-color: $color-main-background;
 	border: 0;
@@ -836,6 +835,7 @@ td.avatar {
 	}
 	overflow-x: hidden;
 	overflow-y: auto;
+	min-height: 45px;
 	max-height: 100px;
 	.row {
 		position: relative;

diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
@@ -38,9 +38,6 @@
 	</head>
 	<body id="<?php p($_['bodyid']);?>">
 	<?php include('layout.noscript.warning.php'); ?>
-	<div id="notification-container">
-		<div id="notification"></div>
-	</div>
 	<header role="banner"><div id="header">
 			<div id="header-left">
 				<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
@@ -110,6 +107,12 @@
 
 			</div>
 
+			<div id="header-center">
+				<div id="notification-container">
+					<div id="notification"></div>
+				</div>
+			</div>
+
 			<div id="header-right">
 				<form class="searchbox" action="#" method="post" role="search" novalidate>
 					<label for="searchbox" class="hidden-visually">