sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Un peu de CSS

Browse Source
This commit is contained in:
Sébastien André
2019-10-09 16:04:14 +02:00
parent 2f59760cc1
commit 2688b66825
6 changed files with 80 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
Front/skydivelogs-app/src/app/app.component.css
View File

@@ -0,0 +1,17 @@
.hamburger__icon {
position: relative;
z-index: 50;
height: 1rem;
/*padding: 0.5rem 1.5rem;*/
margin-right: 1rem;
cursor: pointer;
fill: #ffff;
}
.side-menu-disactive {
display: none !important;
}
.side-menu-active {
display: '' !important;
}

42
Front/skydivelogs-app/src/app/app.component.html
View File

@@ -1,9 +1,37 @@
<nav> <div>
<a routerLink="/summary" routerLinkActive="active">Summary</a> <header>
<a routerLink="/jumpsList" routerLinkActive="active">List of jumps</a> <svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32">
<a routerLink="/dz" routerLinkActive="active">List of DZs</a> <defs>
<a routerLink="/aircraftList" routerLinkActive="active">List of aircrafts</a> <style>
<a routerLink="/jumpTypeList" routerLinkActive="active">List of jump types</a> .hamburger__icon__fill {
<a routerLink="/newjump" routerLinkActive="active">Add a new jump</a> fill: #594e78
}
</style>
</defs>
<rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
transform="translate(31.5 58)"></rect>
<rect id="Rectangle_10" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
transform="translate(31.5 44)"></rect>
<rect id="Rectangle_11" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
transform="translate(31.5 30)"></rect>
</svg>
<h2 style="display: inline;">{{ title }}</h2>
<nav [ngClass]="{'side-menu-active': showMenu, 'side-menu-disactive': !showMenu}">
<a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()">Summary</a>
<a routerLink="/jumpsList" routerLinkActive="active" (click)="toggleMenu()">List of jumps</a>
<a routerLink="/dz" routerLinkActive="active" (click)="toggleMenu()">List of DZs</a>
<a routerLink="/aircraftList" routerLinkActive="active" (click)="toggleMenu()">List of aircrafts</a>
<a routerLink="/jumpTypeList" routerLinkActive="active" (click)="toggleMenu()">List of jump types</a>
<a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()">Add a new jump</a>
</nav> </nav>
</header>
<body>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</body>
<footer>footer - @Séb</footer>
</div>

16
Front/skydivelogs-app/src/app/app.component.ts
View File

@@ -1,10 +1,22 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ServiceComm } from '../services/serviceComm';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
export class AppComponent { export class AppComponent implements OnInit {
title = 'app'; title = 'app';
showMenu = false;
constructor(private serviceComm: ServiceComm) {
}
ngOnInit() {
}
toggleMenu() {
this.showMenu = !this.showMenu;
}
} }

10
Front/skydivelogs-app/src/app/app.module.ts
View File

@@ -1,18 +1,20 @@
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { SummaryComponent } from './summary/summary.component'; import { SummaryComponent } from './summary/summary.component';
import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component'; import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component';
import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component'; import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component';
import { NewJumpComponent } from './new-jump/new-jump.component'; import { NewJumpComponent } from './new-jump/new-jump.component';
import { ServiceApi } from '../services/serviceApi';
import { HttpClientModule } from '@angular/common/http';
import { ListOfAircraftsComponent } from './list-of-aircrafts/list-of-aircrafts.component'; import { ListOfAircraftsComponent } from './list-of-aircrafts/list-of-aircrafts.component';
import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-types.component'; import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-types.component';
import { ServiceApi } from '../services/serviceApi';
import { ServiceComm } from '../services/serviceComm';
const appRoutes: Routes = [ const appRoutes: Routes = [
{ path: 'summary', component: SummaryComponent }, { path: 'summary', component: SummaryComponent },
@@ -42,7 +44,7 @@ const appRoutes: Routes = [
BrowserModule, BrowserModule,
], ],
exports: [HttpClientModule], exports: [HttpClientModule],
providers: [ServiceApi], providers: [ServiceApi, ServiceComm],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }

1
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
View File

@@ -21,5 +21,4 @@ export class ListOfJumpsComponent implements OnInit {
getListOfJumps() { getListOfJumps() {
this.listOfJumps = this.serviceApi.getListOfJumps(); this.listOfJumps = this.serviceApi.getListOfJumps();
} }
} }

6
Front/skydivelogs-app/src/services/serviceComm.ts Normal file
View File

@@ -0,0 +1,6 @@
import { Injectable } from '@angular/core';
@Injectable()
export class ServiceComm {
constructor() { }
}