static/src/app/app.module.ts

@@ -22,7 +22,7 @@ import {HttpClientModule} from '@angular/common/http';
 import {SpinnerService} from './services/user-interface/spinner/spinner.service';
 import {SettingsService} from './services/settings.service';
 import {HttpGateway} from './services/http-gateway';
-import {MatListModule, MatMenuModule, MatSidenavModule, MatTableModule, MatToolbarModule} from '@angular/material';
+import {MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule} from '@angular/material';
 import {FlexLayoutModule} from '@angular/flex-layout';
 
 @NgModule({
@@ -38,7 +38,6 @@ import {FlexLayoutModule} from '@angular/flex-layout';
     MatToolbarModule,
     MatListModule,
     MatMenuModule,
-    MatTableModule,
     FlexLayoutModule,
   ],
 

static/src/app/army/army-member/army-member.component.html

@@ -25,35 +25,40 @@
       </span>
     </div>
 
-    <div class="pull-left" class="table-container">
-        <mat-table [dataSource]="awards" class="mat-elevation-z8">
-          <ng-container matColumnDef="award-graphics">
-            <mat-header-cell *matHeaderCellDef></mat-header-cell>
-            <mat-cell *matCellDef="let element">
-              <img src="resource/decoration/{{element.decorationId._id}}.png">
-            </mat-cell>
-          </ng-container>
-
-          <ng-container matColumnDef="title">
-            <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.title' | translate}}</mat-header-cell>
-            <mat-cell *matCellDef="let element">{{element.decorationId.name}}</mat-cell>
-          </ng-container>
-
-          <ng-container matColumnDef="reason">
-            <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.reason' | translate}}</mat-header-cell>
-            <mat-cell *matCellDef="let element">{{element.reason}}</mat-cell>
-          </ng-container>
-
-          <ng-container matColumnDef="date">
-            <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.date' | translate}}</mat-header-cell>
-            <mat-cell *matCellDef="let element">
-              <span class="small text-nowrap">{{element.date | date: 'dd.MM.yyyy'}}</span>
-            </mat-cell>
-          </ng-container>
-
-          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-        </mat-table>
+    <div class="pull-left" style="margin-top:20px;">
+      <div class="table-container" style="min-width: 500px">
+        <table class="table">
+          <thead>
+          <tr class="table-head">
+            <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
+            <th class="col-sm-2">{{'public.army.member.awards.title' | translate}}</th>
+            <th class="col-sm-2">{{'public.army.member.awards.reason' | translate}}</th>
+            <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">
+              {{'public.army.member.awards.date' | translate}}
+            </th>
+          </tr>
+          </thead>
+          <tbody *ngFor="let award of awards">
+          <tr *ngIf="award.confirmed === 1" class="cell-outline">
+            <td class="text-center" *ngIf="award.decorationId.isMedal">
+              <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
+            </td>
+            <td class="text-center" *ngIf="!award.decorationId.isMedal">
+              <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
+            </td>
+            <td style="font-weight: bold">
+              {{award.decorationId.name}}
+            </td>
+            <td>
+              {{award.reason}}
+            </td>
+            <td class="text-right">
+              <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>

static/src/app/army/army-member/army-member.component.scss

@@ -23,11 +23,10 @@
   table-layout: fixed;
 }
 
-div.table-container {
-  margin-top:20px;
+.table-container {
+  margin-top: 10px;
   padding: 5px;
   overflow-x: auto;
-  min-width: 500px;
 }
 
 .table-head {
@@ -35,12 +34,8 @@ div.table-container {
   color: white;
 }
 
-mat-table.mat-table {
-  background: rgba(255, 255, 255, 0.70);
-}
-
-mat-row.mat-row {
-  @extend mat-table.mat-table;
+tbody {
+  background: rgba(255, 255, 255, 0.88);
 }
 
 .cell-outline {

static/src/app/army/army-member/army-member.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {Award, User} from '../../models/model-interfaces';
 import {ActivatedRoute, Router} from '@angular/router';
 import {UserService} from '../../services/army-management/user.service';
+import {Subscription} from 'rxjs/Subscription';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {Fraction} from '../../utils/fraction.enum';
 import {Location} from '@angular/common';
@@ -13,6 +14,8 @@ import {Location} from '@angular/common';
 })
 export class ArmyMemberComponent implements OnInit {
 
+  subscription: Subscription;
+
   user: User = {};
 
   awards: Award[] = [];
@@ -23,8 +26,6 @@ export class ArmyMemberComponent implements OnInit {
 
   readonly fraction = Fraction;
 
-  readonly displayedColumns = ['award-graphics', 'title', 'reason', 'date'];
-
   constructor(private router: Router,
               private route: ActivatedRoute,
               private userService: UserService,
@@ -33,7 +34,7 @@ export class ArmyMemberComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.route.params
+    this.subscription = this.route.params
                             .map(params => params['id'])
                             .filter(id => id !== undefined)
                             .flatMap(id => this.userService.getUser(id))

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

@@ -1,6 +1,6 @@
 <form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
   <div class="row">
-    <h2>{{'login.headline' | translate}}</h2>
+    <h2 class="form-signin-heading">{{'login.headline' | translate}}</h2>
 
     <label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label>
     <input #userName id="inputEmail" class="form-control"
@@ -11,10 +11,12 @@
     <input #password type="password" id="inputPassword" class="form-control"
            placeholder="{{'login.password' | translate}}" required="">
 
+    <div class="form-group">
       <button mat-stroked-button type="submit">
         <span *ngIf="!loading">{{'login.submit' | translate}}</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
     </div>
+  </div>
 </form>
 

static/src/app/login/login.component.scss

@@ -2,31 +2,53 @@
   width: 100%;
   padding: 15px;
   margin: 0 auto;
+}
 
-  & > .row {
+.form-signin > .row {
   max-width: 400px;
   margin: auto;
+}
 
-    & > h2 {
-      text-align: center
-    }
+.form-signin-heading {
+  text-align: center;
+}
 
-    input.form-control {
+.form-signin .form-signin-heading, .form-signin .checkbox, #inputEmail {
   margin-bottom: 10px;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+}
+
+.form-signin .checkbox {
+  font-weight: normal;
+}
+
+.form-signin .form-control {
+  position: relative;
   font-size: 16px;
   height: auto;
   padding: 10px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-    }
+}
 
-    button {
+.form-signin .form-control:focus {
+  z-index: 2;
+}
+
+.form-signin input[type="text"] {
+  margin-bottom: 5px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+button {
   width: 100%;
-    }
-  }
 }
 
 /* Loading Animation */

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

@@ -1,27 +1,26 @@
 <form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)">
 
-  <div class="row">
-    <h2>{{'signup.headline' | translate}}</h2>
+  <div class="row" style="position: absolute;width: 500px;left: 40%;">
+    <h2 style="text-align: center;" class="form-signin-heading">{{'signup.headline' | translate}}</h2>
 
     <p [innerHtml]="'signup.description' | translate"></p>
 
     <label for="inputEmail" class="sr-only">{{'signup.username' | translate}}</label>
-    <input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required=""
-           autofocus="">
+    <input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required="" autofocus="">
 
     <label for="inputPassword" class="sr-only">{{'signup.password' | translate}}</label>
-    <input #password type="password" id="inputPassword" class="form-control"
-           placeholder="{{'signup.password' | translate}}" required="">
+    <input #password type="password" id="inputPassword" class="form-control" placeholder="{{'signup.password' | translate}}" required="">
 
     <label for="inputSecret" class="sr-only">{{'signup.secret' | translate}}</label>
-    <input #secret type="text" id="inputSecret" class="form-control"
-           placeholder="{{'signup.secret.placeholder' | translate}}"
+    <input #secret type="text" id="inputSecret" class="form-control" placeholder="{{'signup.secret.placeholder' | translate}}"
            required="">
 
-    <button mat-stroked-button type="submit">
+    <div class="form-group">
+      <button type="submit" class="btn btn-lg btn-block btn-primary">
         <span *ngIf="!loading">{{'signup.submit' | translate}}</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
     </div>
+  </div>
 </form>
 

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

@@ -1,10 +1,12 @@
-<mat-table matSort
+<div class="fade-in scoreboard-table">
+
+  <mat-table matSort
              [dataSource]="sortedRows"
              matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
              (matSortChange)="sortScoreboardData($event)"
-           class="mat-elevation-z8 fade-in">
+             class="mat-elevation-z8">
 
-  <ng-container matColumnDef="{{tableHead[0].prop}}" sticky>
+    <ng-container matColumnDef="{{tableHead[0].prop}}">
       <mat-header-cell *matHeaderCellDef
                        mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
       <mat-cell *matCellDef="let element"
@@ -40,6 +42,7 @@
       </mat-cell>
     </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-</mat-table>
+  </mat-table>
+</div>

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

@@ -1,12 +1,24 @@
 @import url('../../../style/list-entry.scss');
 @import url('../../../style/hide-scrollbar.scss');
 
-mat-table.mat-table {
+.scoreboard-table {
   width: 1058px;
+  margin: auto;
+  height: 68vh;
   overflow-x: hidden;
   overflow-y: auto;
-  margin: auto;
-  height: 70vh;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+  border-bottom: 1px solid #dadada;
+}
+
+.mat-header-row {
+  width: 1058px;
+  position: absolute;
+  z-index: 100;
+}
+
+.mat-table > mat-row:first-of-type {
+  padding-top: 56px;
 }
 
 .mat-column-name {
@@ -38,27 +50,7 @@ mat-table.mat-table {
     white-space: pre-wrap;
   }
 
-  .mat-header-row, mat-table.mat-table {
+  .mat-header-row, .scoreboard-table {
     width: 768px;
   }
 }
-
-
-@media all and (max-width: 599px) {
-  .mat-column-name {
-    flex: 0 0 130px;
-    padding-left: 1vw;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-  }
-
-  .mat-header-row {
-    width: 755px;
-  }
-
-  mat-table.mat-table {
-    width: 100%;
-    overflow-x: auto;
-    display: grid;
-  }
-}

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

@@ -1,6 +1,6 @@
 <div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
   <div class="war-header-container">
-    <div class="pull-left head-field">
+    <div class="pull-left head-field" style="width: 250px">
       <h4>{{'stats.scoreboard.standings' | translate}}</h4>
       <span [style.color]="fraction.COLOR_BLUFOR"
             style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>

static/src/app/statistic/war/war-header/war-header.component.scss

@@ -16,13 +16,10 @@
   font-size: 22px;
   margin-top: 10px;
   margin-bottom: 10px;
-  width: 250px;
 }
 
 .head-field-pie-chart {
-  font-size: 22px;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  @extend .head-field;
   padding-left: 100px;
 }
 
@@ -122,69 +119,3 @@ span.tab-control {
     padding-left: 57px;
   }
 }
-
-@media all and (max-width: 599px) {
-  .war-header {
-    position: relative;
-    overflow: auto;
-    margin-bottom: 34px; /*do not cover anything with back to top bar*/
-  }
-
-  .nav-tabs {
-    width: 100%;
-    padding-top: 0;
-  }
-
-  .war-header-container {
-    width: 100%;
-    padding-top: 0;
-
-    h4 {
-      font-size: 16px;
-      margin-bottom: 0;
-    }
-
-    div.btn-clean-log {
-      padding-left: 0;
-      padding-top: 38px;
-
-      & > a {
-        margin: 0 !important;
-      }
-    }
-  }
-
-  .head-field {
-    width: calc(100% - 1.5vw);
-    text-align: center;
-    margin-top: 1vh;
-    margin-bottom: 0;
-
-    & > span {
-      font-size: 16px;
-    }
-  }
-
-  .head-field-pie-chart {
-    width: calc(54% - 1.5vw);
-    padding-left: 10%;
-    margin-bottom: -8px;
-  }
-
-  .nav-tabs > li {
-    width: 25%;
-    font-size: 12px;
-
-    mat-icon {
-      display: block;
-    }
-  }
-
-  /* radio box fraction select */
-  .nav-tabs > li:last-child {
-    width: fit-content;
-    position: absolute;
-    margin-top: -48px;
-    margin-left: 46%;
-  }
-}