static/src/app/app.component.css

@@ -8,13 +8,6 @@ li {
   display: inline;
 }
 
-.sidebar-toggle-btn {
-  background: linear-gradient(-90deg, #e8e5e5, #ffffff);
-  filter: drop-shadow(2px 1px 1px #666);
-  margin-left: -12px;
-  z-index: 500;
-}
-
 .content {
   padding-left: 15px;
   padding-right: 15px;

static/src/app/app.component.html

@@ -96,19 +96,16 @@
 
 <div>
   <button mat-icon-button
-          class="sidebar-toggle-btn"
           (click)="toggleSidebar()"
-          *ngIf="showSidebarToggleBtn">
+          *ngIf="router.url.includes('/stats')"
+          style="background: linear-gradient(-90deg, #e8e5e5,#ffffff);margin-left: -12px;">
     <mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">
     </mat-icon>
     <mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">
     </mat-icon>
   </button>
 
-  <div id="left"
+  <div id="left" *ngIf="sidebarOpen">
-       [style.background]="leftBackground"
-       [style.box-shadow]="leftBoxShadow"
-       *ngIf="sidebarOpen">
     <router-outlet></router-outlet>
   </div>
 
@@ -121,6 +118,6 @@
   </div>
 </div>
 
-<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
+<mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner>
 
 <button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</button>

static/src/app/app.component.ts

@@ -7,7 +7,6 @@ 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';
 
 declare function require(url: string);
 
@@ -24,28 +23,10 @@ export class AppComponent implements OnInit {
 
   sidebarOpen = true;
 
-  showSidebarToggleBtn = false;
-
   scrollTopVisible = false;
 
   scrollBtnVisibleVal = 100;
 
-  leftBackground;
-
-  leftBoxShadow;
-
-  // a map of svgIcon names and associated svg file names
-  // to load from assets/icon folder
-  svgIcons = {
-    'add': 'outline-add_box-24px',
-    'add-user': 'twotone-person_add-24px',
-    'edit': 'twotone-edit-24px',
-    'delete': 'twotone-delete-24px',
-    'stats-detail': 'round-assessment-24px',
-    'chevron-left': 'baseline-chevron_left-24px',
-    'chevron-right': 'baseline-chevron_right-24px'
-  };
-
   version = 'v'.concat(require('./../../../package.json').version);
 
   constructor(public loginService: LoginService,
@@ -54,56 +35,36 @@ export class AppComponent implements OnInit {
               private router: Router,
               private iconRegistry: MatIconRegistry,
               private sanitizer: DomSanitizer,
-              private spinnerService: SpinnerService,
               @Inject(DOCUMENT) private document) {
-    this.initMaterialSvgIcons();
+    this.iconRegistry.addSvgIcon('add',
-
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/outline-add_box-24px.svg'));
-    this.spinnerService.spinnerActive.subscribe(active => this.toggleSpinner(active));
+    this.iconRegistry.addSvgIcon('add-user',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-person_add-24px.svg'));
+    this.iconRegistry.addSvgIcon('edit',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-edit-24px.svg'));
+    this.iconRegistry.addSvgIcon('delete',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-delete-24px.svg'));
+    this.iconRegistry.addSvgIcon('stats-detail',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/round-assessment-24px.svg'));
+    this.iconRegistry.addSvgIcon('chevron-left',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/baseline-chevron_left-24px.svg'));
+    this.iconRegistry.addSvgIcon('chevron-right',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/baseline-chevron_right-24px.svg'));
 
     router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
-        this.spinnerService.activate();
+        this.loading = true;
       }
       if (event instanceof NavigationEnd) {
-        this.spinnerService.deactivate();
+        this.loading = false;
-        const currentUrl = this.router.url;
-
         // scroll to top on route from army overview to user detail and back
-        if (currentUrl.includes('/overview')) {
+        if (router.url.includes('overview')) {
           this.scrollToTop();
         }
-
-        // show sidebar menu on initial page access
-        this.sidebarOpen = true;
-        this.showSidebarToggleBtn = currentUrl.includes('/stats');
-
-        // remove sidebar styling for components that are rendered inside,
-        // but not really shown as sidebar (legacy)
-        if (currentUrl.includes('/login') ||
-          currentUrl.includes('/signup') ||
-          currentUrl.endsWith('/404')) {
-          this.leftBackground = 'none';
-          this.leftBoxShadow = 'none';
-        } else {
-          this.leftBackground = '#f9f9f9';
-          this.leftBoxShadow = '2px 1px 5px grey';
-        }
       }
     });
   }
 
-  toggleSpinner(active) {
-    this.loading = active;
-  }
-
-  initMaterialSvgIcons() {
-    Object.keys(this.svgIcons).forEach(key => {
-      const fileUri = '../assets/icon/'.concat(this.svgIcons[key])
-                                       .concat('.svg');
-      this.iconRegistry.addSvgIcon(key, this.sanitizer.bypassSecurityTrustResourceUrl(fileUri));
-    });
-  }
-
   @HostListener('window:scroll', [])
   onWindowScroll() {
     this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
@@ -127,14 +88,14 @@ export class AppComponent implements OnInit {
 
   logout() {
     this.loginService.logout();
-    setTimeout(() => {
+    this.router.navigate([RouteConfig.overviewPath]);
-      this.router.navigate([RouteConfig.overviewPath]);
+    return false;
-    }, 500);
   }
 
   scrollToTop() {
     this.document.body.scrollTop = 0; // For Safari
     this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
   }
+
 }
 

static/src/app/app.module.ts

@@ -23,13 +23,12 @@ import {UserService} from './services/army-management/user.service';
 import {UserStore} from './services/stores/user.store';
 import {CookieService} from 'ngx-cookie-service';
 import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
+import {MaterialComponentsModule} from './material-components.module';
 import {HttpClientModule} from '@angular/common/http';
-import {SpinnerService} from './services/user-interface/spinner/spinner.service';
-import {MatSnackBarModule} from '@angular/material';
 
 @NgModule({
   imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule,
-    ClipboardModule, MatSnackBarModule],
+    ClipboardModule, MaterialComponentsModule],
   providers: [
     HttpClient,
     LoginService,
@@ -50,8 +49,7 @@ import {MatSnackBarModule} from '@angular/material';
     AppConfig,
     routingProviders,
     CookieService,
-    SnackBarService,
+    SnackBarService
-    SpinnerService
   ],
   declarations: [
     AppComponent,

static/src/app/decorations/edit-decoration/edit-decoration.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
+<form #form="ngForm" class="overview">
   <h3 *ngIf="decoration._id">Auszeichnung editieren</h3>
   <h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3>
 
@@ -70,7 +70,6 @@
   </button>
 
   <button id="save"
-          type="submit"
           (click)="saveDecoration(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">

static/src/app/login/login.component.html

@@ -15,6 +15,10 @@
         <span *ngIf="!loading">Anmelden</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
+      <span *ngIf="showErrorLabel"
+            class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
+        {{error}}
+      </span>
     </div>
 
 

static/src/app/login/login.component.ts

@@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {LoginService} from '../services/app-user-service/login-service';
 import {RouteConfig} from '../app.config';
-import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -13,13 +12,16 @@ import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.se
 
 export class LoginComponent implements OnInit {
 
+  showErrorLabel = false;
+
+  error: string;
+
   loading = false;
 
   returnUrl: string;
 
   constructor(private router: Router,
-              private loginService: LoginService,
+              private loginService: LoginService) {
-              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -38,7 +40,11 @@ export class LoginComponent implements OnInit {
               this.router.navigate([this.returnUrl]);
             },
             error => {
-              this.snackBarService.showError(error._body, 15000);
+              this.error = error._body;
+              this.showErrorLabel = true;
+              setTimeout(() => {
+                this.showErrorLabel = false;
+              }, 4000);
               this.loading = false;
             });
     }

static/src/app/login/signup.component.html

@@ -1,11 +1,11 @@
 <form class="form-signin" (ngSubmit)="login(userName.value, password.value, secret.value)">
 
-  <div class="row" style="position: absolute;width: 500px;left: 40%;">
+  <div class="row">
     <h2 style="text-align: center;" class="form-signin-heading">Registrieren</h2>
 
     <p>Dieses Formular nur ausfüllen wenn du einer <b>HL</b> angehörst oder <b>SQL</b> bist. Dabei den Nutzernamen aus
       dem OPT Forum verwenden!
-      Im Forum eine Nachricht an <a href="https://www.opt4.net/dashboard/index.php?conversation-add/&userID=9"
+      Im Forum eine Nachricht an <a href="https://operation-pandora.com/dashboard/index.php?conversation-add/&userID=9"
                                     target="_blank">HardiReady</a>
       senden, in welcher der 'geheime Text' steht, den du bei der Registrierung nutzt.<br>
       Dabei kann es sich um irgend eine willkürliche Zeichenfolge oder einen Satz handeln - dient nur dem Abgleich.

static/src/app/material-components.module.ts

@@ -0,0 +1,20 @@
+/**
+ * Angular material imports
+ */
+
+import {NgModule} from '@angular/core';
+import {MatProgressSpinnerModule, MatSnackBarModule} from '@angular/material';
+
+@NgModule({
+  imports: [
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+  ],
+  exports: [
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+  ]
+})
+
+export class MaterialComponentsModule {
+}

static/src/app/ranks/edit-rank/edit-rank.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
+<form #form="ngForm" class="overview">
   <h3 *ngIf="rank._id">Rang editieren</h3>
   <h3 *ngIf="!rank._id">Neuen Rang hinzufügen</h3>
 
@@ -51,7 +51,6 @@
   </button>
 
   <button id="save"
-          type="submit"
           (click)="saveRank(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">

static/src/app/services/user-interface/spinner/spinner.service.ts

@@ -1,19 +0,0 @@
-import {EventEmitter, Injectable} from '@angular/core';
-
-@Injectable()
-export class SpinnerService {
-
-  public spinnerActive: EventEmitter<Boolean>;
-
-  constructor() {
-    this.spinnerActive = new EventEmitter();
-  }
-
-  activate() {
-    this.spinnerActive.emit(true)
-  }
-
-  deactivate() {
-    this.spinnerActive.emit(false)
-  }
-}

static/src/app/squads/edit-squad/edit-squad.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
+<form #form="ngForm" class="overview">
   <h3 *ngIf="squad._id">Squad editieren</h3>
   <h3 *ngIf="!squad._id">Neues Squad hinzufügen</h3>
 
@@ -51,7 +51,6 @@
   </button>
 
   <button id="save"
-          type="submit"
           (click)="saveSquad(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">

static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
+<form #form="ngForm" class="overview">
   <h3 *ngIf="campaign._id">Kampagne editieren</h3>
   <h3 *ngIf="!campaign._id">Neue Kampagne hinzufügen</h3>
 
@@ -20,10 +20,15 @@
   </button>
 
   <button id="save"
-          type="submit"
           (click)="saveCampaign()"
           class="btn btn-default"
           [disabled]="!form.valid">
     Bestätigen
   </button>
+
+  <span *ngIf="showErrorLabel"
+        class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
+        {{error}}
+      </span>
+
 </form>

static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts

@@ -4,8 +4,6 @@ import {NgForm} from '@angular/forms';
 import {Subscription} from 'rxjs/Subscription';
 import {Campaign} from '../../../models/model-interfaces';
 import {CampaignService} from '../../../services/logs/campaign.service';
-import {Message} from '../../../i18n/de.messages';
-import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -17,21 +15,24 @@ export class CampaignSubmitComponent {
 
   campaign: Campaign = {};
 
+  showErrorLabel = false;
+
+  error;
+
   subscription: Subscription;
 
   @ViewChild(NgForm) form: NgForm;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private campaignService: CampaignService,
+              private campaignService: CampaignService) {
-              private snackBarService: SnackBarService) {
     this.subscription = this.route.params
-                            .map(params => params['id'])
+      .map(params => params['id'])
-                            .filter(id => id !== undefined)
+      .filter(id => id !== undefined)
-                            .flatMap(id => this.campaignService.getCampaign(id))
+      .flatMap(id => this.campaignService.getCampaign(id))
-                            .subscribe(campaign => {
+      .subscribe(campaign => {
-                              this.campaign = campaign;
+        this.campaign = campaign;
-                            });
+      });
   }
 
   saveCampaign() {
@@ -41,10 +42,12 @@ export class CampaignSubmitComponent {
             if (this.campaign._id) {
               redirectSuccessUrl = '../' + redirectSuccessUrl;
             }
-            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
             this.router.navigate([redirectSuccessUrl + campaign._id], {relativeTo: this.route});
           },
-          error => this.snackBarService.showError(error._body.error.message, 15000));
+          error => {
+            this.error = error._body.error.message;
+            this.showErrorLabel = true;
+          });
   }
 
   cancel() {

static/src/app/statistic/war/scoreboard/scoreboard.component.css

@@ -3,21 +3,7 @@
   width:fit-content;
   border: 1px solid #dadada;
   overflow-x: auto;
-  margin: auto;
+  margin:auto;
-  margin-top: 56px;
-}
-
-:host /deep/ table.mat-table > thead {
-  position: absolute;
-  width: 977px;
-  display: inherit;
-  margin-left: -1px;
-  margin-top: -57px;
-  border: 1px solid #dadada;
-}
-
-:host /deep/ table.mat-table > tbody {
-  margin-top: 0 !important;
 }
 
 .in-table-btn {
@@ -25,10 +11,20 @@
   margin-top: -5px;
 }
 
+/* MATERIAL TABLE */
+table.mat-table {
+  margin: auto;
+}
+
 table.mat-table img {
   filter: invert(60%);
 }
 
+:host /deep/ table.mat-table > thead {
+  position: absolute;
+  display: inherit;
+}
+
 :host /deep/ table.mat-table > tbody {
   margin-top: 60px;
   display: block;
@@ -41,14 +37,22 @@ table.mat-table img {
   width: 90px;
 }
 
-.mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch, .mat-column-vehicleLight,
+.mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch,
-.mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn, .mat-column-interact {
+.mat-column-vehicleLight, .mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn {
   width: 67px;
   text-indent: 9px;
 }
 
-td.mat-cell:last-child, td.mat-footer-cell:last-child, th.mat-header-cell:last-child {
+th.mat-column-interact {
-  padding-right: 0;
+  padding-left: 36px;
+  background: white;
+  position: relative;
+  z-index: 100;
+}
+
+/* TABLE SCROLLBAR */
+div::-webkit-scrollbar-thumb {
+  border-top: solid white 56px;
 }
 
 /* MAT ICON BUTTON */

static/src/app/statistic/war/scoreboard/scoreboard.component.html

@@ -29,7 +29,7 @@
     </ng-container>
 
     <ng-container matColumnDef="interact">
-      <th mat-header-cell *matHeaderCellDef></th>
+      <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
       <td mat-cell *matCellDef="let element">
         <button mat-icon-button
                 matTooltip="Kampagnenstatistik für {{element.name}}"

static/src/app/statistic/war/scoreboard/scoreboard.component.ts

@@ -113,11 +113,11 @@ export class ScoreboardComponent implements OnChanges {
       csvOut += player.fraction + ',';
       csvOut += player.kill + ',';
       csvOut += player.friendlyFire + ',';
-      csvOut += player.revive + ',';
-      csvOut += player.flagTouch + ',';
       csvOut += player.vehicleLight + ',';
       csvOut += player.vehicleHeavy + ',';
       csvOut += player.vehicleAir + ',';
+      csvOut += player.revive + ',';
+      csvOut += player.flagTouch + ',';
       csvOut += player.death + ',';
       csvOut += player.respawn;
     }

static/src/app/statistic/war/war-edit/war-edit.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
+<form #form="ngForm" class="overview">
   <h3>Schlacht bearbeiten</h3>
 
   <div class="form-group">
@@ -71,10 +71,15 @@
   </button>
 
   <button id="save"
-          type="submit"
           (click)="updateWar()"
           class="btn btn-default"
           [disabled]="!form.valid">
     Bestätigen
   </button>
+
+  <span *ngIf="showErrorLabel"
+        class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
+        {{error}}
+      </span>
+
 </form>

static/src/app/statistic/war/war-edit/war-edit.component.ts

@@ -5,14 +5,13 @@ import {WarService} from '../../../services/logs/war.service';
 import {War} from '../../../models/model-interfaces';
 import {CampaignService} from '../../../services/logs/campaign.service';
 import {Subscription} from 'rxjs/Subscription';
-import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
-import {Message} from '../../../i18n/de.messages';
 
 
 @Component({
   selector: 'war-edit',
   templateUrl: './war-edit.component.html',
-  styleUrls: ['./war-edit.component.css', '../../../style/entry-form.css', '../../../style/overview.css']
+  styleUrls: ['./war-edit.component.css', '../../../style/load-indicator.css',
+    '../../../style/entry-form.css', '../../../style/overview.css']
 })
 export class WarEditComponent {
 
@@ -20,12 +19,15 @@ export class WarEditComponent {
 
   subscription: Subscription;
 
+  showErrorLabel = false;
+
+  error;
+
   @ViewChild(NgForm) form: NgForm;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
               private warService: WarService,
-              private snackBarService: SnackBarService,
               public campaignService: CampaignService) {
     this.subscription = this.route.params
                             .map(params => params['id'])
@@ -39,10 +41,12 @@ export class WarEditComponent {
   updateWar() {
     this.warService.updateWar(this.war)
         .subscribe(war => {
-            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
             this.router.navigate(['../../war/' + war._id], {relativeTo: this.route});
           },
-          error => this.snackBarService.showError(error._body.error.message, 15000));
+          error => {
+            this.error = error._body.error.message;
+            this.showErrorLabel = true;
+          });
   }
 
   cancel() {

static/src/app/statistic/war/war-submit/war-submit.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
+<form #form="ngForm" class="overview">
   <h3>Neue Schlacht hinzufügen</h3>
 
   <div class="form-group">
@@ -42,11 +42,12 @@
   </button>
 
   <button id="save"
-          type="submit"
           *ngIf="!loading"
           (click)="saveWar()"
           class="btn btn-default"
           [disabled]="!form.valid">
     Bestätigen
   </button>
+
+  <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
 </form>

static/src/app/statistic/war/war-submit/war-submit.component.ts

@@ -5,13 +5,13 @@ import {WarService} from '../../../services/logs/war.service';
 import {War} from '../../../models/model-interfaces';
 import {CampaignService} from '../../../services/logs/campaign.service';
 import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
-import {SpinnerService} from '../../../services/user-interface/spinner/spinner.service';
 
 
 @Component({
   selector: 'war-submit',
   templateUrl: './war-submit.component.html',
-  styleUrls: ['./war-submit.component.css', '../../../style/entry-form.css', '../../../style/overview.css']
+  styleUrls: ['./war-submit.component.css', '../../../style/load-indicator.css',
+    '../../../style/entry-form.css', '../../../style/overview.css']
 })
 export class WarSubmitComponent {
 
@@ -25,13 +25,14 @@ export class WarSubmitComponent {
 
   loading = false;
 
+  error;
+
   @ViewChild(NgForm) form: NgForm;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
               private warService: WarService,
               private snackBarService: SnackBarService,
-              private spinnerService: SpinnerService,
               public campaignService: CampaignService) {
   }
 
@@ -52,17 +53,15 @@ export class WarSubmitComponent {
     }
     const file: File = this.fileList[0];
     this.loading = true;
-    this.spinnerService.activate();
 
     this.warService.submitWar(this.war, file)
         .subscribe(war => {
             this.router.navigate(['../war/' + war._id], {relativeTo: this.route});
           },
           error => {
-            this.spinnerService.deactivate();
             this.loading = false;
             const errorMsg = JSON.parse(error._body).error.message;
-            this.snackBarService.showError('Error: '.concat(errorMsg), 15000);
+            this.snackBarService.showError('Error: '.concat(errorMsg), 10000);
           });
   }
 

static/src/app/style/load-indicator.css

@@ -2,36 +2,43 @@
   position: absolute;
   top: 50%;
   z-index: 10000;
-  left: 46%;
-  filter: drop-shadow(3px 1px 2px #dadada);
 }
-
+@media only screen and (max-width: 1199px) {
+  .load-indicator {
+    left: 46%;
+  }
+}
 @media only screen and (min-width: 1200px) {
   .load-indicator {
-    left: 47.4%;
+    left: 46%;
   }
 }
 @media only screen and (min-width: 1376px) {
   .load-indicator {
-    left: 48%;
+    left: 46.5%;
   }
 }
 @media only screen and (min-width: 1600px) {
   .load-indicator {
-    left: 48.2%;
+    left: 47.5%;
   }
 }
 @media only screen and (min-width: 1925px) {
   .load-indicator {
-    left: 48.7%;
+    left: 48%;
   }
 }
 
+:host /deep/ .mat-progress-spinner circle, .mat-spinner circle {
+  stroke: #303030 !important;
+  stroke-linecap: round;
+}
+
 .load-arrow {
   background: url(../../assets/loading.png) no-repeat;
   display: block;
-  width: 70px;
+  width: 80px;
-  height: 70px;
+  height: 80px;
 }
 
 /* Loading Animation */

static/src/app/users/edit-user/edit-user.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
+<form #form="ngForm" class="overview">
   <h3 *ngIf="user._id">Teilnehmer editieren</h3>
   <h3 *ngIf="!user._id">Neuen Teilnehmer hinzufügen</h3>
 
@@ -41,7 +41,7 @@
       <option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
     </select>
 
-    <show-error displayName="Rang" controlPath="rank"></show-error>
+    <show-error displayName="Squad" controlPath="squad"></show-error>
   </div>
 
   <button id="cancel"
@@ -51,7 +51,6 @@
   </button>
 
   <button id="save"
-          type="submit"
           (click)="saveUser(rankLevel.value)"
           class="btn btn-default"
           [disabled]="!form.valid">