-
+
-
-
-
-
-
-
diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss
index 31ab521..0a1a3e7 100644
--- a/static/src/app/app.component.scss
+++ b/static/src/app/app.component.scss
@@ -1,39 +1,15 @@
@import "style/load-indicator.scss";
-ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
-li {
+mat-sidenav-container, mat-sidenav-content, mat-sidenav {
+ height: 100vh;
display: inline;
+ background: #fdfdfd;
}
-.content {
- padding-left: 15px;
- padding-right: 15px;
-}
-
-.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;
+mat-sidenav {
+ background: #222222;
+ top: 50px;
+ width: 250px;
}
#scrollTopBtn {
@@ -42,39 +18,8 @@ li {
right: 30px;
z-index: 99;
background: rgba(16, 16, 16, 0.8);
-}
-#scrollTopBtn:hover {
- 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;
+ &:hover {
+ background: #101010;
}
}
diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts
index 701ce2b..b82c68a 100644
--- a/static/src/app/app.component.ts
+++ b/static/src/app/app.component.ts
@@ -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 {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';
+import {LoginService} from './services/app-user-service/login-service';
+import {BaseConfig, RouteConfig} from './app.config';
-declare function require(url: string);
@Component({
selector: 'app-root',
@@ -22,10 +17,6 @@ declare function require(url: string);
})
export class AppComponent implements OnInit {
- readonly features = environment.features;
-
- config = RouteConfig;
-
loading = false;
scrollTopVisible = false;
@@ -37,6 +28,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 +65,11 @@ 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 loginService: LoginService,
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 +94,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,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() {
this.loginService.logout();
setTimeout(() => {
@@ -147,16 +118,10 @@ export class AppComponent implements OnInit {
}, 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.config.ts b/static/src/app/app.config.ts
index 9f2cf84..9499120 100644
--- a/static/src/app/app.config.ts
+++ b/static/src/app/app.config.ts
@@ -1,7 +1,5 @@
export class AppConfig {
-
public readonly apiUrl = '/api';
-
public readonly apiAppUserPath = this.apiUrl + '/account/';
public readonly apiAuthenticationPath = this.apiUrl + '/authenticate';
public readonly apiAwardPath = this.apiUrl + '/awardings';
@@ -43,3 +41,15 @@ export const RouteConfig = {
rankOverviewPath: 'public/ranks',
decorationOverviewPath: 'public/decorations',
};
+
+export const BaseConfig = {
+ responsive: {
+ breakpointPx: 959,
+ },
+ i18n: {
+ availableLanguages: [
+ 'de',
+ 'en'
+ ]
+ }
+};
diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts
index d8a986e..ac162dc 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, MatMenuModule, MatSidenavModule, MatToolbarModule} from '@angular/material';
+import {FlexLayoutModule} from '@angular/flex-layout';
@NgModule({
imports: [
@@ -33,8 +34,11 @@ import {HttpGateway} from './services/http-gateway';
HttpModule,
HttpClientModule,
ClipboardModule,
- MatSnackBarModule,
- MatSelectModule,
+ MatSidenavModule,
+ MatToolbarModule,
+ MatListModule,
+ MatMenuModule,
+ 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..6097970
--- /dev/null
+++ b/static/src/app/common/navigation/navigation-header.component.html
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+
+
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..bf18115
--- /dev/null
+++ b/static/src/app/common/navigation/navigation-header.component.scss
@@ -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;
+ }
+ }
+
+}
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..ecf4dd5
--- /dev/null
+++ b/static/src/app/common/navigation/navigation-header.component.ts
@@ -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);
+ }
+ }
+}
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..9f2cd1c
--- /dev/null
+++ b/static/src/app/common/navigation/sidenav-list.component.html
@@ -0,0 +1,122 @@
+
+
+ {{'navigation.top.overview' | translate}}
+
+
+ {{'navigation.top.ranks' | translate}}
+
+
+ {{'navigation.top.decorations' | translate}}
+
+
+ {{'navigation.top.statistics' | translate}}
+
+
+
+
+ {{'navigation.top.management' | translate}}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{'navigation.top.request' | translate}}
+
+
+
+
+
+
+
+
+
+
+
+ {{'navigation.top.request.manage' | translate}}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{'navigation.top.admin' | translate}}
+
+
+
+
+
+
+
+
+
+ {{language}}
+
+
+
+
+
+
+
+
+
+
+ {{'navigation.top.logout' | translate}}
+
+
+ {{'navigation.top.login' | translate}}
+
+
+
+ {{'navigation.top.board' | translate}}
+
+
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..fb97d91
--- /dev/null
+++ b/static/src/app/common/navigation/sidenav-list.component.scss
@@ -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;
+}
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..88d8aac
--- /dev/null
+++ b/static/src/app/common/navigation/sidenav-list.component.ts
@@ -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);
+ }
+ }
+}
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/common/user-interface/search-field/search-field.component.scss b/static/src/app/common/user-interface/search-field/search-field.component.scss
index 04be8be..b010b31 100644
--- a/static/src/app/common/user-interface/search-field/search-field.component.scss
+++ b/static/src/app/common/user-interface/search-field/search-field.component.scss
@@ -2,3 +2,7 @@
width: 100%;
padding-bottom: 20px;
}
+
+input.form-control {
+ z-index: 0;
+}
diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.scss b/static/src/app/pub/decoration-overview/decoration-overview.component.scss
index eca320f..29d73fe 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.scss
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.scss
@@ -7,7 +7,12 @@ h1 {
.decoration-overview-container {
position: relative;
+ z-index: 0;
margin: auto 140px 30px;
+
+ @media all and (max-width: 959px) {
+ margin: auto;
+ }
}
:host /deep/ .mat-tab-header {
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/statistic/stats.component.html b/static/src/app/statistic/stats.component.html
index 32f2c7f..f82158e 100644
--- a/static/src/app/statistic/stats.component.html
+++ b/static/src/app/statistic/stats.component.html
@@ -12,7 +12,7 @@
[collapsed]="collapsed"
[campaign]="selectedCampaign">
-