Commit 846b9e17 authored by Xoeseko Yao Nyomi's avatar Xoeseko Yao Nyomi
Browse files

Merge branch 'horizontal-header-design' into 'master'

full design completed and small fixes to certain pages to fit the design

See merge request !39
parents 2b11ebfd 3241a3a9
Pipeline #17228 passed with stages
in 10 minutes and 14 seconds
This diff is collapsed.
......@@ -9,14 +9,15 @@
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"heroku-postbuild": "ng build --prod"
"heroku-postbuild": "ng build --prod",
"compodoc": "npx compodoc -p tsconfig.json"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "~9.0.3",
"@angular/cli": "^9.1.0",
"@angular/common": "~9.0.3",
"@angular/common": "^9.0.7",
"@angular/compiler": "~9.0.3",
"@angular/compiler-cli": "^9.0.7",
"@angular/core": "~9.0.3",
......@@ -31,7 +32,7 @@
"@types/googlemaps": "^3.39.3",
"express": "^4.17.1",
"firebase": "^7.14.1",
"jquery": "^3.4.1",
"jquery": "^3.5.1",
"mdb-cli": "^1.1.26",
"path": "^0.12.7",
"rxjs": "~6.5.4",
......@@ -40,7 +41,7 @@
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.4",
"@angular-devkit/build-angular": "^0.1000.4",
"@angular/cli": "^9.1.0",
"@angular/compiler-cli": "^9.0.7",
"@angular/language-service": "~9.0.3",
......
.app-root {
transition: 0.5s;
margin-top: 5.6vw;
z-index: -1;
}
#app-header{
transition: opacity 0.5s;
z-index: 0;
}
.container{
display: flex;
}
<div class="container">
<app-header id="app-header"></app-header>
<app-horizontal-header id="app-header"></app-horizontal-header>
<div class="app-root" id="app-root">
<!-- <button [hidden]="!isMobile" class="btn" (click)="changeMenu()"><i class="fa fa-bars"></i></button> -->
<router-outlet></router-outlet>
......
......@@ -60,6 +60,7 @@ import { ClickOutsideDirective } from './directives/click-outside.directive';
import { EuropeanDatePipe } from './community/european-date.pipe';
import { CantonboxComponent } from './sub-components/cantonbox/cantonbox.component';
import { EmergencyBoxComponent } from './sub-components/emergency-box/emergency-box.component';
import { HorizontalHeaderComponent } from './horizontal-header/horizontal-header.component';
@NgModule({
......@@ -81,6 +82,7 @@ import { EmergencyBoxComponent } from './sub-components/emergency-box/emergency-
EuropeanDatePipe,
CantonboxComponent,
EmergencyBoxComponent,
HorizontalHeaderComponent,
],
imports: [
BrowserModule,
......@@ -102,8 +104,7 @@ import { EmergencyBoxComponent } from './sub-components/emergency-box/emergency-
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule, // firestore
AngularFireAuthModule, // auth
AngularFireStorageModule // storage
AngularFireStorageModule, // storage
],
providers: [
{ provide: LOCALE_ID, useClass: DynamicLocaleId },
......
......@@ -47,4 +47,4 @@
</div>
</ul>
</div>
</div>
</div>
......@@ -4,7 +4,7 @@
background: #8C93D8;
padding: 0 6%;
overflow-x: hidden;
overflow-y: auto;
overflow-y: hidden;
}
.overflow{
......@@ -13,6 +13,7 @@
top: 0;
width: 50%;
pointer-events: none;
z-index: 1;
}
.overflow img{
......@@ -24,12 +25,10 @@
}
.flexbox{
position: relative;
display: flex;
}
#title{
position: relative;
width: 55%;
float: left;
display: flex;
......@@ -38,7 +37,6 @@
}
#title > h1{
position: relative;
font-family: 'Nova Round', cursive;
font-style: normal;
......@@ -55,8 +53,6 @@
}
#title > h2{
position: relative;
font-family: 'Nova Round', cursive;
font-style: normal;
font-weight: normal;
......@@ -76,7 +72,6 @@
}
#title > p{
position: relative;
font-family: 'Montserrat', sans-serif;
font-style: normal;
......@@ -90,7 +85,6 @@
}
.emergency{
position: relative;
padding: 2%;
margin: 3% 0;
......@@ -123,7 +117,6 @@
}
#inputbox{
position: relative;
width: 85%;
justify-self: center;
......@@ -136,7 +129,6 @@
}
#inputbox > h2{
position: relative;
width: 90%;
padding-top: 1%;
......@@ -151,7 +143,6 @@
}
#inputbox > .line2{
position: relative;
height: 0px;
width: 95%;
justify-self: center;
......@@ -190,19 +181,16 @@
}
.langboxes{
position: relative;
display: flex;
justify-content: space-evenly;
}
.langboxes > .selbox{
position: relative;
width: 6vw;
height: 4vw;
}
.selbox > p{
position: relative;
margin-bottom: 0;
font-family: 'Montserrat', sans-serif;
font-style: normal;
......@@ -219,20 +207,17 @@
}
.age{
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-evenly;
}
.age > .selbox{
position: relative;
width: 30%;
height: 4vh;
}
.submitbox{
position: relative;
display: flex;
justify-content: space-evenly;
}
......@@ -245,7 +230,6 @@
color: #2E3192;}
.submitbox > .selbox{
position: relative;
width: 13vw;
height: 4vh;
}
......
.horizontal-nav {
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
#logo img{
width: 4vw;
height: auto;
margin: .3vw 0;
}
nav{
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
background-color: #8C93D8;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.nav__item{
display: inline-block;
}
.nav__item a{
text-decoration: none;
font-size: 1.5vw;
}
.nav__link{
color: black;
transition: 0.3s;
}
.nav__link--selected {
color: #FFFFFF;
transition: 0.3s;
}
.nav__link:hover{
color: #FFFFFF;
transition: 0.3s;
}
.exit {
padding: 1vw 1.5vw;
text-decoration: none;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
border-radius: 65px;
display: block;
color: black;
background-color: #FC5C14;
font-weight: bold;
}
.exit:hover {
cursor: pointer;
}
hr {
height: .2vw;
margin: 0;
margin-top: -2vw;
/*margin-left: calc( (100% - ((4 + 9 + 6 + 6) * .85vw + 2em + 13.5% + 3.5vw)) * 1 / 4 + 3.5vw + 6.75%);*/
/*margin-left: 6.75%;*/
background: #FFFFFF;
border: none;
transition: .3s ease-in-out;
}
/*language selector*/
select {
border: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
color: #EBDDFF;
background: none;
text-align-last: center;
text-align: center;
-ms-text-align-last: center;
-moz-text-align-last: center;
text-transform: uppercase;
font-size: 1.5vw;
}
select:hover {
cursor: pointer;
}
option:hover {
cursor: pointer;
}
option {
margin-top: 2vw;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
background-color: #8C93D8;
font-size: 1.5vw;
}
.selector {
position: fixed;
z-index: 2;
color: #000000;
bottom: 0;
padding: 1vh;
margin: 4vh;
background-color: #8C93D8;
border-radius: .5vh;
border-color: #000000;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
font-size: 1.5vw;
}
\ No newline at end of file
<div class="horizontal-nav col" id="sidebar">
<nav id="nav">
<span id="logo" #img [routerLink]="['/']" (click)="toggleState(1)" skipLocationChange>
<img src="../../assets/favicon.svg" height=96>
</span>
<div class="nav__item" #GS><a [routerLinkActive]="['nav__link--selected']" [routerLink]="['/']" [routerLinkActiveOptions]="{exact:
true}" class="nav__link" (click)="toggleState(1)"
skipLocationChange>{{'NAV.GETTINGSTARTED' | translate}}</a></div>
<div class="nav__item" #maps><a [routerLinkActive]="['nav__link--selected']" [routerLink]="['/maps']" class="nav__link" (click)="toggleState(2)"
skipLocationChange>{{'NAV.MAPS' | translate}}</a></div>
<div class="nav__item" #community><a [routerLinkActive]="['nav__link--selected']" [routerLink]="['/community']" (click)="toggleState(3)"
class="nav__link" skipLocationChange>{{'NAV.COMMUNITY' | translate}}</a></div>
<!-- <li class="nav__item"><a [routerLinkActive]="['nav__link--selected']" [routerLink]="['/messages']"
class="nav__link" skipLocationChange>Messages</a></li> -->
<!-- <li class="nav__item"><a [routerLinkActive]="['nav__link--selected']" [routerLink]="['/preventive-measures']"
class="nav__link" skipLocationChange>{{ 'NAV.PREVENTIVEMEASURES' | translate}}</a></li> -->
<!-- <li class="nav__item"><a [routerLinkActive]="['nav__link--selected']" [routerLink]="['/community']"
class="nav__link" skipLocationChange>Messages</a></li> -->
<div class="nav__item" #logIn><a [routerLinkActive]="['nav__link--selected']" [routerLink]="['/login']" (click)="toggleState(4)"
class="nav__link" skipLocationChange>{{ 'NAV.LOGIN' | translate }}</a></div>
<div class="nav__item " #exit><a class="nav__link exit" (click)="getAway()">{{ 'NAV.GETMEAWAY' | translate }}</a></div>
</nav>
<hr [style.margin-left]="position" [style.width.px]="width">
</div>
<div class="selector">
{{ 'NAV.LANG' | translate }} :
<select #langSelect (change)="lang.setLangToken(langSelect.value)">
<option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">
{{ lang }}</option>
</select>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HorizontalHeaderComponent } from './horizontal-header.component';
describe('HorizontalHeaderComponent', () => {
let component: HorizontalHeaderComponent;
let fixture: ComponentFixture<HorizontalHeaderComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HorizontalHeaderComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HorizontalHeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { LangService } from '../services/lang.service';
import { Router } from '@angular/router';
import { ChangeDetectorRef } from '@angular/core';
import { fromEvent, Observable, Subscription } from "rxjs";
import { debounceTime } from 'rxjs/operators';
/**
* The main navigation bar of the website animated such that a line is always following the selected component
*/
@Component({
selector: 'app-horizontal-header',
templateUrl: './horizontal-header.component.html',
styleUrls: ['./horizontal-header.component.css'],
})
export class HorizontalHeaderComponent implements OnInit, AfterViewChecked {
@ViewChild('GS', {read: ElementRef})
GS: ElementRef;
@ViewChild('maps', {read: ElementRef})
maps: ElementRef;
@ViewChild('community', {read: ElementRef})
community: ElementRef;
@ViewChild('logIn', {read: ElementRef})
logIn: ElementRef;
private resizeObservable$: Observable<Event>;
/**
* The translation service accessible through the whole app.
*
* @deprecated This service should be injected like any other.
* TODO: changer l'injection de ce service.
*/
translate: TranslateService;
position: string = '0';
width: number = 0;
/**
* La taille d'un élément
* @deprecated prfer a generic private method
*/
GSWidth: number;
/**
* La taille d'un élément
* @deprecated prfer a generic private method
*/
mapsWidth: number;
/**
* La taille d'un élément
* @deprecated prfer a generic private method
*/
communityWidth: number;
/**
* La taille d'un élément
* @deprecated prfer a generic private method
*/
logInWidth: number;
private selectedOption: number;
/**
* @constructor HorizontalHeaderComponent constuctor which injects necessary services and initializes the
* @deprecated language service property
* @param lang @deprecated the wrapper for the language service should not be necessary anymore
* @param router the standard angular router service which is necessary for navigation
* @param cdRef the angular change detection service
*/
constructor(public lang: LangService, private router: Router, private cdRef: ChangeDetectorRef) {
this.translate = lang.getTranslateService();
}
ngOnInit(): void {
/**
* Detection of window resize event and call to update the highlight line with a small delay
* to get accurate values
*/
this.resizeObservable$ = fromEvent(window, 'resize');
this.resizeObservable$.pipe(debounceTime(300)).subscribe( evt => {
this.updateValues();
});
}
ngAfterViewChecked(): void {
this.updateValues();
}
/**
* Method used to update the different widths of the text options
*/
updateValues(): void {
const updateCheck = this.GSWidth;
this.GSWidth = this.GS.nativeElement.offsetWidth;
this.mapsWidth = this.maps.nativeElement.offsetWidth;
this.communityWidth = this.community.nativeElement.offsetWidth;
this.logInWidth = this.logIn.nativeElement.offsetWidth;
if(updateCheck == 0 && this.GSWidth != updateCheck) this.toggleState(1); // highlight by default 'Getting started' when the component is initialized
else this.toggleState(this.selectedOption); // otherwise update the highlight line for the current navigation option selected
this.cdRef.detectChanges();
}
/**
* Method used to exit the page and navigate to a google image search of cats
*/
getAway() {
window.location.replace('https://www.google.com/search?tbm=isch&source=hp&biw=1920&bih=907&ei=lzqJXrHgJ8aflwTNlJQI&q=kittens&oq=kittens&gs_lcp=CgNpbWcQAzICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADICCABKGAgXEhQwZzcxZzczZzgxZzc2Zzc2ZzEwN0oRCBgSDTBnMWcxZzFnMWcxZzFQlQtY7BBglRFoAHAAeACAAWmIAdQDkgEDNS4xmAEAoAEBqgELZ3dzLXdpei1pbWc&sclient=img&ved=0ahUKEwjxh7KSl9DoAhXGz4UKHU0KBQEQ4dUDCAc&uact=5');
}
/**
* Method used to modify the width and position of the highlight line
*
* @param {number} menuOption the navigation option to highlight
*/
toggleState(menuOption: number) {
this.selectedOption = menuOption;
switch (menuOption) {
case 1:
this.position = this.GS.nativeElement.getBoundingClientRect().left + 'px';
this.width = this.GSWidth;
break;
case 2:
this.position = this.maps.nativeElement.getBoundingClientRect().left + 'px';
this.width = this.mapsWidth;
break;
case 3:
this.position = this.community.nativeElement.getBoundingClientRect().left + 'px';
this.width = this.communityWidth;
break;
case 4:
this.position = this.logIn.nativeElement.getBoundingClientRect().left + 'px';
this.width = this.logInWidth;
break;
default:
break;
}
}
}
......@@ -11,6 +11,7 @@
justify-content: center;
background-color: #FFFAE7;
overflow-y: auto;
margin: auto;
}
/*
.select-container, .details-container {
......
......@@ -3,6 +3,9 @@ import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Injectable({
/**
* @deprecated there should be no neeed for a wrapper.
*/
providedIn: 'root'
})
......@@ -15,6 +18,9 @@ export class LangService {
localStorage.setItem('lang', value);
}
/**
* @deprecated there should be no neeed for a wrapper.
*/
getTranslateService(): TranslateService {
return this.translate;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment