MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

navabar and sidenav changes

This commit is contained in:
Diamantis Tziotzios 2019-05-10 14:12:45 +03:00
parent 4304b3734b
commit 879ab28cbb
14 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dmp-frontend/src/app/app.component.html
View File

@ -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>

5
dmp-frontend/src/app/app.component.scss
View File

@ -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;
}

2
dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
View File

@ -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;
}

2
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -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">

14
dmp-frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -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;
}

9
dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
View File

@ -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;
}

5
dmp-frontend/src/app/ui/sidebar/sidebar.component.css
View File

@ -25,3 +25,8 @@
.sidebar-footer {
margin-top: auto;
}
.sidebar-nav {
background: white;
height: 70px;
}

2
dmp-frontend/src/app/ui/sidebar/sidebar.component.html
View File

@ -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" />

16
dmp-frontend/src/assets/css/demo.css
View File

@ -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;
}

2
dmp-frontend/src/assets/i18n/en.json
View File

@ -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",

1
dmp-frontend/src/assets/scss/core/_navbar.scss
View File

@ -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{

5
dmp-frontend/src/assets/scss/core/_responsive.scss
View File

@ -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,

2
dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
View File

@ -48,7 +48,7 @@
overflow: auto;
width: 260px;
z-index: 4;
padding-bottom: 10px;
// padding-bottom: 10px;
display: flex;
flex-direction: column;

2
dmp-frontend/src/assets/scss/core/mixins/_navbar-colors.scss
View File

@ -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{