use sass magic

static/src/app/app.component.html

@@ -1,10 +1,14 @@
 <div>
   <mat-sidenav-container>
     <mat-sidenav-content>
-      <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
+      <app-header (sidenavToggle)="sidenav.toggle()"
+                  (userLogout)="logout()">
+      </app-header>
     </mat-sidenav-content>
     <mat-sidenav #sidenav role="navigation">
-      <app-sidenav-list (sidenavClose)="sidenav.close()"></app-sidenav-list>
+      <app-sidenav-list (sidenavClose)="sidenav.close()"
+                        (userLogout)="logout()">
+      </app-sidenav-list>
     </mat-sidenav>
   </mat-sidenav-container>
 

static/src/app/app.component.ts

@@ -6,6 +6,8 @@ import {MatIconRegistry} from '@angular/material';
 import {SpinnerService} from './services/user-interface/spinner/spinner.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';
 
 
 @Component({
@@ -64,6 +66,7 @@ export class AppComponent implements OnInit {
   };
 
   constructor(private router: Router,
+              private loginService: LoginService,
               private iconRegistry: MatIconRegistry,
               private sanitizer: DomSanitizer,
               private spinnerService: SpinnerService,
@@ -108,6 +111,14 @@ export class AppComponent implements OnInit {
     });
   }
 
+  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

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';
@@ -44,6 +42,14 @@ export const RouteConfig = {
   decorationOverviewPath: 'public/decorations',
 };
 
-export const ResponsiveConfig = {
-  breakpointPx: 959,
+export const BaseConfig = {
+  responsive: {
+    breakpointPx: 959,
+  },
+  i18n: {
+    availableLanguages: [
+      'de',
+      'en'
+    ]
+  }
 };

static/src/app/common/navigation/navigation-header.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="primary">
-  <div fxHide.gt-sm>
+  <div fxHide.gt-sm style="position:absolute;">
     <button mat-icon-button (click)="onToggleSidenav()">
       <mat-icon svgIcon="menu"></mat-icon>
     </button>
@@ -11,7 +11,7 @@
     <span class="version-label">v{{version}}</span>
   </div>
   <div fxHide.lt-md>
-    <ul fxLayout="row" fxLayoutGap="15px" class="navigation-items">
+    <ul fxLayout="row" class="navigation-items">
       <li routerLinkActive="active">
         <a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
       </li>
@@ -107,7 +107,7 @@
         </mat-menu>
       </li>
       <li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
-        <a (click)="logout()">{{'navigation.top.logout' | translate}}</a>
+        <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>
@@ -120,13 +120,13 @@
           </a>
         </mat-list-item>
         <mat-menu #menuLanguage="matMenu">
-          <button mat-menu-item (click)="setLanguage(languages[0])">
-            <mat-icon svgIcon="flag-{{languages[0]}}"></mat-icon>
-            <span class="text-uppercase">{{languages[0]}}</span>
+          <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(languages[1])">
-            <mat-icon svgIcon="flag-{{languages[1]}}"></mat-icon>
-            <span class="text-uppercase">{{languages[1]}}</span>
+          <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>

static/src/app/common/navigation/navigation-header.component.scss

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

static/src/app/common/navigation/navigation-header.component.ts

@@ -1,8 +1,7 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {RouteConfig} from '../../app.config';
+import {BaseConfig, 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';
@@ -17,20 +16,21 @@ declare function require(url: string);
 })
 export class NavigationHeaderComponent implements OnInit {
 
-  @Output() public sidenavToggle = new EventEmitter();
+  @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;
 
-  languages = ['de', 'en'];
-
-  version = require('./../../../../../package.json').version;
-
   constructor(public loginService: LoginService,
-              private router: Router,
               private promotionService: PromotionService,
               private awardingService: AwardingService,
               private translate: TranslateService,
@@ -49,21 +49,18 @@ export class NavigationHeaderComponent implements OnInit {
     }
   }
 
-  public onToggleSidenav = () => {
+  public onToggleSidenav() {
     this.sidenavToggle.emit();
   };
 
+  public doUserLogout() {
+    this.userLogout.emit()
+  };
+
   setLanguage(language: string) {
     if (language) {
       this.language = language;
       this.settingsService.setLanguage(language);
     }
   }
-
-  logout() {
-    this.loginService.logout();
-    setTimeout(() => {
-      this.router.navigate([RouteConfig.overviewPath]);
-    }, 500);
-  }
 }

static/src/app/common/navigation/sidenav-list.component.html

@@ -96,23 +96,23 @@
     </a>
   </mat-list-item>
   <mat-menu #menuLanguage="matMenu">
-    <button mat-menu-item (click)="setLanguage(languages[0])">
-      <mat-icon svgIcon="flag-{{languages[0]}}"></mat-icon>
-      <span class="text-uppercase">{{languages[0]}}</span>
+    <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(languages[1])">
-      <mat-icon svgIcon="flag-{{languages[1]}}"></mat-icon>
-      <span class="text-uppercase">{{languages[1]}}</span>
+    <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)="logout(); onSidenavClose()">
+    (click)="doUserLogout(); onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.logout' | translate}}</span>
   </a>
   <a mat-list-item *ngIf="!loginService.isLoggedIn()"
-    routerLink='{{config.loginPath}}' (click)="onSidenavClose()">
+     routerLinkActive="active" routerLink='{{config.loginPath}}' (click)="onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.login' | translate}}</span>
   </a>
 

static/src/app/common/navigation/sidenav-list.component.scss

@@ -1,8 +1,14 @@
+@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;
   }
@@ -17,34 +23,3 @@ mat-divider {
   margin: 15% 0;
   border-color: #9d9d9d;
 }
-
-.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;
-  }
-}

static/src/app/common/navigation/sidenav-list.component.ts

@@ -1,12 +1,11 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {RouteConfig} from '../../app.config';
+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';
-import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-sidenav-list',
@@ -17,18 +16,19 @@ 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;
 
-  languages = ['de', 'en'];
-
   constructor(public loginService: LoginService,
-              private router: Router,
-              private promotionService: PromotionService,
-              private awardingService: AwardingService,
+              public promotionService: PromotionService,
+              public awardingService: AwardingService,
               private translate: TranslateService,
               private settingsService: SettingsService) {
   }
@@ -40,21 +40,18 @@ export class SidenavListComponent implements OnInit {
     });
   }
 
-  public onSidenavClose = () => {
+  public onSidenavClose() {
     this.sidenavClose.emit();
   };
 
+  public doUserLogout() {
+    this.userLogout.emit()
+  };
+
   setLanguage(language: string) {
     if (language) {
       this.language = language;
       this.settingsService.setLanguage(language);
     }
   }
-
-  logout() {
-    this.loginService.logout();
-    setTimeout(() => {
-      this.router.navigate([RouteConfig.overviewPath]);
-    }, 500);
-  }
 }

static/src/app/statistic/stats.component.ts

@@ -5,9 +5,8 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {TranslateService} from '@ngx-translate/core';
 import {SettingsService} from '../services/settings.service';
 import {WarService} from '../services/logs/war.service';
-import {UIHelpers} from '../utils/global.helpers';
 import {Observable} from 'rxjs';
-import {ResponsiveConfig} from '../app.config';
+import {BaseConfig} from '../app.config';
 
 @Component({
   selector: 'cc-stats',
@@ -31,25 +30,24 @@ export class StatisticComponent implements OnInit {
               private translate: TranslateService,
               private settingsService: SettingsService) {
     this.settingsService.getLanguage().subscribe((language) => this.translate.setDefaultLang(language));
-    this.collapsed = UIHelpers.isMobileDevice();
   }
 
   ngOnInit() {
-    Observable.fromEvent(window, 'resize').subscribe(event => {
-      if (event.target['innerWidth'] <= ResponsiveConfig.breakpointPx) {
-        this.collapsed = true;
-        this.collapseBtnVisible = false;
-      } else {
-        this.collapseBtnVisible = true;
-      }
-    });
-
     this.campaignService.getAllCampaigns()
         .filter(campaigns => campaigns.length !== 0)
         .subscribe((campaigns) => {
           this.campaigns = campaigns;
           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() {

static/src/app/style/blink-indicator.scss

@@ -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;
+  }
+}

static/src/app/utils/global.helpers.ts

@@ -21,30 +21,4 @@ export const UIHelpers = {
     }
     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));
-  }
 };