Codiki/codiki
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Add design update to the aside from header component.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2019-02-10 15:13:15 +01:00
parent 5e332dcca3
commit 284580c2ce
3 changed files with 49 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/ts-v7/src/app/header/header.component.html
View File

@@ -48,7 +48,7 @@
</a>
<div *ngFor="let category of listCategories">
<a [id]="'category-' + category.id" class="collapsible" *ngIf="category.listSubCategories.length" (click)="openCategoriesLinks(category)">
{{category.name}} <i class="fa fa-chevron-down pull-right"></i>
{{category.name}} <i class="fa {{accordionOpenned[category.id] ? 'fa-chevron-down' : 'fa-chevron-right'}} float-right"></i>
</a>
<div class="categoriesLinks" >
<a *ngFor="let subCategory of category.listSubCategories"

86
src/main/ts-v7/src/app/header/header.component.scss
View File

@@ -5,8 +5,8 @@
#logo {
width: 30px;
height: 30px;
margin-top: -7px;
height: 30px;
margin-top: -7px;
vertical-align: middle;
margin-right: 10px;
}
@@ -17,25 +17,25 @@
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1000; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #3f51b5;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px; /* Place content 60px from the top */
transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1050; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #3f51b5;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px; /* Place content 60px from the top */
transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 32px 8px 32px;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
padding: 8px 32px 8px 32px;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
@@ -45,47 +45,51 @@
}
.sidenav h3 {
padding: 8px 8px 8px 32px;
color: white;
padding-bottom: 25px;
border-bottom: 1px solid #5c6bc0;
padding: 8px 8px 8px 32px;
color: white;
padding-bottom: 25px;
border-bottom: 1px solid #5c6bc0;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 25px;
right: 25px;
margin-left: 50px;
padding: 8px;
position: absolute;
top: 25px;
right: 25px;
margin-left: 50px;
padding: 8px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 999; /* Specify a stack order in case you're using a different order for other elements */
transition: 0.5s;
}
.categoriesLinks {
background-color: #303f9f;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #303f9f;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.dropdown-item.danger-color-dark:hover {
background-color: #ff4444 !important;
}
.collapsible i.fa {
padding-top: 4px;
}

3
src/main/ts-v7/src/app/header/header.component.ts
View File

@@ -16,6 +16,7 @@ export class HeaderComponent implements OnInit {
isAdmin: boolean;
listCategories: Array<Category> = [];
title: string;
accordionOpenned: Array<Boolean> = [];
constructor(
private authService: AuthService,
@@ -73,8 +74,10 @@ export class HeaderComponent implements OnInit {
const divContent = divCategoriesLinks.nextElementSibling as HTMLElement;
if (divContent.style.maxHeight) {
divContent.style.maxHeight = null;
this.accordionOpenned[category.id] = false;
} else {
divContent.style.maxHeight = divContent.scrollHeight + 'px';
this.accordionOpenned[category.id] = true;
}
}
}