Improve scoreboard table header

* Fix enter submit of forgotten forms

static/src/app/app.component.css

@@ -8,6 +8,13 @@ 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,16 +96,19 @@
 
 <div>
   <button mat-icon-button
+          class="sidebar-toggle-btn"
           (click)="toggleSidebar()"
-          *ngIf="router.url.includes('/stats')"
+          *ngIf="showSidebarToggleBtn">
-          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" *ngIf="sidebarOpen">
+  <div id="left"
+       [style.background]="leftBackground"
+       [style.box-shadow]="leftBoxShadow"
+       *ngIf="sidebarOpen">
     <router-outlet></router-outlet>
   </div>
 
@@ -118,6 +121,6 @@
   </div>
 </div>
 
-<mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner>
+<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
 
 <button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</button>

static/src/app/app.component.ts

@@ -7,6 +7,7 @@ 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);
 
@@ -23,10 +24,28 @@ 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,
@@ -35,36 +54,56 @@ export class AppComponent implements OnInit {
               private router: Router,
               private iconRegistry: MatIconRegistry,
               private sanitizer: DomSanitizer,
+              private spinnerService: SpinnerService,
               @Inject(DOCUMENT) private document) {
-    this.iconRegistry.addSvgIcon('add',
+    this.initMaterialSvgIcons();
-      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/outline-add_box-24px.svg'));
+
-    this.iconRegistry.addSvgIcon('add-user',
+    this.spinnerService.spinnerActive.subscribe(active => this.toggleSpinner(active));
-      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.loading = true;
+        this.spinnerService.activate();
       }
       if (event instanceof NavigationEnd) {
-        this.loading = false;
+        this.spinnerService.deactivate();
+        const currentUrl = this.router.url;
+
         // scroll to top on route from army overview to user detail and back
-        if (router.url.includes('overview')) {
+        if (currentUrl.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
@@ -88,14 +127,14 @@ export class AppComponent implements OnInit {
 
   logout() {
     this.loginService.logout();
-    this.router.navigate([RouteConfig.overviewPath]);
+    setTimeout(() => {
-    return false;
+      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.module.ts

@@ -23,12 +23,13 @@ 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, MaterialComponentsModule],
+    ClipboardModule, MatSnackBarModule],
   providers: [
     HttpClient,
     LoginService,
@@ -49,7 +50,8 @@ import {HttpClientModule} from '@angular/common/http';
     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" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="decoration._id">Auszeichnung editieren</h3>
   <h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3>
 
@@ -70,6 +70,7 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="saveDecoration(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">

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

@@ -15,10 +15,6 @@
         <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,6 +2,7 @@ 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({
@@ -12,16 +13,13 @@ import {RouteConfig} from '../app.config';
 
 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() {
@@ -40,11 +38,7 @@ export class LoginComponent implements OnInit {
               this.router.navigate([this.returnUrl]);
             },
             error => {
-              this.error = error._body;
+              this.snackBarService.showError(error._body, 15000);
-              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">
+  <div class="row" style="position: absolute;width: 500px;left: 40%;">
     <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://operation-pandora.com/dashboard/index.php?conversation-add/&userID=9"
+      Im Forum eine Nachricht an <a href="https://www.opt4.net/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

@@ -1,20 +0,0 @@
-/**
- * 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" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="rank._id">Rang editieren</h3>
   <h3 *ngIf="!rank._id">Neuen Rang hinzufügen</h3>
 
@@ -51,6 +51,7 @@
   </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

@@ -0,0 +1,19 @@
+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" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="squad._id">Squad editieren</h3>
   <h3 *ngIf="!squad._id">Neues Squad hinzufügen</h3>
 
@@ -51,6 +51,7 @@
   </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" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="campaign._id">Kampagne editieren</h3>
   <h3 *ngIf="!campaign._id">Neue Kampagne hinzufügen</h3>
 
@@ -20,15 +20,10 @@
   </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,6 +4,8 @@ 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({
@@ -15,24 +17,21 @@ 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() {
@@ -42,12 +41,10 @@ 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 => {
+          error => this.snackBarService.showError(error._body.error.message, 15000));
-            this.error = error._body.error.message;
-            this.showErrorLabel = true;
-          });
   }
 
   cancel() {

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

@@ -3,7 +3,21 @@
   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 {
@@ -11,20 +25,10 @@
   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;
@@ -37,22 +41,14 @@ table.mat-table img {
   width: 90px;
 }
 
-.mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch,
+.mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch, .mat-column-vehicleLight,
-.mat-column-vehicleLight, .mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn {
+.mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn, .mat-column-interact {
   width: 67px;
   text-indent: 9px;
 }
 
-th.mat-column-interact {
+td.mat-cell:last-child, td.mat-footer-cell:last-child, th.mat-header-cell:last-child {
-  padding-left: 36px;
+  padding-right: 0;
-  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>&nbsp;</th>
+      <th mat-header-cell *matHeaderCellDef></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" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3>Schlacht bearbeiten</h3>
 
   <div class="form-group">
@@ -71,15 +71,10 @@
   </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,13 +5,14 @@ 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/load-indicator.css',
+  styleUrls: ['./war-edit.component.css', '../../../style/entry-form.css', '../../../style/overview.css']
-    '../../../style/entry-form.css', '../../../style/overview.css']
 })
 export class WarEditComponent {
 
@@ -19,15 +20,12 @@ 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'])
@@ -41,12 +39,10 @@ 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 => {
+          error => this.snackBarService.showError(error._body.error.message, 15000));
-            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" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3>Neue Schlacht hinzufügen</h3>
 
   <div class="form-group">
@@ -42,12 +42,11 @@
   </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/load-indicator.css',
+  styleUrls: ['./war-submit.component.css', '../../../style/entry-form.css', '../../../style/overview.css']
-    '../../../style/entry-form.css', '../../../style/overview.css']
 })
 export class WarSubmitComponent {
 
@@ -25,14 +25,13 @@ 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) {
   }
 
@@ -53,15 +52,17 @@ 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), 10000);
+            this.snackBarService.showError('Error: '.concat(errorMsg), 15000);
           });
   }
 

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

@@ -2,43 +2,36 @@
   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: 46%;
+    left: 47.4%;
   }
 }
 @media only screen and (min-width: 1376px) {
   .load-indicator {
-    left: 46.5%;
+    left: 48%;
   }
 }
 @media only screen and (min-width: 1600px) {
   .load-indicator {
-    left: 47.5%;
+    left: 48.2%;
   }
 }
 @media only screen and (min-width: 1925px) {
   .load-indicator {
-    left: 48%;
+    left: 48.7%;
   }
 }
 
-: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: 80px;
+  width: 70px;
-  height: 80px;
+  height: 70px;
 }
 
 /* Loading Animation */

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

@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" 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="Squad" controlPath="squad"></show-error>
+    <show-error displayName="Rang" controlPath="rank"></show-error>
   </div>
 
   <button id="cancel"
@@ -51,6 +51,7 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="saveUser(rankLevel.value)"
           class="btn btn-default"
           [disabled]="!form.valid">