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="wrapper">
<div class="sidebar" data-color="danger" data-background-color="white" <div class="sidebar sidebar-shadow" data-color="danger" data-background-color="white" data-image="./assets/images/logan-troxell-9187-unsplash.jpg">
data-image="./assets/images/logan-troxell-9187-unsplash.jpg">
<app-sidebar></app-sidebar> <app-sidebar></app-sidebar>
<div class="sidebar-background" style="background-image: url(./assets/images/logan-troxell-9187-unsplash.jpg)"> <div class="sidebar-background" style="background-image: url(./assets/images/logan-troxell-9187-unsplash.jpg)">
</div> </div>
</div> </div>
<div class="main-panel"> <div class="main-panel">
<app-navbar></app-navbar> <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>
</div> </div>
<app-notification></app-notification> <app-notification></app-notification>

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

@ -10,3 +10,8 @@
margin-top: 64px; margin-top: 64px;
padding-top: 10px; 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: url('/assets/images/dashboard-bg.png') no-repeat;
background-size: cover; background-size: cover;
margin-top: 70px; margin-top: 70px;
min-height: 15em; min-height: 20em;
position: relative; 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="container-fluid">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<a routerLink="/home"> <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; $mat-card-header-size: 40px !default;
.my-mat-card-avatar { .my-mat-card-avatar {
height: $mat-card-header-size; height: $mat-card-header-size;
width: $mat-card-header-size; width: $mat-card-header-size;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
.progress-bar { .progress-bar {
@ -13,3 +14,8 @@ $mat-card-header-size: 40px !default;
width: 100%; width: 100%;
z-index: 1; 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 { .sidebar-footer {
padding: 0.3em; padding: white;
color: rgb(117, 117, 117); color: rgb(117, 117, 117);
background-color: #ffffff; /* 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); /* 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 { .sidebar-footer .option {
@ -15,6 +15,7 @@
.sidebar-footer .vl { .sidebar-footer .vl {
border-right: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4;
color: white;
} }
.option .style-icon { .option .style-icon {
@ -22,5 +23,5 @@
margin: 0px; margin: 0px;
width: 20px; width: 20px;
padding-top: 2px; 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 { .sidebar-footer {
margin-top: auto; 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']"> <a [routerLink]=" ['/home']">
<div class="logo-img"> <div class="logo-img">
<img src="/assets/images/OpenDMP.png" /> <img src="/assets/images/OpenDMP.png" />

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

@ -59,7 +59,8 @@ h6 {
display: block; display: block;
height: auto; height: auto;
white-space: nowrap; white-space: nowrap;
color: rgb(89, 89, 89); /* color: rgb(89, 89, 89); */
color: white;
} }
.sidebar .nav i { .sidebar .nav i {
@ -73,13 +74,16 @@ h6 {
} }
.sidebar[data-color="danger"] li.active>a { .sidebar[data-color="danger"] li.active>a {
background-color: #ffffff; 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); /* -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: 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 { .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 { .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%; height: 100%;
content: ""; content: "";
display: block; display: block;
background: rgba(250, 250, 250, 0.95); background: rgba(0, 0, 0, 0.55);
opacity: .93; opacity: .93;
} }

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

@ -58,7 +58,7 @@
}, },
"SIDE-BAR": { "SIDE-BAR": {
"GENERAL": "GENERAL", "GENERAL": "GENERAL",
"DASHBOARD": "DASHBOARD", "DASHBOARD": "HOME",
"DMP": "DATA MANAGEMENT PLANS", "DMP": "DATA MANAGEMENT PLANS",
"MY-DMPS": "MY DMPs", "MY-DMPS": "MY DMPs",
"MY-DATASET-DESC": "MY DATASET DESCRIPTIONS", "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; border-radius: $border-radius-base;
padding: 0.625rem 0; padding: 0.625rem 0;
margin-bottom: 20px; margin-bottom: 20px;
width: 100%;
@include navbar-colors($white-color, $navbar-color); @include navbar-colors($white-color, $navbar-color);
&.fixed-top{ &.fixed-top{

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

@ -412,7 +412,7 @@
box-shadow: none; box-shadow: none;
.sidebar-wrapper{ .sidebar-wrapper{
padding-bottom: 60px; // padding-bottom: 60px;
} }
.nav-mobile-menu{ .nav-mobile-menu{
@ -821,6 +821,9 @@
display: none; display: none;
} }
} }
.navbar {
width: calc(100% - 260px);
}
} }
.nav-mobile-menu, .nav-mobile-menu,

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

@ -48,7 +48,7 @@
overflow: auto; overflow: auto;
width: 260px; width: 260px;
z-index: 4; z-index: 4;
padding-bottom: 10px; // padding-bottom: 10px;
display: flex; display: flex;
flex-direction: column; 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) { @mixin navbar-colors($color, $link-color) {
color: $link-color; color: $link-color;
background-color: $color !important; background-color: $color !important;
@include shadow-navbar-color($color); //@include shadow-navbar-color($color);
.dropdown-item:hover, .dropdown-item:hover,
.dropdown-item:focus{ .dropdown-item:focus{