improve header

This commit is contained in:
Peter Maquiran
2021-03-02 14:46:38 +01:00
parent 61ffaf6db6
commit a0f06af6bf
1530 changed files with 148 additions and 510618 deletions
+15 -15
View File
@@ -3,18 +3,18 @@
<div class="mobile d-flex div-top-header justify-space-between">
<div (click)="openSearch()" class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
<ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo height-fit-content">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
<ion-icon *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
<ion-icon class="font-45" *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
<ion-icon class="font-45" *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
</div>
</div>
<div class="desktop div-top-header">
<div class="desktop mx-20">
<div class="d-flex justify-space-between align-center">
<div tab="events" class="div-logo height-fit-content">
<img src='assets/images/logo-no-bg.png' alt='logo'>
@@ -22,42 +22,42 @@
<div class="d-flex flex-1 pr-20 pl-50">
<div class=" mr-20 d-flex align-center" (click)="changeRoute('/home/events')">
<div class="tab mr-20 d-flex align-center" (click)="changeRoute('/home/events')" [class.active]="locationPathname() == '/home/events'">
<ion-icon class="font-40" src='assets/images/icons-nav-home-active.svg'></ion-icon>
<span>Ínicio</span>
</div>
<div class=" mr-20 d-flex align-center" (click)="changeRoute('/home/agenda')" >
<div class="tab mr-20 d-flex align-center" (click)="changeRoute('/home/agenda')" [class.active]="locationPathname() == '/home/agenda'">
<ion-icon class="font-40" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
<span>Agenda</span>
</div>
<div class="mr-20 d-flex align-center" (click)="changeRoute('/home/gabinete-digital')">
<div class="tab mr-20 d-flex align-center" (click)="changeRoute('/home/gabinete-digital')" [class.active]="locationPathname() == '/home/gabinete-digital'">
<ion-icon class="font-40" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
<span>Gabinete</span>
</div>
<div class=" mr-20 d-flex align-center" (click)="changeRoute('/home/publications')">
<div class="tab mr-20 d-flex align-center" (click)="changeRoute('/home/publications')" [class.active]="locationPathname() == '/home/publications'">
<ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
<span>Ações</span>
</div>
<div class=" mr-20 d-flex align-center" (click)="changeRoute('/home/chat')">
<ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
<div class="tab mr-20 d-flex align-center" (click)="changeRoute('/home/chat')" [class.active]="locationPathname() == '/home/chat'">
<ion-icon class="font-40" src='assets/images/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
<span>Chat</span>
</div>
</div>
<div class="d-flex">
<div (click)="openSearch()" class="div-search mr-10">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
<div (click)="openSearch()" class="mr-10">
<ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-profile">
<ion-icon *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
<ion-icon *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
<div class="div-profile justify-end d-flex">
<ion-icon class="font-45" *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
<ion-icon class="font-45" *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
</div>
</div>
</div>
+21 -22
View File
@@ -5,34 +5,25 @@
background-color: #0782c9;
padding-top: em(15px);
border: 0!important;
.div-search{
ion-icon{
font-size: 45px;
}
}
.div-logo{
background: transparent;
width: em(140px);
justify-content: center;
display: flex;
}
.div-logo img{
width: 100%;
margin: 0px auto;
}
.div-profile{
font-size: 45px;
justify-content: flex-end;
display: flex;
}
}
.div-logo{
background: transparent;
width: em(140px);
justify-content: center;
display: flex;
}
.div-logo img{
width: 100%;
margin: 0px auto;
}
.desktop{
display: none;
}
@media only screen and (min-width: 1024px) {
@media only screen and (min-width: 1366px) {
.mobile{
display: none !important;
@@ -41,4 +32,12 @@
display: block;
}
}
.tab{
height: 65px;
}
.active{
border-top: 7px solid white;
}
+5 -1
View File
@@ -24,6 +24,10 @@ export class HeaderPage implements OnInit {
ngOnInit() {
}
locationPathname(): string {
return window.location.pathname
}
async openSearch() {
const modal = await this.modalController.create({
component: SearchPage,
@@ -37,4 +41,4 @@ export class HeaderPage implements OnInit {
changeRoute(path){
this.router.navigateByUrl(path)
}
}
}