From 2e193dff323bd05d183be3692876d2e5297bd15b Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sat, 23 Feb 2019 20:53:17 +0100 Subject: [PATCH] Rework basic nav header incl functionality --- package-lock.json | 2 +- server/package-lock.json | 28 +- static/package-lock.json | 42 +-- static/package.json | 5 +- static/src/app/app.component.html | 307 ++++++++++-------- static/src/app/app.component.scss | 23 +- static/src/app/app.component.ts | 60 +--- static/src/app/app.module.ts | 9 +- static/src/app/app.routing.ts | 5 +- .../navigation-header.component.html | 134 ++++++++ .../navigation-header.component.scss | 57 ++++ .../navigation/navigation-header.component.ts | 71 ++++ .../navigation/sidenav-list.component.html | 11 + .../navigation/sidenav-list.component.scss | 13 + .../navigation/sidenav-list.component.ts | 20 ++ .../common/not-found/not-found.component.ts | 11 +- static/src/app/shared.module.ts | 7 +- static/src/app/style/background-image.scss | 2 - static/src/assets/icon/baseline-menu-24px.svg | 1 + static/src/styles.scss | 13 +- 20 files changed, 550 insertions(+), 271 deletions(-) create mode 100644 static/src/app/common/navigation/navigation-header.component.html create mode 100644 static/src/app/common/navigation/navigation-header.component.scss create mode 100644 static/src/app/common/navigation/navigation-header.component.ts create mode 100644 static/src/app/common/navigation/sidenav-list.component.html create mode 100644 static/src/app/common/navigation/sidenav-list.component.scss create mode 100644 static/src/app/common/navigation/sidenav-list.component.ts create mode 100644 static/src/assets/icon/baseline-menu-24px.svg diff --git a/package-lock.json b/package-lock.json index 1dd5d96..473308a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "opt-cc", - "version": "1.9.2", + "version": "1.9.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/server/package-lock.json b/server/package-lock.json index e036c75..ad5b7d3 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -3984,14 +3984,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4006,20 +4004,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -4136,8 +4131,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -4149,7 +4143,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4164,7 +4157,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4172,14 +4164,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4198,7 +4188,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4279,8 +4268,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -4292,7 +4280,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4414,7 +4401,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/static/package-lock.json b/static/package-lock.json index 987f494..fdd1f2c 100644 --- a/static/package-lock.json +++ b/static/package-lock.json @@ -533,6 +533,14 @@ "tslib": "^1.9.0" } }, + "@angular/flex-layout": { + "version": "6.0.0-beta.18", + "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-6.0.0-beta.18.tgz", + "integrity": "sha512-1Alv3YSIZYp0CTUIESIaSQLoSVyLzuNKPa5bGM/RzOmeSrndm5plVgI9wopGfJUDiwM18R97rq/4XjDvNT/+ig==", + "requires": { + "tslib": "^1.7.1" + } + }, "@angular/forms": { "version": "6.1.10", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.10.tgz", @@ -4636,13 +4644,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4655,18 +4661,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -4769,8 +4772,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -4780,7 +4782,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4793,20 +4794,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.2.4", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4823,7 +4821,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4896,8 +4893,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -4907,7 +4903,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -5013,7 +5008,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -11767,9 +11761,9 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "typescript": { - "version": "2.7.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz", - "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==" + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", + "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==" }, "underscore": { "version": "1.7.0", diff --git a/static/package.json b/static/package.json index 6ce0161..6848f3c 100644 --- a/static/package.json +++ b/static/package.json @@ -22,6 +22,7 @@ "@angular/compiler": "^6.1.10", "@angular/compiler-cli": "^6.1.10", "@angular/core": "^6.1.10", + "@angular/flex-layout": "^6.0.0-beta.18", "@angular/forms": "^6.1.10", "@angular/http": "^6.1.10", "@angular/material": "^6.1.10", @@ -42,6 +43,7 @@ "ngx-infinite-scroll": "^7.0.1", "rxjs-compat": "^6.2.1", "ts-helpers": "^1.1.2", + "typescript": "^2.9.2", "zone.js": "^0.8.26" }, "devDependencies": { @@ -58,7 +60,6 @@ "protractor": "^5.4.1", "protractor-jasmine2-screenshot-reporter": "^0.3.2", "ts-node": "1.2.1", - "tslint": "^5.10.0", - "typescript": "^2.7.2" + "tslint": "^5.10.0" } } diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index f059a83..ca95249 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -1,148 +1,31 @@ -
- -
-
- + + + +
+
+ -
- -
+
+ +
- -
+ +
+ + + + + +
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss index 31ab521..e555101 100644 --- a/static/src/app/app.component.scss +++ b/static/src/app/app.component.scss @@ -1,5 +1,13 @@ @import "style/load-indicator.scss"; +mat-sidenav-container, mat-sidenav-content, mat-sidenav { + height: 100%; +} + +mat-sidenav { + width: 250px; +} + ul { list-style-type: none; margin: 0; @@ -21,21 +29,6 @@ li { overflow-x: hidden; } -.navbar-brand mat-icon { - color: #dadada; - width: 135px; - height: 40px; - stroke: #dadada; -} - -.version-label { - position: absolute; - top: 27px; - left: 115px; - font-size: 12px; - color: #bebebe; -} - #scrollTopBtn { position: fixed; bottom: 20px; diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts index 701ce2b..50b7b78 100644 --- a/static/src/app/app.component.ts +++ b/static/src/app/app.component.ts @@ -1,19 +1,12 @@ -import {Component, HostListener, Inject, OnInit} from '@angular/core'; +import {Component, Inject, OnInit} from '@angular/core'; import {NavigationEnd, NavigationStart, Router} from '@angular/router'; -import {LoginService} from './services/app-user-service/login-service'; -import {PromotionService} from './services/army-management/promotion.service'; -import {AwardingService} from './services/army-management/awarding.service'; -import {RouteConfig} from './app.config'; import {DOCUMENT} from '@angular/common'; import {DomSanitizer} from '@angular/platform-browser'; import {MatIconRegistry} from '@angular/material'; import {SpinnerService} from './services/user-interface/spinner/spinner.service'; -import {TranslateService} from '@ngx-translate/core'; -import {SettingsService} from './services/settings.service'; -import {environment} from '../environments/environment'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; +import {Observable} from 'rxjs'; -declare function require(url: string); @Component({ selector: 'app-root', @@ -22,10 +15,6 @@ declare function require(url: string); }) export class AppComponent implements OnInit { - readonly features = environment.features; - - config = RouteConfig; - loading = false; scrollTopVisible = false; @@ -37,6 +26,7 @@ export class AppComponent implements OnInit { svgIcons = { 'opt-logo': 'general/opt-logo', 'opt-logo-core': 'general/opt-logo-core', + 'menu': 'baseline-menu-24px', 'add': 'outline-add_box-24px', 'add-user': 'twotone-person_add-24px', 'award': 'award', @@ -73,21 +63,10 @@ export class AppComponent implements OnInit { 'flag-en': 'locale/en', }; - language; - - languages = ['de', 'en']; - - version = 'v'.concat(require('./../../../package.json').version); - - constructor(public loginService: LoginService, - private promotionService: PromotionService, - private awardingService: AwardingService, - private router: Router, + constructor(private router: Router, private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer, private spinnerService: SpinnerService, - private translate: TranslateService, - private settingsService: SettingsService, private snackBarService: SnackBarService, @Inject(DOCUMENT) private document) { this.initMaterialSvgIcons(); @@ -112,15 +91,10 @@ export class AppComponent implements OnInit { } ngOnInit() { - this.settingsService.getLanguage().subscribe((language) => { - this.language = language; - this.translate.setDefaultLang(language) + Observable.fromEvent(this.document, "scroll").subscribe(e => { + this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal + || document.documentElement.scrollTop > this.scrollBtnVisibleVal; }); - if (this.loginService.hasPermission(2)) { - const fraction = this.loginService.getCurrentUser().squad.fraction; - this.promotionService.checkUnconfirmedPromotions(fraction); - this.awardingService.checkUnprocessedAwards(fraction); - } } toggleSpinner(active) { @@ -134,29 +108,9 @@ export class AppComponent implements OnInit { }); } - @HostListener('window:scroll', []) - onWindowScroll() { - this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal - || document.documentElement.scrollTop > this.scrollBtnVisibleVal; - } - - logout() { - this.loginService.logout(); - setTimeout(() => { - this.router.navigate([RouteConfig.overviewPath]); - }, 500); - } - scrollToTop() { this.document.body.scrollTop = 0; // For Safari this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera } - - setLanguage(language: string) { - if (language) { - this.language = language; - this.settingsService.setLanguage(language); - } - } } diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index d8a986e..792b881 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -20,9 +20,10 @@ import {CookieService} from 'ngx-cookie-service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; import {HttpClientModule} from '@angular/common/http'; import {SpinnerService} from './services/user-interface/spinner/spinner.service'; -import {MatSelectModule, MatSnackBarModule} from '@angular/material'; import {SettingsService} from './services/settings.service'; import {HttpGateway} from './services/http-gateway'; +import {MatListModule, MatSidenavModule, MatToolbarModule} from '@angular/material'; +import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ imports: [ @@ -33,8 +34,10 @@ import {HttpGateway} from './services/http-gateway'; HttpModule, HttpClientModule, ClipboardModule, - MatSnackBarModule, - MatSelectModule, + MatSidenavModule, + MatToolbarModule, + MatListModule, + FlexLayoutModule, ], providers: [ diff --git a/static/src/app/app.routing.ts b/static/src/app/app.routing.ts index bc8468e..ae4fc77 100644 --- a/static/src/app/app.routing.ts +++ b/static/src/app/app.routing.ts @@ -4,6 +4,8 @@ import {LoginComponent, LoginGuardAdmin, LoginGuardHL, LoginGuardMT} from './log import {armyRoutes, armyRoutingComponents} from './army/army.routing'; import {SignupComponent} from './login/signup.component'; import {RouteConfig} from './app.config'; +import {NavigationHeaderComponent} from './common/navigation/navigation-header.component'; +import {SidenavListComponent} from './common/navigation/sidenav-list.component'; export const appRoutes: Routes = [ { @@ -58,6 +60,7 @@ export const appRoutes: Routes = [ export const appRouting = RouterModule.forRoot(appRoutes); -export const routingComponents = [...armyRoutingComponents, LoginComponent, SignupComponent, NotFoundComponent]; +export const routingComponents = [...armyRoutingComponents, LoginComponent, SignupComponent, NotFoundComponent, + NavigationHeaderComponent, SidenavListComponent]; export const routingProviders = [LoginGuardHL, LoginGuardMT, LoginGuardAdmin]; diff --git a/static/src/app/common/navigation/navigation-header.component.html b/static/src/app/common/navigation/navigation-header.component.html new file mode 100644 index 0000000..f92bdd8 --- /dev/null +++ b/static/src/app/common/navigation/navigation-header.component.html @@ -0,0 +1,134 @@ + +
+ +
+ +
+ +
+
+ +
+ diff --git a/static/src/app/common/navigation/navigation-header.component.scss b/static/src/app/common/navigation/navigation-header.component.scss new file mode 100644 index 0000000..6857758 --- /dev/null +++ b/static/src/app/common/navigation/navigation-header.component.scss @@ -0,0 +1,57 @@ +li { + height: 50px; + line-height: 46px; +} + +li > a { + font-size: 16px; + text-decoration: none; + color: #9d9d9d; + padding: 16px 5px; +} + +li:hover, li.active{ + > a { + color: white; + } +} + +.navigation-items{ + list-style-type: none; + padding: 0; + margin: 0; +} + +.mat-toolbar.mat-primary { + background: #222222; +} + +mat-toolbar{ + height: 2.5em; + min-height: 50px; +} + +.brand-logo { + padding-top: 6px; + margin-right: -10px; +} + +.brand-logo mat-icon { + color: #dadada; + width: 135px; + height: 40px; + stroke: #dadada; +} + +.version-label { + position: relative; + left: -42px; + font-size: 12px; + color: #bebebe; +} + +@media all and (max-width : 599px) { + .brand-logo { + margin: auto; + } +} diff --git a/static/src/app/common/navigation/navigation-header.component.ts b/static/src/app/common/navigation/navigation-header.component.ts new file mode 100644 index 0000000..67acc72 --- /dev/null +++ b/static/src/app/common/navigation/navigation-header.component.ts @@ -0,0 +1,71 @@ +import {Component, EventEmitter, Inject, OnInit, Output} from '@angular/core'; +import {RouteConfig} from '../../app.config'; +import {environment} from '../../../environments/environment'; +import {LoginService} from '../../services/app-user-service/login-service'; +import {Router} from '@angular/router'; +import {PromotionService} from '../../services/army-management/promotion.service'; +import {AwardingService} from '../../services/army-management/awarding.service'; +import {SettingsService} from '../../services/settings.service'; +import {TranslateService} from '@ngx-translate/core'; +import {DOCUMENT} from '@angular/common'; + +declare function require(url: string); + +@Component({ + selector: 'app-header', + templateUrl: 'navigation-header.component.html', + styleUrls: ['navigation-header.component.scss'] +}) +export class NavigationHeaderComponent implements OnInit { + + @Output() public sidenavToggle = new EventEmitter(); + + readonly features = environment.features; + + config = RouteConfig; + + language; + + languages = ['de', 'en']; + + version = require('./../../../../../package.json').version; + + constructor(public loginService: LoginService, + private router: Router, + private promotionService: PromotionService, + private awardingService: AwardingService, + private translate: TranslateService, + private settingsService: SettingsService, + @Inject(DOCUMENT) private document) { + } + + ngOnInit() { + this.settingsService.getLanguage().subscribe((language) => { + this.language = language; + this.translate.setDefaultLang(language) + }); + if (this.loginService.hasPermission(2)) { + const fraction = this.loginService.getCurrentUser().squad.fraction; + this.promotionService.checkUnconfirmedPromotions(fraction); + this.awardingService.checkUnprocessedAwards(fraction); + } + } + + public onToggleSidenav = () => { + this.sidenavToggle.emit(); + }; + + setLanguage(language: string) { + if (language) { + this.language = language; + this.settingsService.setLanguage(language); + } + } + + logout() { + this.loginService.logout(); + setTimeout(() => { + this.router.navigate([RouteConfig.overviewPath]); + }, 500); + } +} diff --git a/static/src/app/common/navigation/sidenav-list.component.html b/static/src/app/common/navigation/sidenav-list.component.html new file mode 100644 index 0000000..e845859 --- /dev/null +++ b/static/src/app/common/navigation/sidenav-list.component.html @@ -0,0 +1,11 @@ + + + home Home + + + assignment_ind Owner Actions + + + account_balanceAccount Actions + + diff --git a/static/src/app/common/navigation/sidenav-list.component.scss b/static/src/app/common/navigation/sidenav-list.component.scss new file mode 100644 index 0000000..569e4a6 --- /dev/null +++ b/static/src/app/common/navigation/sidenav-list.component.scss @@ -0,0 +1,13 @@ +a { + text-decoration: none; + color: white; +} + +a:hover, a:active{ + color: lightgray; +} + +.nav-caption{ + display: inline-block; + padding-left: 6px; +} diff --git a/static/src/app/common/navigation/sidenav-list.component.ts b/static/src/app/common/navigation/sidenav-list.component.ts new file mode 100644 index 0000000..00a59cb --- /dev/null +++ b/static/src/app/common/navigation/sidenav-list.component.ts @@ -0,0 +1,20 @@ +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; + +@Component({ + selector: 'app-sidenav-list', + templateUrl: './sidenav-list.component.html', + styleUrls: ['./sidenav-list.component.scss'] +}) +export class SidenavListComponent implements OnInit { + + @Output() sidenavClose = new EventEmitter(); + + constructor() { } + + ngOnInit() { + } + + public onSidenavClose = () => { + this.sidenavClose.emit(); + } +} diff --git a/static/src/app/common/not-found/not-found.component.ts b/static/src/app/common/not-found/not-found.component.ts index c65903a..02eeb8b 100644 --- a/static/src/app/common/not-found/not-found.component.ts +++ b/static/src/app/common/not-found/not-found.component.ts @@ -1,16 +1,9 @@ -import {Component, OnInit} from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-not-found', templateUrl: 'not-found.component.html', styleUrls: ['not-found.component.scss'] }) -export class NotFoundComponent implements OnInit { - - constructor() { - } - - ngOnInit() { - } - +export class NotFoundComponent { } diff --git a/static/src/app/shared.module.ts b/static/src/app/shared.module.ts index 298a752..4957104 100644 --- a/static/src/app/shared.module.ts +++ b/static/src/app/shared.module.ts @@ -4,8 +4,10 @@ import {ShowErrorComponent} from './common/show-error/show-error.component'; import {CommonModule} from '@angular/common'; import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component'; import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component'; -import {MatButtonToggleModule, MatTooltipModule, MatSlideToggleModule, MatFormFieldModule, MatOptionModule, MatSelectModule, - MatInputModule} from '@angular/material'; +import { + MatButtonToggleModule, MatTooltipModule, MatSlideToggleModule, MatFormFieldModule, MatOptionModule, MatSelectModule, + MatInputModule, MatSidenavModule, MatSnackBarModule +} from '@angular/material'; import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; @@ -35,6 +37,7 @@ export function createTranslateLoader(http: HttpClient) { MatFormFieldModule, MatOptionModule, MatSelectModule, + MatSnackBarModule, MatInputModule, TranslateModule.forRoot({ diff --git a/static/src/app/style/background-image.scss b/static/src/app/style/background-image.scss index be906f7..61a435c 100644 --- a/static/src/app/style/background-image.scss +++ b/static/src/app/style/background-image.scss @@ -4,8 +4,6 @@ min-height: 100vh; width: 100%; min-width: fit-content; - margin-top: -23px; - padding-top: 23px; padding-bottom: 23px; background-image: url('../../assets/bg.jpg'); background-size: cover; diff --git a/static/src/assets/icon/baseline-menu-24px.svg b/static/src/assets/icon/baseline-menu-24px.svg new file mode 100644 index 0000000..fd6e253 --- /dev/null +++ b/static/src/assets/icon/baseline-menu-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/src/styles.scss b/static/src/styles.scss index 6e15c51..378bf51 100644 --- a/static/src/styles.scss +++ b/static/src/styles.scss @@ -1,5 +1,14 @@ -body { - padding-top: 50px; +// mat-core() mixin: +@import '~@angular/material/theming'; +$custom-typography: mat-typography-config( + $font-family: 'Roboto, monospace' +); +@include mat-core($custom-typography); + +/* for sidenav to take a whole page */ +html, body { + margin: 0; + height: 100%; } .tabs-container {