From 879ab28cbba12f5f73dca6e1759fc0478cea8b52 Mon Sep 17 00:00:00 2001
From: Diamantis Tziotzios <dtziotzios@cite.gr>
Date: Fri, 10 May 2019 14:12:45 +0300
Subject: [PATCH] navabar and sidenav changes

---
 dmp-frontend/src/app/app.component.html          |  7 ++++---
 dmp-frontend/src/app/app.component.scss          |  5 +++++
 .../app/ui/dashboard/dashboard.component.scss    |  2 +-
 .../src/app/ui/navbar/navbar.component.html      |  2 +-
 .../src/app/ui/navbar/navbar.component.scss      | 14 ++++++++++----
 .../sidebar-footer/sidebar-footer.component.css  |  9 +++++----
 .../src/app/ui/sidebar/sidebar.component.css     |  5 +++++
 .../src/app/ui/sidebar/sidebar.component.html    |  2 +-
 dmp-frontend/src/assets/css/demo.css             | 16 ++++++++++------
 dmp-frontend/src/assets/i18n/en.json             |  2 +-
 dmp-frontend/src/assets/scss/core/_navbar.scss   |  1 +
 .../src/assets/scss/core/_responsive.scss        |  5 ++++-
 .../scss/core/_sidebar-and-main-panel.scss       |  2 +-
 .../assets/scss/core/mixins/_navbar-colors.scss  |  2 +-
 14 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index d4e81a416..806e5cc21 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -1,13 +1,14 @@
 <div class="wrapper">
-	<div class="sidebar" data-color="danger" data-background-color="white"
-		data-image="./assets/images/logan-troxell-9187-unsplash.jpg">
+	<div class="sidebar sidebar-shadow" data-color="danger" data-background-color="white" data-image="./assets/images/logan-troxell-9187-unsplash.jpg">
 		<app-sidebar></app-sidebar>
 		<div class="sidebar-background" style="background-image: url(./assets/images/logan-troxell-9187-unsplash.jpg)">
 		</div>
 	</div>
 	<div class="main-panel">
 		<app-navbar></app-navbar>
-		<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
+		<div>
+			<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
+		</div>
 	</div>
 </div>
 <app-notification></app-notification>
diff --git a/dmp-frontend/src/app/app.component.scss b/dmp-frontend/src/app/app.component.scss
index 685fdd3b2..799c9da77 100644
--- a/dmp-frontend/src/app/app.component.scss
+++ b/dmp-frontend/src/app/app.component.scss
@@ -10,3 +10,8 @@
 	margin-top: 64px;
 	padding-top: 10px;
 }
+
+.sidebar-shadow {
+	box-shadow: 0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15);
+	z-index: 10000;
+}
diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
index f7949e25c..93078306a 100644
--- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
+++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
@@ -2,7 +2,7 @@
 	background: url('/assets/images/dashboard-bg.png') no-repeat;
 	background-size: cover;
 	margin-top: 70px;
-	min-height: 15em;
+	min-height: 20em;
 	position: relative;
 }
 
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html
index 90cb9f53d..0e7fbe7a1 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.html
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-transparent  navbar-absolute fixed-top">
+<nav class="navbar navbar-expand-lg fixed-navbar">
 	<div class="container-fluid">
 		<div class="navbar-wrapper">
 			<a routerLink="/home">
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.scss b/dmp-frontend/src/app/ui/navbar/navbar.component.scss
index 7a645a378..41f22d857 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.scss
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.scss
@@ -1,9 +1,10 @@
 $mat-card-header-size: 40px !default;
+
 .my-mat-card-avatar {
-  height: $mat-card-header-size;
-  width: $mat-card-header-size;
-  border-radius: 50%;
-  flex-shrink: 0;
+	height: $mat-card-header-size;
+	width: $mat-card-header-size;
+	border-radius: 50%;
+	flex-shrink: 0;
 }
 
 .progress-bar {
@@ -13,3 +14,8 @@ $mat-card-header-size: 40px !default;
 	width: 100%;
 	z-index: 1;
 }
+
+.fixed-navbar {
+	position: fixed;
+	z-index: 1000;
+}
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
index 77a567eae..100236ecf 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
@@ -1,8 +1,8 @@
 .sidebar-footer {
-  padding: 0.3em;
+  padding: white;
   color: rgb(117, 117, 117);
-  background-color: #ffffff;
-  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
+  /* background-color: #ffffff; */
+  /* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
 }
 
 .sidebar-footer .option {
@@ -15,6 +15,7 @@
 
 .sidebar-footer .vl {
   border-right: 1px solid #d4d4d4;
+  color: white;
 }
 
 .option .style-icon {
@@ -22,5 +23,5 @@
 	margin: 0px;
 	width: 20px;
 	padding-top: 2px;
-	color: #2e75b6;
+	color: white;
 }
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
index 0d11d4073..477b2ca5d 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
@@ -25,3 +25,8 @@
 .sidebar-footer {
 	margin-top: auto;
 }
+
+.sidebar-nav {
+	background: white;
+    height: 70px;
+}
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
index 1da205678..ad25f4d63 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
@@ -1,4 +1,4 @@
-<div class="logo">
+<div class="logo sidebar-nav">
 	<a [routerLink]=" ['/home']">
 		<div class="logo-img">
 			<img src="/assets/images/OpenDMP.png" />
diff --git a/dmp-frontend/src/assets/css/demo.css b/dmp-frontend/src/assets/css/demo.css
index 1a56520a9..db306d1b0 100644
--- a/dmp-frontend/src/assets/css/demo.css
+++ b/dmp-frontend/src/assets/css/demo.css
@@ -59,7 +59,8 @@ h6 {
 	display: block;
 	height: auto;
 	white-space: nowrap;
-	color: rgb(89, 89, 89);
+	/* color: rgb(89, 89, 89); */
+	color: white;
 }
 
 .sidebar .nav i {
@@ -73,13 +74,16 @@ h6 {
 }
 
 .sidebar[data-color="danger"] li.active>a {
-	background-color: #ffffff;
-	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
-	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
+	background-color: #4687e6;
+	/* -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
+	/* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
+	box-shadow: none;
+	-webkit-box-shadow: none;
 }
 
 .sidebar .nav li.active>a i {
-	color: rgb(89, 89, 89);
+	/* color: rgb(89, 89, 89); */
+	color: white;
 }
 
 .sidebar .nav li a, .sidebar .nav li .dropdown-menu a {
@@ -314,6 +318,6 @@ table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .
 	height: 100%;
 	content: "";
 	display: block;
-	background: rgba(250, 250, 250, 0.95);
+	background: rgba(0, 0, 0, 0.55);
 	opacity: .93;
 }
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index a0b4ee1f6..57dc60698 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -58,7 +58,7 @@
 	},
 	"SIDE-BAR": {
 		"GENERAL": "GENERAL",
-		"DASHBOARD": "DASHBOARD",
+		"DASHBOARD": "HOME",
 		"DMP": "DATA MANAGEMENT PLANS",
 		"MY-DMPS": "MY DMPs",
 		"MY-DATASET-DESC": "MY DATASET DESCRIPTIONS",
diff --git a/dmp-frontend/src/assets/scss/core/_navbar.scss b/dmp-frontend/src/assets/scss/core/_navbar.scss
index 4a27e2115..810d60605 100644
--- a/dmp-frontend/src/assets/scss/core/_navbar.scss
+++ b/dmp-frontend/src/assets/scss/core/_navbar.scss
@@ -3,6 +3,7 @@
     border-radius: $border-radius-base;
     padding: 0.625rem 0;
     margin-bottom: 20px;
+    width: 100%;
     @include navbar-colors($white-color, $navbar-color);
 
     &.fixed-top{
diff --git a/dmp-frontend/src/assets/scss/core/_responsive.scss b/dmp-frontend/src/assets/scss/core/_responsive.scss
index 05bb6e9d3..e156c6d7a 100644
--- a/dmp-frontend/src/assets/scss/core/_responsive.scss
+++ b/dmp-frontend/src/assets/scss/core/_responsive.scss
@@ -412,7 +412,7 @@
         box-shadow: none;
 
         .sidebar-wrapper{
-            padding-bottom: 60px;
+            // padding-bottom: 60px;
         }
 
         .nav-mobile-menu{
@@ -821,6 +821,9 @@
         display: none;
       }
     }
+    .navbar {
+        width: calc(100% - 260px);
+    }
   }
 
   .nav-mobile-menu,
diff --git a/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
index 8a2f082c0..30610681b 100644
--- a/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
+++ b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
@@ -48,7 +48,7 @@
     overflow: auto;
     width: 260px;
     z-index: 4;
-    padding-bottom: 10px;
+    // padding-bottom: 10px;
     display: flex;
     flex-direction: column;
 
diff --git a/dmp-frontend/src/assets/scss/core/mixins/_navbar-colors.scss b/dmp-frontend/src/assets/scss/core/mixins/_navbar-colors.scss
index 3756faf70..49497b61e 100644
--- a/dmp-frontend/src/assets/scss/core/mixins/_navbar-colors.scss
+++ b/dmp-frontend/src/assets/scss/core/mixins/_navbar-colors.scss
@@ -1,7 +1,7 @@
 @mixin navbar-colors($color, $link-color) {
     color: $link-color;
     background-color: $color !important;
-    @include shadow-navbar-color($color);
+    //@include shadow-navbar-color($color);
 
     .dropdown-item:hover,
     .dropdown-item:focus{