Skip to content
Snippets Groups Projects
Commit a429750e authored by mathias.chouet's avatar mathias.chouet
Browse files

Début du passage à angular-material 

nouvelle barre de navigation
nouveau menu latéral
parent cf72cb40
No related branches found
No related tags found
1 merge request!29Resolve "Remplacer mdbootstrap par angular-material"
Hide whitespace changes
Inline Side-by-side
Showing
with 248 additions and 141 deletions
src/app/app.component.html
+ 57
− 65
View file @ a429750e
<app-layout>
<header> <header>
<!--Navbar -->
<nav class="navbar navbar-expand-sm navbar-dark indigo">
<!-- Ouverture du sidenav -->
<span id="open-menu" style="font-size:30px;cursor:pointer;color:white" (click)="openNav()">☰</span>
<!-- lien vide pour que le toggler des liens apparaisse à droite --> <mat-toolbar #navbar id="main-toolbar" color="primary">
<span class="example-spacer"></span>
<span id="open-menu" style="font-size:30px;cursor:pointer;color:white" (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</span>
<a class="navbar-brand"></a> <a class="navbar-brand"></a>
<!-- toggler des liens --> <div [hidden]="tabsFitInNavbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" ICI LE SUPER SELECT DE LA MORT
aria-expanded="false" aria-label="Toggle navigation"> </div>
<!-- <span class="navbar-toggler-icon"> </span> --> <div id="tabs-container" [hidden]="! tabsFitInNavbar">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i> <button mat-raised-button color="primary" *ngFor="let c of calculators" class="calculator-button"
</button> [routerLink]="['/calculator/',c.uid]" [color]="c.active ? '' : 'primary'" [class.active]="c.active"
(click)="setActiveCalc(c.uid)" [title]="'uid: ' + c.uid">
<!-- Collapsible content --> <span class="calc-name">
<div class="collapse navbar-collapse" id="navbarSupportedContent"> {{ c.title }}
<ul id="navbar" class="navbar-nav mr-auto"> </span>
<li class="nav-item calculator-tab" *ngFor="let c of calculators"> <span class="calc-type" [innerHTML]="'( ' + c.type + ' )'"></span>
<a class="nav-link waves-light {{getHighlightClass(c.uid)}}" mdbRippleRadius [routerLink]="['/calculator/',c.uid]">{{ c.title }}</a> </button>
</li> <!-- <i id="new-calculator" class="fa fa-plus-square fa-2x" style='vertical-align: middle' routerLink="/list" (click)='sidenav.close()'></i> -->
<li class="nav-item" id="add-calculator-tab">
<i id="new-calculator" class="fa fa-plus-square fa-2x fa-inverse" style='vertical-align: middle' routerLink="/list" (click)='closeNav()'></i>
</li>
</ul>
</div> </div>
</nav> <button mat-icon-button id="new-calculator" routerLink="/list" (click)="sidenav.close()">
<!--/Navbar --> <mat-icon>add_box</mat-icon>
</button>
</mat-toolbar>
</header> </header>
<main> <main>
<!-- sidenav -->
<div class="container"> <mat-sidenav-container fxFlexFill class="example-container">
<div class="row">
<div id="mySidenav" class="sidenav"> <mat-sidenav class="sidenav" #sidenav fxLayout="column" >
<!-- ATTENTION ! pas de href="#" sous peine de rechargement de la page et réinitialisation de l'appli --> <div fxLayout="column">
<a id="close-side-nav" class="closebtn" (click)="closeNav()">×</a> <a id="close-side-nav" class="closebtn" (click)="sidenav.close()">×</a>
<a id="side-nav-list" routerLink="/list" (click)="closeNav()">{{ uitextSidenavNewCalc }}</a> <a id="side-nav-list" routerLink="/list" (click)="sidenav.close()">{{ uitextSidenavNewCalc }}</a>
<a id="side-nav-load-session" (click)="loadSession()">{{ uitextSidenavLoadSession }}</a> <a id="side-nav-load-session" (click)="loadSession()">{{ uitextSidenavLoadSession }}</a>
<a id="side-nav-setup" routerLink="/setup" (click)="closeNav()">{{ uitextSidenavParams }}</a> <a id="side-nav-setup" routerLink="/setup" (click)="sidenav.close()">{{ uitextSidenavParams }}</a>
<a id="side-nav-help" target="_blank" href="assets/docs-fr/" (click)="closeNav()">{{ uitextSidenavHelp }}</a> <a id="side-nav-help" target="_blank" href="assets/docs-fr/" (click)="sidenav.close()">{{ uitextSidenavHelp }}</a>
<div class="hyd_fillvertical"></div>
<div class="hyd_version"> <div class="hyd_version">
JaLHyd version: {{ getDateRevision()[0] }}<br/> JaLHyd version: {{ getDateRevision()[0] }}<br/>
ngHyd version: {{ getDateRevision()[1] }} ngHyd version: {{ getDateRevision()[1] }}
</div> </div>
</div> </div>
</div> </mat-sidenav>
</div>
<!-- chargement des calculettes -->
<div appLoadCalcDialogAnchor></div>
<!-- sauvegarde des calculettes --> <mat-sidenav-content fxFlexFill>
<div appSaveCalcDialogAnchor></div> <!-- chargement des calculettes -->
<div appLoadCalcDialogAnchor></div>
<!-- sauvegarde des calculettes -->
<div appSaveCalcDialogAnchor></div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<router-outlet (activate)="onRouterOutletActivated($event)"></router-outlet>
</div>
</div>
</div>
</mat-sidenav-content>
<!-- règle gradée des colonnes Bootstrap --> </mat-sidenav-container>
<div *ngIf="ruler" class="container-fluid">
<div class="row">
<div class="col 1 red">1</div>
<div class="col 1 green">2</div>
<div class="col 1 blue">3</div>
<div class="col 1 red">4</div>
<div class="col 1 green">5</div>
<div class="col 1 blue">6</div>
<div class="col 1 red">7</div>
<div class="col 1 green">8</div>
<div class="col 1 blue">9</div>
<div class="col 1 red">10</div>
<div class="col 1 green">11</div>
<div class="col 1 blue">12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<router-outlet (activate)="onRouterOutletActivated($event)"></router-outlet>
</div>
</div>
</div>
</main> </main>
<footer> <footer>
...@@ -88,4 +78,6 @@ ...@@ -88,4 +78,6 @@
<br> <br>
<a href="http://www.irstea.fr/">Institut national de recherche en sciences et technologies pour l'environnement et l'agriculture</a> <a href="http://www.irstea.fr/">Institut national de recherche en sciences et technologies pour l'environnement et l'agriculture</a>
</div> --> </div> -->
</footer> </footer>
\ No newline at end of file
</app-layout>
src/app/app.component.scss
+ 100
− 46
View file @ a429750e
...@@ -3,67 +3,121 @@ ...@@ -3,67 +3,121 @@
background-image: none; background-image: none;
} }
// sidenav button:focus {
body { outline: 0;
font-family: "Lato", sans-serif;
} }
.sidenav { #main-toolbar {
height: 100%; height: 54px;
width: 0;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: flex;
flex-direction: column;
} }
.sidenav a, .sidenav div.hyd_version { #open-menu mat-icon, #new-calculator mat-icon {
padding: 8px 8px 8px 32px; transform: scale(1.6);
text-decoration: none;
font-size: 16px;
color: #aaaaaa;
display: block;
transition: 0.3s;
} }
.sidenav div.hyd_version { #new-calculator {
color: #888888; cursor: pointer;
padding: 0px 32px 0px 0px; position: absolute;
text-align: right; right: 10px;
}
.sidenav div.hyd_fillvertical { &:focus {
flex: 1; outline: 0;
}
} }
.sidenav a:hover { #tabs-container {
color: #f1f1f1; width: 100%;
} }
.sidenav .closebtn { .calculator-button {
position: absolute; width: 11%; /* 8 tabs */
top: 0; @media screen and (max-width: 1200px) {
right: 25px; width: 14%; /* 6 tabs */
font-size: 36px; }
margin-left: 50px; @media screen and (max-width: 800px) {
} width: 21%; /* 4 tabs */
}
@media screen and (max-width: 640px) {
width: 27%; /* 3 tabs */
}
@media screen and (max-width: 480px) {
width: 24%; /* 3 tabs */
}
@media screen and (max-width: 320px) {
width: 35%; /* 2 tabs */
}
/* tabs-looking buttons */
margin-right: 3px;
margin-top: 11px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: solid #3F51B5 2px; /* @TODO */
&.active {
border-bottom-color: white;
.calc-type {
color: #777;
}
}
.calc-name {
display: block;
margin-top: -3px; /* ark ! */
}
.navbar-brand { .calc-type {
color: #fff; display: block;
font-size: 0.7em;
color: #bbb;
line-height: 24px;
margin-top: -14px; /* ark ! */
}
} }
nav div.container {
display: contents; // sidenav
.sidenav {
height: 100%;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
padding-right: 4em;
a, .div.hyd_version {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16px;
color: #aaaaaa;
display: block;
transition: 0.3s;
}
div.hyd_version {
position: absolute;
bottom: 0;
right: 0;
font-size: 0.8em;
color: #888888;
padding: 0 2em 1em 0;
text-align: right;
}
a:hover {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
} }
@media screen and (max-height: 450px) { /*@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;} .sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;} .sidenav a {font-size: 18px;}
} }*/
// sidenav
\ No newline at end of file
src/app/app.component.ts
+ 68
− 22
View file @ a429750e
import { Component, ApplicationRef, OnInit, OnDestroy, HostListener, ViewChild, ComponentRef } from "@angular/core"; import { Component, ApplicationRef, OnInit, OnDestroy, HostListener, ViewChild, ComponentRef } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router"; import { Router, Event, NavigationEnd } from "@angular/router";
import { Observer, jalhydDateRev } from "jalhyd"; import { Observer, jalhydDateRev } from "jalhyd";
...@@ -18,6 +18,8 @@ import { SaveCalcDialogAnchorDirective } from "./components/save-calculator/save ...@@ -18,6 +18,8 @@ import { SaveCalcDialogAnchorDirective } from "./components/save-calculator/save
import { SaveCalculatorComponent } from "./components/save-calculator/save-calculator.component"; import { SaveCalculatorComponent } from "./components/save-calculator/save-calculator.component";
import { nghydDateRev } from "../date_revision"; import { nghydDateRev } from "../date_revision";
import { MatSidenav, MatToolbar } from "@angular/material";
@Component({ @Component({
selector: "nghyd-app", selector: "nghyd-app",
...@@ -26,6 +28,13 @@ import { nghydDateRev } from "../date_revision"; ...@@ -26,6 +28,13 @@ import { nghydDateRev } from "../date_revision";
providers: [ErrorService] providers: [ErrorService]
}) })
export class AppComponent implements OnInit, OnDestroy, Observer { export class AppComponent implements OnInit, OnDestroy, Observer {
@ViewChild("sidenav")
public sidenav: MatSidenav;
@ViewChild("navbar")
public navbar: MatToolbar;
/** /**
* liste des calculettes. Forme des objets : * liste des calculettes. Forme des objets :
* "title": nom de la calculette * "title": nom de la calculette
...@@ -39,6 +48,8 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -39,6 +48,8 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
*/ */
private _currentFormId: number; private _currentFormId: number;
private _innerWidth;
@ViewChild(LoadCalcDialogAnchorDirective) @ViewChild(LoadCalcDialogAnchorDirective)
private appLoadCalcDialogAnchor: LoadCalcDialogAnchorDirective; private appLoadCalcDialogAnchor: LoadCalcDialogAnchorDirective;
...@@ -65,19 +76,21 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -65,19 +76,21 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
ServiceFactory.instance.internationalisationService = intlService; ServiceFactory.instance.internationalisationService = intlService;
ServiceFactory.instance.formulaireService = formulaireService; ServiceFactory.instance.formulaireService = formulaireService;
ServiceFactory.instance.httpService = httpService; ServiceFactory.instance.httpService = httpService;
}
// process.on('unhandledRejection', (reason, p) => { this.router.events.subscribe((event: Event) => {
// console.log('Unhandled Rejection at: Promise', p, 'reason:', reason); // close side navigation when clicking a calculator tab
// // Stack Trace if (event instanceof NavigationEnd) {
// console.log(reason.stack); this.sidenav.close();
// }); }
});
}
ngOnInit() { ngOnInit() {
this.intlService.addObserver(this); this.intlService.addObserver(this);
this.intlService.setLocale("fr"); this.intlService.setLocale("fr");
this.formulaireService.addObserver(this); this.formulaireService.addObserver(this);
this.subscribeErrorService(); this.subscribeErrorService();
this._innerWidth = window.innerWidth;
} }
ngOnDestroy() { ngOnDestroy() {
...@@ -85,6 +98,11 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -85,6 +98,11 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
this.formulaireService.removeObserver(this); this.formulaireService.removeObserver(this);
} }
@HostListener("window:resize", ["$event"])
onResize(event) {
this._innerWidth = window.innerWidth;
}
public get uitextSidenavNewCalc() { public get uitextSidenavNewCalc() {
return this.intlService.localizeText("INFO_MENU_NOUVELLE_CALC"); return this.intlService.localizeText("INFO_MENU_NOUVELLE_CALC");
} }
...@@ -105,6 +123,40 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -105,6 +123,40 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
return this._calculators; return this._calculators;
} }
public setActiveCalc(uid: string) {
this._calculators.forEach((calc) => {
calc.active = (calc.uid === uid);
});
}
/**
* Returns true if sum of open calculator tabs witdh is lower than navbar
* available space (ie. if navbar is not overflowing), false otherwise
*/
public get tabsFitInNavbar() {
// manual breakpoints
// @WARNING keep in sync with .calculator-buttons sizes in app.component.scss
let tabsLimit = 2;
if (this._innerWidth > 320) {
tabsLimit = 3;
}
if (this._innerWidth > 480) {
tabsLimit = 3;
}
if (this._innerWidth > 640) {
tabsLimit = 4;
}
if (this._innerWidth > 800) {
tabsLimit = 6;
}
if (this._innerWidth > 1200) {
tabsLimit = 8;
}
const fits = this._calculators.length <= tabsLimit;
return fits;
}
/** /**
* abonnement au service d'erreurs * abonnement au service d'erreurs
*/ */
...@@ -145,9 +197,12 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -145,9 +197,12 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
this._calculators.push( this._calculators.push(
{ {
"title": f.calculatorName, "title": f.calculatorName,
"uid": String(f.uid) "type": this.formulaireService.getLocalisedTitleFromCalculatorType(f.calculatorType),
"uid": f.uid
} }
); );
this.setActiveCalc(f.uid);
this._tabsChanged = true;
// abonnement en tant qu'observateur du nouveau formulaire // abonnement en tant qu'observateur du nouveau formulaire
f.addObserver(this); f.addObserver(this);
...@@ -201,6 +256,8 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -201,6 +256,8 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
private updateCalculatorTitle(f: FormulaireDefinition, title: string) { private updateCalculatorTitle(f: FormulaireDefinition, title: string) {
const formIndex = this.getCalculatorIndexFromId(f.uid); const formIndex = this.getCalculatorIndexFromId(f.uid);
this._calculators[formIndex]["title"] = title; this._calculators[formIndex]["title"] = title;
this._tabsChanged = true; // recompute size !
} }
/** /**
...@@ -267,7 +324,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -267,7 +324,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
* - celle après celle supprimée * - celle après celle supprimée
* - ou celle avant celle supprimée si on supprime la dernière * - ou celle avant celle supprimée si on supprime la dernière
*/ */
let newId = null; let newId = null;
const l = this._calculators.length; const l = this._calculators.length;
if (l > 1) { if (l > 1) {
...@@ -286,6 +342,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -286,6 +342,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
// MAJ affichage // MAJ affichage
this._tabsChanged = true;
if (newId === null) { if (newId === null) {
this.toList(); this.toList();
this._currentFormId = null; this._currentFormId = null;
...@@ -298,8 +355,9 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -298,8 +355,9 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
this.router.navigate(["/list"]); this.router.navigate(["/list"]);
} }
private toCalc(id: number) { private toCalc(id: string) {
this.router.navigate(["/calculator", id]); this.router.navigate(["/calculator", id]);
this.setActiveCalc(id);
} }
/** /**
...@@ -320,19 +378,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer { ...@@ -320,19 +378,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
return false; return false;
} }
// sidenav
public openNav() {
document.getElementById("mySidenav").style.width = "300px";
}
public closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
public loadSession() { public loadSession() {
this.closeNav();
// création du dialogue de sélection des formulaires à sauver // création du dialogue de sélection des formulaires à sauver
const compRef: ComponentRef<LoadCalculatorComponent> = this.appLoadCalcDialogAnchor.createDialog(); const compRef: ComponentRef<LoadCalculatorComponent> = this.appLoadCalcDialogAnchor.createDialog();
......
src/app/app.module.ts
+ 9
− 2
View file @ a429750e
import { BrowserModule } from "@angular/platform-browser"; import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { MatButtonModule, MatCheckboxModule, MatIconModule, MatTabsModule, MatSidenavModule, MatToolbarModule } from "@angular/material";
import { FlexLayoutModule } from "@angular/flex-layout";
import { MDBBootstrapModule } from "angular-bootstrap-md"; import { MDBBootstrapModule } from "angular-bootstrap-md";
import { HttpClientModule } from "@angular/common/http"; import { HttpClientModule } from "@angular/common/http";
import { FormsModule } from "@angular/forms"; // <-- NgModel lives here import { FormsModule } from "@angular/forms"; // <-- NgModel lives here
...@@ -70,11 +72,16 @@ const appRoutes: Routes = [ ...@@ -70,11 +72,16 @@ const appRoutes: Routes = [
BrowserModule, BrowserModule,
NgxMdModule.forRoot(), NgxMdModule.forRoot(),
BrowserAnimationsModule, BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatSidenavModule,
MatTabsModule,
MatToolbarModule,
MDBBootstrapModule.forRoot(), MDBBootstrapModule.forRoot(),
FormsModule, // <-- import the FormsModule before binding with [(ngModel)] FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
HttpClientModule, HttpClientModule,
// MdInputModule, FlexLayoutModule,
// MdDialogModule,
ChartModule ChartModule
], ],
declarations: [ // composants, pipes et directives declarations: [ // composants, pipes et directives
......
src/app/components/calculator-list/calculator-list.component.css
+ 4
− 0
View file @ a429750e
...@@ -10,3 +10,7 @@ ...@@ -10,3 +10,7 @@
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
} }
button:focus {
outline: 0;
}
src/app/formulaire/definition/form-definition.ts
+ 1
− 2
View file @ a429750e
...@@ -70,8 +70,7 @@ export abstract class FormulaireDefinition extends FormulaireNode implements Obs ...@@ -70,8 +70,7 @@ export abstract class FormulaireDefinition extends FormulaireNode implements Obs
this.notifyObservers({ this.notifyObservers({
"action": "nameChanged", "action": "nameChanged",
"name": name "name": name
}, }, this);
this);
} }
public get jsonConfig(): {} { public get jsonConfig(): {} {
......
src/app/formulaire/formulaire-element.ts
+ 1
− 1
View file @ a429750e
...@@ -69,7 +69,7 @@ export abstract class FormulaireElement extends FormulaireNode { ...@@ -69,7 +69,7 @@ export abstract class FormulaireElement extends FormulaireNode {
} }
public getKids(): FormulaireElement[] { public getKids(): FormulaireElement[] {
return super.kids as FormulaireElement[]; return this.kids as FormulaireElement[];
} }
/** /**
......
src/index.html
+ 4
− 3
View file @ a429750e
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
<!-- ressources pour faire fonctionner le toggler de la navbar --> <!-- ressources pour faire fonctionner le toggler de la navbar -->
<!-- <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" --> <!-- <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" -->
<script href="dependencies/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" <!--script href="dependencies/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" -->
<script href="dependencies/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" <script href="dependencies/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
...@@ -24,13 +24,14 @@ ...@@ -24,13 +24,14 @@
<!-- Load the Angular Material stylesheet --> <!-- Load the Angular Material stylesheet -->
<!-- <!--
<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> <link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style> <style>
body { body {
font-family: Roboto, Arial, sans-serif; font-family: Roboto, Arial, sans-serif;
} }
</style> </style>
--> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head> </head>
<body> <body>
......
src/main.ts
+ 1
− 0
View file @ a429750e
import "hammerjs";
import { enableProdMode } from "@angular/core"; import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
......
src/styles.scss
+ 3
− 0
View file @ a429750e
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
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