Re-implement main navigation menu (CC-90) (#57)

pull/56/head
hardi 2019-02-25 00:16:19 +01:00 committed by Gogs
parent dfdfee44da
commit 5a3a419d73
30 changed files with 661 additions and 365 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "opt-cc", "name": "opt-cc",
"version": "1.9.2", "version": "1.9.3",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@ -3984,14 +3984,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -4006,20 +4004,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -4136,8 +4131,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -4149,7 +4143,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -4164,7 +4157,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -4172,14 +4164,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -4198,7 +4188,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -4279,8 +4268,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -4292,7 +4280,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -4414,7 +4401,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",

View File

@ -533,6 +533,14 @@
"tslib": "^1.9.0" "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": { "@angular/forms": {
"version": "6.1.10", "version": "6.1.10",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.10.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.10.tgz",
@ -4636,13 +4644,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -4655,18 +4661,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -4769,8 +4772,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -4780,7 +4782,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -4793,20 +4794,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -4823,7 +4821,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -4896,8 +4893,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -4907,7 +4903,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -5013,7 +5008,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -11767,9 +11761,9 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
}, },
"typescript": { "typescript": {
"version": "2.7.2", "version": "2.9.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
"integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==" "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w=="
}, },
"underscore": { "underscore": {
"version": "1.7.0", "version": "1.7.0",

View File

@ -22,6 +22,7 @@
"@angular/compiler": "^6.1.10", "@angular/compiler": "^6.1.10",
"@angular/compiler-cli": "^6.1.10", "@angular/compiler-cli": "^6.1.10",
"@angular/core": "^6.1.10", "@angular/core": "^6.1.10",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "^6.1.10", "@angular/forms": "^6.1.10",
"@angular/http": "^6.1.10", "@angular/http": "^6.1.10",
"@angular/material": "^6.1.10", "@angular/material": "^6.1.10",
@ -42,6 +43,7 @@
"ngx-infinite-scroll": "^7.0.1", "ngx-infinite-scroll": "^7.0.1",
"rxjs-compat": "^6.2.1", "rxjs-compat": "^6.2.1",
"ts-helpers": "^1.1.2", "ts-helpers": "^1.1.2",
"typescript": "^2.9.2",
"zone.js": "^0.8.26" "zone.js": "^0.8.26"
}, },
"devDependencies": { "devDependencies": {
@ -58,7 +60,6 @@
"protractor": "^5.4.1", "protractor": "^5.4.1",
"protractor-jasmine2-screenshot-reporter": "^0.3.2", "protractor-jasmine2-screenshot-reporter": "^0.3.2",
"ts-node": "1.2.1", "ts-node": "1.2.1",
"tslint": "^5.10.0", "tslint": "^5.10.0"
"typescript": "^2.7.2"
} }
} }

View File

@ -1,153 +1,39 @@
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" style="padding-top: 2px">
<mat-icon svgIcon="opt-logo"></mat-icon>
</a>
<span class="version-label">{{version}}</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li routerLinkActive="active">
<a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.overviewPath}}' class="link">{{'navigation.top.overview' | translate}}</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]" class="link">{{'navigation.top.ranks' | translate}}</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]" class="link">{{'navigation.top.decorations' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a>
</li>
<li *ngIf="loginService.hasPermission(2)"
class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.management' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li routerLinkActive="active">
<a routerLink='{{config.manageUserPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.manageSquadPath}}' class="link">{{'navigation.top.management.squads' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.manageDecorationPath}}' class="link">{{'navigation.top.management.decorations' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.manageRankPath}}' class="link">{{'navigation.top.management.ranks' | translate}}</a>
</li>
</ul>
</li>
<li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.request' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a routerLink="{{config.request}}/{{config.sqlDashboardPath}}">{{'navigation.top.request.open' | translate}}</a>
</li>
<li>
<a routerLink="{{config.request}}/{{config.requestPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
</li>
<li>
<a routerLink="{{config.request}}/{{config.requestAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
</li>
</ul>
</li>
<li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()" class="dropdown">
<a href="#"
[ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.request.manage' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
routerLink="{{config.request}}/{{config.confirmPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
</li>
<li>
<a [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
routerLink="{{config.request}}/{{config.confirmAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li *ngIf="loginService.hasPermission(4)"
class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.admin' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li routerLinkActive="active">
<a routerLink='{{config.adminPanelAppUsersPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>
</li>
</ul>
</li>
<li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
<a (click)="logout()">{{'navigation.top.logout' | translate}}</a>
</li>
<li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
<a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>
</li>
<li class="dropdown" *ngIf="features.localization">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="text-uppercase">{{language}}</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li *ngFor="let lang of languages" style="cursor: pointer">
<a (click)="setLanguage(lang)"><mat-icon svgIcon="flag-{{lang}}"></mat-icon></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div> <div>
<router-outlet></router-outlet> <mat-sidenav-container>
<mat-sidenav-content>
<app-header (sidenavToggle)="sidenav.toggle()"
(userLogout)="logout()">
</app-header>
</mat-sidenav-content>
<mat-sidenav #sidenav role="navigation">
<app-sidenav-list (sidenavClose)="sidenav.close()"
(userLogout)="logout()">
</app-sidenav-list>
</mat-sidenav>
</mat-sidenav-container>
<div id="left"> <div (click)="sidenav.close()">
<router-outlet name="left"></router-outlet> <router-outlet></router-outlet>
<div id="left">
<router-outlet name="left"></router-outlet>
</div>
<div id="right">
<router-outlet name="right"></router-outlet>
</div>
</div> </div>
<div id="right"> <div *ngIf="loading" class="load-indicator">
<router-outlet name="right"></router-outlet> <div class="opt-loader"></div>
<mat-icon svgIcon="opt-logo-core" class="opt-logo-core"></mat-icon>
</div> </div>
<button mat-icon-button
mat-mini-fab
id="scrollTopBtn"
*ngIf="scrollTopVisible"
matTooltip="{{'navigation.button.scroll.top' | translate}}"
(click)="scrollToTop()">
<mat-icon svgIcon="arrow-up"></mat-icon>
</button>
</div> </div>
<div *ngIf="loading" class="load-indicator">
<div class="opt-loader"></div>
<mat-icon svgIcon="opt-logo-core" class="opt-logo-core"></mat-icon>
</div>
<button mat-icon-button
mat-mini-fab
id="scrollTopBtn"
*ngIf="scrollTopVisible"
matTooltip="{{'navigation.button.scroll.top' | translate}}"
(click)="scrollToTop()">
<mat-icon svgIcon="arrow-up"></mat-icon>
</button>

View File

@ -1,39 +1,15 @@
@import "style/load-indicator.scss"; @import "style/load-indicator.scss";
ul { mat-sidenav-container, mat-sidenav-content, mat-sidenav {
list-style-type: none; height: 100vh;
margin: 0;
padding: 0;
}
li {
display: inline; display: inline;
background: #fdfdfd;
} }
.content { mat-sidenav {
padding-left: 15px; background: #222222;
padding-right: 15px; top: 50px;
} width: 250px;
.scrollable-menu {
height: auto;
max-height: 200px;
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 { #scrollTopBtn {
@ -42,39 +18,8 @@ li {
right: 30px; right: 30px;
z-index: 99; z-index: 99;
background: rgba(16, 16, 16, 0.8); background: rgba(16, 16, 16, 0.8);
}
#scrollTopBtn:hover { &:hover {
background: #101010; background: #101010;
}
.unprocessed {
-webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: color-blink;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.unprocessed-child {
background-color: orange;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
}
}
@keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
} }
} }

View File

@ -1,19 +1,14 @@
import {Component, HostListener, Inject, OnInit} from '@angular/core'; import {Component, Inject, OnInit} from '@angular/core';
import {NavigationEnd, NavigationStart, Router} from '@angular/router'; 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 {DOCUMENT} from '@angular/common';
import {DomSanitizer} from '@angular/platform-browser'; import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material'; import {MatIconRegistry} from '@angular/material';
import {SpinnerService} from './services/user-interface/spinner/spinner.service'; 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 {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
import {Observable} from 'rxjs';
import {LoginService} from './services/app-user-service/login-service';
import {BaseConfig, RouteConfig} from './app.config';
declare function require(url: string);
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -22,10 +17,6 @@ declare function require(url: string);
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
readonly features = environment.features;
config = RouteConfig;
loading = false; loading = false;
scrollTopVisible = false; scrollTopVisible = false;
@ -37,6 +28,7 @@ export class AppComponent implements OnInit {
svgIcons = { svgIcons = {
'opt-logo': 'general/opt-logo', 'opt-logo': 'general/opt-logo',
'opt-logo-core': 'general/opt-logo-core', 'opt-logo-core': 'general/opt-logo-core',
'menu': 'baseline-menu-24px',
'add': 'outline-add_box-24px', 'add': 'outline-add_box-24px',
'add-user': 'twotone-person_add-24px', 'add-user': 'twotone-person_add-24px',
'award': 'award', 'award': 'award',
@ -73,21 +65,11 @@ export class AppComponent implements OnInit {
'flag-en': 'locale/en', 'flag-en': 'locale/en',
}; };
language; constructor(private router: Router,
private loginService: LoginService,
languages = ['de', 'en'];
version = 'v'.concat(require('./../../../package.json').version);
constructor(public loginService: LoginService,
private promotionService: PromotionService,
private awardingService: AwardingService,
private router: Router,
private iconRegistry: MatIconRegistry, private iconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer, private sanitizer: DomSanitizer,
private spinnerService: SpinnerService, private spinnerService: SpinnerService,
private translate: TranslateService,
private settingsService: SettingsService,
private snackBarService: SnackBarService, private snackBarService: SnackBarService,
@Inject(DOCUMENT) private document) { @Inject(DOCUMENT) private document) {
this.initMaterialSvgIcons(); this.initMaterialSvgIcons();
@ -112,15 +94,10 @@ export class AppComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.settingsService.getLanguage().subscribe((language) => { Observable.fromEvent(this.document, 'scroll').subscribe(e => {
this.language = language; this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
this.translate.setDefaultLang(language) || 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) { toggleSpinner(active) {
@ -134,12 +111,6 @@ export class AppComponent implements OnInit {
}); });
} }
@HostListener('window:scroll', [])
onWindowScroll() {
this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
|| document.documentElement.scrollTop > this.scrollBtnVisibleVal;
}
logout() { logout() {
this.loginService.logout(); this.loginService.logout();
setTimeout(() => { setTimeout(() => {
@ -147,16 +118,10 @@ export class AppComponent implements OnInit {
}, 500); }, 500);
} }
scrollToTop() { scrollToTop() {
this.document.body.scrollTop = 0; // For Safari this.document.body.scrollTop = 0; // For Safari
this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
} }
setLanguage(language: string) {
if (language) {
this.language = language;
this.settingsService.setLanguage(language);
}
}
} }

View File

@ -1,7 +1,5 @@
export class AppConfig { export class AppConfig {
public readonly apiUrl = '/api'; public readonly apiUrl = '/api';
public readonly apiAppUserPath = this.apiUrl + '/account/'; public readonly apiAppUserPath = this.apiUrl + '/account/';
public readonly apiAuthenticationPath = this.apiUrl + '/authenticate'; public readonly apiAuthenticationPath = this.apiUrl + '/authenticate';
public readonly apiAwardPath = this.apiUrl + '/awardings'; public readonly apiAwardPath = this.apiUrl + '/awardings';
@ -43,3 +41,15 @@ export const RouteConfig = {
rankOverviewPath: 'public/ranks', rankOverviewPath: 'public/ranks',
decorationOverviewPath: 'public/decorations', decorationOverviewPath: 'public/decorations',
}; };
export const BaseConfig = {
responsive: {
breakpointPx: 959,
},
i18n: {
availableLanguages: [
'de',
'en'
]
}
};

View File

@ -20,9 +20,10 @@ import {CookieService} from 'ngx-cookie-service';
import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
import {HttpClientModule} from '@angular/common/http'; import {HttpClientModule} from '@angular/common/http';
import {SpinnerService} from './services/user-interface/spinner/spinner.service'; import {SpinnerService} from './services/user-interface/spinner/spinner.service';
import {MatSelectModule, MatSnackBarModule} from '@angular/material';
import {SettingsService} from './services/settings.service'; import {SettingsService} from './services/settings.service';
import {HttpGateway} from './services/http-gateway'; import {HttpGateway} from './services/http-gateway';
import {MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule} from '@angular/material';
import {FlexLayoutModule} from '@angular/flex-layout';
@NgModule({ @NgModule({
imports: [ imports: [
@ -33,8 +34,11 @@ import {HttpGateway} from './services/http-gateway';
HttpModule, HttpModule,
HttpClientModule, HttpClientModule,
ClipboardModule, ClipboardModule,
MatSnackBarModule, MatSidenavModule,
MatSelectModule, MatToolbarModule,
MatListModule,
MatMenuModule,
FlexLayoutModule,
], ],
providers: [ providers: [

View File

@ -4,6 +4,8 @@ import {LoginComponent, LoginGuardAdmin, LoginGuardHL, LoginGuardMT} from './log
import {armyRoutes, armyRoutingComponents} from './army/army.routing'; import {armyRoutes, armyRoutingComponents} from './army/army.routing';
import {SignupComponent} from './login/signup.component'; import {SignupComponent} from './login/signup.component';
import {RouteConfig} from './app.config'; 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 = [ export const appRoutes: Routes = [
{ {
@ -58,6 +60,7 @@ export const appRoutes: Routes = [
export const appRouting = RouterModule.forRoot(appRoutes); 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]; export const routingProviders = [LoginGuardHL, LoginGuardMT, LoginGuardAdmin];

View File

@ -0,0 +1,135 @@
<mat-toolbar color="primary">
<div fxHide.gt-sm style="position:absolute;">
<button mat-icon-button (click)="onToggleSidenav()">
<mat-icon svgIcon="menu"></mat-icon>
</button>
</div>
<div class="brand-logo">
<a href="#">
<mat-icon svgIcon="opt-logo"></mat-icon>
</a>
<span class="version-label">v{{version}}</span>
</div>
<div fxHide.lt-md>
<ul fxLayout="row" class="navigation-items">
<li routerLinkActive="active">
<a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.overviewPath}}' class="link">{{'navigation.top.overview' | translate}}</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]"
class="link">{{'navigation.top.ranks' | translate}}</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]"
class="link">{{'navigation.top.decorations' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a>
</li>
<li *ngIf="loginService.hasPermission(2)">
<mat-list-item [matMenuTriggerFor]="menuManagement">
<a matline>
{{'navigation.top.management' | translate}}
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuManagement="matMenu">
<button routerLink='{{config.manageUserPath}}' mat-menu-item>
{{'navigation.top.management.users' | translate}}
</button>
<button routerLink='{{config.manageSquadPath}}' mat-menu-item>
{{'navigation.top.management.squads' | translate}}
</button>
<button routerLink='{{config.manageDecorationPath}}' mat-menu-item>
{{'navigation.top.management.decorations' | translate}}
</button>
<button routerLink='{{config.manageRankPath}}' mat-menu-item>
{{'navigation.top.management.ranks' | translate}}
</button>
</mat-menu>
</li>
<li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()">
<mat-list-item [matMenuTriggerFor]="menuSqlRequest">
<a matline>
{{'navigation.top.request' | translate}}
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuSqlRequest="matMenu">
<button routerLink="{{config.request}}/{{config.sqlDashboardPath}}" mat-menu-item>
{{'navigation.top.request.open' | translate}}
</button>
<button routerLink="{{config.request}}/{{config.requestPromotionPath}}" mat-menu-item>
{{'navigation.top.request.promotion' | translate}}
</button>
<button routerLink="{{config.request}}/{{config.requestAwardPath}}" mat-menu-item>
{{'navigation.top.request.award' | translate}}
</button>
</mat-menu>
</li>
<li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()">
<mat-list-item [matMenuTriggerFor]="menuRequests">
<a [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
matline>
{{'navigation.top.request.manage' | translate}}
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuRequests="matMenu">
<button [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
routerLink="{{config.request}}/{{config.confirmPromotionPath}}" mat-menu-item>
{{'navigation.top.request.promotion' | translate}}
</button>
<button [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
routerLink="{{config.request}}/{{config.confirmAwardPath}}" mat-menu-item>
{{'navigation.top.request.award' | translate}}
</button>
</mat-menu>
</li>
</ul>
</div>
<div fxFlex fxLayout fxLayoutAlign="end" fxHide.lt-md>
<ul fxLayout fxLayoutGap="15px" class="navigation-items">
<li *ngIf="loginService.hasPermission(4)">
<mat-list-item [matMenuTriggerFor]="menuAdmin">
<a matline>
{{'navigation.top.admin' | translate}}
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuAdmin="matMenu">
<button routerLink='{{config.adminPanelAppUsersPath}}' mat-menu-item>
{{'navigation.top.management.users' | translate}}
</button>
</mat-menu>
</li>
<li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
<a (click)="doUserLogout()">{{'navigation.top.logout' | translate}}</a>
</li>
<li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
<a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>
</li>
<li *ngIf="features.localization">
<mat-list-item [matMenuTriggerFor]="menuLanguage">
<a class="text-uppercase" matline>
{{language}}
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuLanguage="matMenu">
<button mat-menu-item (click)="setLanguage(availableLanguages[0])">
<mat-icon svgIcon="flag-{{availableLanguages[0]}}"></mat-icon>
<span class="text-uppercase">{{availableLanguages[0]}}</span>
</button>
<button mat-menu-item (click)="setLanguage(availableLanguages[1])">
<mat-icon svgIcon="flag-{{availableLanguages[1]}}"></mat-icon>
<span class="text-uppercase">{{availableLanguages[1]}}</span>
</button>
</mat-menu>
</li>
</ul>
</div>
</mat-toolbar>

View File

@ -0,0 +1,70 @@
@import url('../../style/blink-indicator.scss');
mat-toolbar {
height: 2.5em;
min-height: 50px;
&.mat-toolbar.mat-primary {
background: #222222;
}
.navigation-items {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
height: 50px;
line-height: 46px;
padding: 0 10px;
cursor: pointer;
mat-list-item {
cursor: pointer;
}
a {
font-size: 16px;
text-decoration: none;
color: #9d9d9d;
padding: 16px 5px;
}
&:hover {
a {
color: white;
}
}
&.active {
@extend li:hover;
background: #000000;
}
}
.brand-logo {
padding-top: 6px;
margin-right: -10px;
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: 959px) {
margin: auto;
}
}
}

View File

@ -0,0 +1,66 @@
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {BaseConfig, RouteConfig} from '../../app.config';
import {environment} from '../../../environments/environment';
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 {SettingsService} from '../../services/settings.service';
import {TranslateService} from '@ngx-translate/core';
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() sidenavToggle = new EventEmitter();
@Output() userLogout = new EventEmitter();
readonly features = environment.features;
readonly availableLanguages = BaseConfig.i18n.availableLanguages;
readonly version = require('./../../../../../package.json').version;
config = RouteConfig;
language;
constructor(public loginService: LoginService,
private promotionService: PromotionService,
private awardingService: AwardingService,
private translate: TranslateService,
private settingsService: SettingsService) {
}
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();
};
public doUserLogout() {
this.userLogout.emit()
};
setLanguage(language: string) {
if (language) {
this.language = language;
this.settingsService.setLanguage(language);
}
}
}

View File

@ -0,0 +1,122 @@
<mat-nav-list>
<a mat-list-item routerLinkActive="active" routerLink='{{config.overviewPath}}' (click)="onSidenavClose()">
<span class="nav-caption">{{'navigation.top.overview' | translate}}</span>
</a>
<a mat-list-item routerLinkActive="active" [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]"
(click)="onSidenavClose()">
<span class="nav-caption">{{'navigation.top.ranks' | translate}}</span>
</a>
<a mat-list-item
routerLinkActive="active" [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]"
(click)="onSidenavClose()">
<span class="nav-caption">{{'navigation.top.decorations' | translate}}</span>
</a>
<a mat-list-item routerLinkActive="active" routerLink='{{config.statsPath}}' (click)="onSidenavClose()">
<span class="nav-caption">{{'navigation.top.statistics' | translate}}</span>
</a>
<mat-list-item *ngIf="loginService.hasPermission(2)"
[matMenuTriggerFor]="menuManagement">
<a matline>
<span class="nav-caption">{{'navigation.top.management' | translate}}</span>
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuManagement="matMenu">
<button routerLink='{{config.manageUserPath}}' mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.management.users' | translate}}
</button>
<button routerLink='{{config.manageSquadPath}}' mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.management.squads' | translate}}
</button>
<button routerLink='{{config.manageDecorationPath}}' mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.management.decorations' | translate}}
</button>
<button routerLink='{{config.manageRankPath}}' mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.management.ranks' | translate}}
</button>
</mat-menu>
<mat-list-item *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
[matMenuTriggerFor]="menuSqlRequest">
<a matline>
<span class="nav-caption">{{'navigation.top.request' | translate}}</span>
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuSqlRequest="matMenu">
<button routerLink="{{config.request}}/{{config.sqlDashboardPath}}" mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.request.open' | translate}}
</button>
<button routerLink="{{config.request}}/{{config.requestPromotionPath}}" mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.request.promotion' | translate}}
</button>
<button routerLink="{{config.request}}/{{config.requestAwardPath}}" mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.request.award' | translate}}
</button>
</mat-menu>
<mat-list-item *ngIf="loginService.hasPermission(2) && loginService.hasSquad()"
[ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
[matMenuTriggerFor]="menuRequests">
<a matline>
<span class="nav-caption">{{'navigation.top.request.manage' | translate}}</span>
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuRequests="matMenu">
<button [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
routerLink="{{config.request}}/{{config.confirmPromotionPath}}" mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.request.promotion' | translate}}
</button>
<button [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
routerLink="{{config.request}}/{{config.confirmAwardPath}}" mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.request.award' | translate}}
</button>
</mat-menu>
<mat-divider></mat-divider>
<mat-list-item *ngIf="loginService.hasPermission(4)" [matMenuTriggerFor]="menuAdmin">
<a matline>
<span class="nav-caption">{{'navigation.top.admin' | translate}}</span>
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuAdmin="matMenu">
<button routerLink='{{config.adminPanelAppUsersPath}}' mat-menu-item (click)="onSidenavClose()">
{{'navigation.top.management.users' | translate}}
</button>
</mat-menu>
<mat-list-item *ngIf="features.localization" [matMenuTriggerFor]="menuLanguage">
<a class="text-uppercase" matline>
<span class="nav-caption">{{language}}</span>
<span class="caret"></span>
</a>
</mat-list-item>
<mat-menu #menuLanguage="matMenu">
<button mat-menu-item (click)="setLanguage(availableLanguages[0])">
<mat-icon svgIcon="flag-{{availableLanguages[0]}}"></mat-icon>
<span class="text-uppercase">{{availableLanguages[0]}}</span>
</button>
<button mat-menu-item (click)="setLanguage(availableLanguages[1])">
<mat-icon svgIcon="flag-{{availableLanguages[1]}}"></mat-icon>
<span class="text-uppercase">{{availableLanguages[1]}}</span>
</button>
</mat-menu>
<a mat-list-item *ngIf="loginService.isLoggedIn()"
(click)="doUserLogout(); onSidenavClose()">
<span class="nav-caption">{{'navigation.top.logout' | translate}}</span>
</a>
<a mat-list-item *ngIf="!loginService.isLoggedIn()"
routerLinkActive="active" routerLink='{{config.loginPath}}' (click)="onSidenavClose()">
<span class="nav-caption">{{'navigation.top.login' | translate}}</span>
</a>
<a mat-list-item href="https://www.opt4.net/dashboard">
<span class="nav-caption">{{'navigation.top.board' | translate}}</span>
</a>
</mat-nav-list>

View File

@ -0,0 +1,25 @@
@import url('../../style/blink-indicator.scss');
mat-list-item.mat-list-item, a.mat-list-item {
font-size: 16px;
text-decoration: none;
color: #9d9d9d;
&.active {
background: #000000;
}
&:hover, &.active {
color: #ffffff;
}
}
.nav-caption {
display: inline-block;
padding-left: 6px;
}
mat-divider {
margin: 15% 0;
border-color: #9d9d9d;
}

View File

@ -0,0 +1,57 @@
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {BaseConfig, RouteConfig} from '../../app.config';
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 {environment} from '../../../environments/environment';
import {TranslateService} from '@ngx-translate/core';
import {SettingsService} from '../../services/settings.service';
@Component({
selector: 'app-sidenav-list',
templateUrl: './sidenav-list.component.html',
styleUrls: ['./sidenav-list.component.scss']
})
export class SidenavListComponent implements OnInit {
@Output() sidenavClose = new EventEmitter();
@Output() userLogout = new EventEmitter();
readonly features = environment.features;
readonly availableLanguages = BaseConfig.i18n.availableLanguages;
config = RouteConfig;
language;
constructor(public loginService: LoginService,
public promotionService: PromotionService,
public awardingService: AwardingService,
private translate: TranslateService,
private settingsService: SettingsService) {
}
ngOnInit() {
this.settingsService.getLanguage().subscribe((language) => {
this.language = language;
this.translate.setDefaultLang(language)
});
}
public onSidenavClose() {
this.sidenavClose.emit();
};
public doUserLogout() {
this.userLogout.emit()
};
setLanguage(language: string) {
if (language) {
this.language = language;
this.settingsService.setLanguage(language);
}
}
}

View File

@ -1,16 +1,9 @@
import {Component, OnInit} from '@angular/core'; import {Component} from '@angular/core';
@Component({ @Component({
selector: 'app-not-found', selector: 'app-not-found',
templateUrl: 'not-found.component.html', templateUrl: 'not-found.component.html',
styleUrls: ['not-found.component.scss'] styleUrls: ['not-found.component.scss']
}) })
export class NotFoundComponent implements OnInit { export class NotFoundComponent {
constructor() {
}
ngOnInit() {
}
} }

View File

@ -2,3 +2,7 @@
width: 100%; width: 100%;
padding-bottom: 20px; padding-bottom: 20px;
} }
input.form-control {
z-index: 0;
}

View File

@ -7,7 +7,12 @@ h1 {
.decoration-overview-container { .decoration-overview-container {
position: relative; position: relative;
z-index: 0;
margin: auto 140px 30px; margin: auto 140px 30px;
@media all and (max-width: 959px) {
margin: auto;
}
} }
:host /deep/ .mat-tab-header { :host /deep/ .mat-tab-header {

View File

@ -4,8 +4,10 @@ import {ShowErrorComponent} from './common/show-error/show-error.component';
import {CommonModule} from '@angular/common'; import {CommonModule} from '@angular/common';
import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component'; import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component';
import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component'; import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component';
import {MatButtonToggleModule, MatTooltipModule, MatSlideToggleModule, MatFormFieldModule, MatOptionModule, MatSelectModule, import {
MatInputModule} from '@angular/material'; MatButtonToggleModule, MatTooltipModule, MatSlideToggleModule, MatFormFieldModule, MatOptionModule, MatSelectModule,
MatInputModule, MatSidenavModule, MatSnackBarModule
} from '@angular/material';
import {MatButtonModule} from '@angular/material/button'; import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
@ -35,6 +37,7 @@ export function createTranslateLoader(http: HttpClient) {
MatFormFieldModule, MatFormFieldModule,
MatOptionModule, MatOptionModule,
MatSelectModule, MatSelectModule,
MatSnackBarModule,
MatInputModule, MatInputModule,
TranslateModule.forRoot({ TranslateModule.forRoot({

View File

@ -12,7 +12,7 @@
[collapsed]="collapsed" [collapsed]="collapsed"
[campaign]="selectedCampaign"> [campaign]="selectedCampaign">
</war-list> </war-list>
<div class="button-container"> <div class="button-container" *ngIf="collapseBtnVisible">
<button mat-icon-button <button mat-icon-button
class="sidebar-toggle-btn" class="sidebar-toggle-btn"
(click)="toggleCollapse()"> (click)="toggleCollapse()">

View File

@ -5,7 +5,8 @@ import {ActivatedRoute, Router} from '@angular/router';
import {TranslateService} from '@ngx-translate/core'; import {TranslateService} from '@ngx-translate/core';
import {SettingsService} from '../services/settings.service'; import {SettingsService} from '../services/settings.service';
import {WarService} from '../services/logs/war.service'; import {WarService} from '../services/logs/war.service';
import {UIHelpers} from '../utils/global.helpers'; import {Observable} from 'rxjs';
import {BaseConfig} from '../app.config';
@Component({ @Component({
selector: 'cc-stats', selector: 'cc-stats',
@ -20,6 +21,8 @@ export class StatisticComponent implements OnInit {
collapsed = false; collapsed = false;
collapseBtnVisible = true;
constructor(private campaignService: CampaignService, constructor(private campaignService: CampaignService,
private warService: WarService, private warService: WarService,
private router: Router, private router: Router,
@ -27,7 +30,6 @@ export class StatisticComponent implements OnInit {
private translate: TranslateService, private translate: TranslateService,
private settingsService: SettingsService) { private settingsService: SettingsService) {
this.settingsService.getLanguage().subscribe((language) => this.translate.setDefaultLang(language)); this.settingsService.getLanguage().subscribe((language) => this.translate.setDefaultLang(language));
this.collapsed = UIHelpers.isMobileDevice();
} }
ngOnInit() { ngOnInit() {
@ -37,6 +39,15 @@ export class StatisticComponent implements OnInit {
this.campaigns = campaigns; this.campaigns = campaigns;
this.resolveCampaignFromUrl(); this.resolveCampaignFromUrl();
}); });
Observable.fromEvent(window, 'resize').subscribe(event => {
if (event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx) {
this.collapsed = true;
this.collapseBtnVisible = false;
} else {
this.collapseBtnVisible = true;
}
});
} }
resolveCampaignFromUrl() { resolveCampaignFromUrl() {

View File

@ -2,7 +2,7 @@
<div class="war-item-box" <div class="war-item-box"
[matTooltip]="collapsed ? war.title : ''" [matTooltip]="collapsed ? war.title : ''"
matTooltipPosition="right"> matTooltipPosition="right">
<div style="position:relative; z-index:10;"> <div style="position:relative;">
<div class="select-indicator-battle"></div> <div class="select-indicator-battle"></div>
</div> </div>
<span class="war-title" <span class="war-title"

View File

@ -47,8 +47,7 @@
[selected]="war._id == selectedWarId"> [selected]="war._id == selectedWarId">
</cc-war-item> </cc-war-item>
</div> </div>
</div> <div class="fill-vertical-border"
[ngClass]="{collapsed: collapsed}">
<div class="fill-vertical-border" </div>
[ngClass]="{collapsed: collapsed}">
</div> </div>

View File

@ -33,7 +33,6 @@
.select-indicator-container { .select-indicator-container {
display: none; display: none;
position: relative; position: relative;
z-index: 10;
} }
.select-indicator { .select-indicator {
@ -88,9 +87,6 @@
} }
.fill-vertical-border { .fill-vertical-border {
width: 20%;
top: 0;
z-index: -20;
position: fixed; position: fixed;
border-right: 1px solid #dadada; border-right: 1px solid #dadada;
height: 100vh; height: 100vh;

View File

@ -4,8 +4,6 @@
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
min-width: fit-content; min-width: fit-content;
margin-top: -23px;
padding-top: 23px;
padding-bottom: 23px; padding-bottom: 23px;
background-image: url('../../assets/bg.jpg'); background-image: url('../../assets/bg.jpg');
background-size: cover; background-size: cover;

View File

@ -0,0 +1,30 @@
.unprocessed {
-webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: color-blink;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.unprocessed-child {
background-color: orange;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
}
}
@keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
}
}

View File

@ -21,30 +21,4 @@ export const UIHelpers = {
} }
return currentVal; return currentVal;
}, },
isMobileDevice: (): boolean => {
const exp1 = new RegExp('(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|' +
'fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|' +
'palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|' +
'windows (ce|phone)|xda|xiino', 'i');
const exp2 = new RegExp('1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)' +
'|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl' +
'(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|db' +
'te|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly' +
'(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|' +
'hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno' +
'|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|' +
'50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo' +
'(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)' +
'|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))' +
'|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r6' +
'00|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh' +
'\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(0' +
'0|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|uts' +
't|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|web' +
'c|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-', 'i');
return exp1.test(navigator.userAgent) || exp2.test(navigator.userAgent.substr(0, 4));
}
}; };

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

After

Width:  |  Height:  |  Size: 183 B

View File

@ -1,5 +1,14 @@
body { // mat-core() mixin:
padding-top: 50px; @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 { .tabs-container {
@ -39,12 +48,16 @@ form {
#left { #left {
max-width: 20%; max-width: 20%;
min-width: min-content; min-width: 345px;
margin: 0; margin: 0;
position: static; position: static;
float: left; float: left;
border-right: thin solid #dadada; border-right: thin solid #dadada;
box-shadow: #dadada 1px 1px 6px; box-shadow: #dadada 1px 1px 6px;
@media all and (max-width: 599px) {
// TODO
}
} }
#right { #right {