From c56b5a8a62ee4f185c52bdcec7ae0f9a808a4371 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Fri, 1 Mar 2019 23:49:11 +0100
Subject: [PATCH 1/8] Fix campaign nav header chevron positioning and sass

---
 package.json                                  |  2 +-
 .../campaign-navigation.component.html        | 32 ++++----
 .../campaign-navigation.component.scss        | 75 ++++++++++---------
 3 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/package.json b/package.json
index 0fa12db..daa0228 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {
diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
index 83a11d5..65827b9 100644
--- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
+++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
@@ -1,24 +1,23 @@
-<div *ngIf="!isSmallLayout">
-  <div class="scroll-btn"
+<div class="campaign-horizontal-list" #horizontalList *ngIf="!isSmallLayout">
+  <div class="scroll-btn-left"
        *ngIf="isLeftScrollVisible"
        (mouseenter)="setRepeater(-10)"
        (mouseleave)="clearRepeater()">
     <mat-icon svgIcon="chevron-left"></mat-icon>
   </div>
 
-  <div class="campaign-horizontal-list" #horizontalList>
-    <div class="campaign-entry"
-         [ngClass]="{active : selectedCampaignId === 'all'}"
-         (click)="select({_id:'all'})">
-      {{'stats.campaign.title.all.time.overview' | translate}}
-    </div>
-    <div class="campaign-entry"
-         *ngFor="let campaign of campaigns$ | async"
-         [ngClass]="{active : campaign._id === selectedCampaignId}"
-         (click)="select(campaign)">
-      {{campaign.title}}
-      <span style="display:inline-block;"
-            *ngIf="loginService.hasPermission(3)">
+  <div class="campaign-entry"
+       [ngClass]="{active : selectedCampaignId === 'all'}"
+       (click)="select({_id:'all'})">
+    {{'stats.campaign.title.all.time.overview' | translate}}
+  </div>
+  <div class="campaign-entry"
+       *ngFor="let campaign of campaigns$ | async"
+       [ngClass]="{active : campaign._id === selectedCampaignId}"
+       (click)="select(campaign)">
+    {{campaign.title}}
+    <span style="display:inline-block;"
+          *ngIf="loginService.hasPermission(3)">
       <button mat-icon-button
               [matMenuTriggerFor]="menu"
               (click)="$event.stopPropagation()"
@@ -36,10 +35,9 @@
         </button>
       </mat-menu>
     </span>
-    </div>
   </div>
 
-  <div class="scroll-btn scroll-btn-right"
+  <div class="scroll-btn-right"
        *ngIf="isRightScrollVisible"
        (mouseenter)="setRepeater(10)"
        (mouseleave)="clearRepeater()">
diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss
index d4f1a4a..6ce072c 100644
--- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss
+++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss
@@ -1,20 +1,3 @@
-.scroll-btn {
-  position: absolute;
-  height: 46px;
-  width: 32px;
-  cursor: pointer;
-}
-
-.scroll-btn-right {
-  top: 0;
-  left: calc(100vw - 50px);
-}
-
-.scroll-btn mat-icon {
-  height: 46px;
-  width: 28px;
-}
-
 .campaign-horizontal-list {
   width: 100%;
   height: 100%;
@@ -23,29 +6,47 @@
   padding: 0;
   overflow: hidden;
   box-shadow: #666666 1px 1px 4px;
-}
 
-.campaign-entry {
-  border: 1px solid #222222;
-  min-width: 20%;
-  max-height: 4em;
-  padding: 10px 0;
-  text-align: center;
-  cursor: pointer;
-  font-size: 16px;
-  float: left;
-  background: #424242;
-  color: #9d9d9d;
-}
+  .scroll-btn-left {
+    position: absolute;
+    height: 46px;
+    width: 32px;
+    cursor: pointer;
 
-.active {
-  background: #222222;
-  color: white;
-  border-bottom: 3px solid #ffd740;
-}
+    mat-icon {
+      height: 46px;
+      width: 28px;
+    }
+  }
 
-.campaign-entry:hover {
-  border-bottom: 3px solid #ffd740;
+  .scroll-btn-right {
+    @extend .scroll-btn-left;
+    top: 0;
+    left: calc(100vw - 32px);
+  }
+
+  .campaign-entry {
+    border: 1px solid #222222;
+    min-width: 20%;
+    max-height: 4em;
+    padding: 10px 0;
+    text-align: center;
+    cursor: pointer;
+    font-size: 16px;
+    float: left;
+    background: #424242;
+    color: #9d9d9d;
+
+    &:hover {
+      border-bottom: 3px solid #ffd740;
+    }
+
+    &.active {
+      background: #222222;
+      color: white;
+      border-bottom: 3px solid #ffd740;
+    }
+  }
 }
 
 .campaign-select-small {
-- 
2.25.1


From cbf8ec910a66df2cd22bb702f7f23796ddb0bdc7 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sat, 2 Mar 2019 00:01:37 +0100
Subject: [PATCH 2/8] Fix stats vertical border fill postitioning edge case
 (war scroll)

---
 static/src/app/statistic/war/war-list/war-list.component.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/src/app/statistic/war/war-list/war-list.component.scss b/static/src/app/statistic/war/war-list/war-list.component.scss
index da22424..bcc6b67 100644
--- a/static/src/app/statistic/war/war-list/war-list.component.scss
+++ b/static/src/app/statistic/war/war-list/war-list.component.scss
@@ -91,6 +91,7 @@
   border-right: 1px solid #dadada;
   height: 100vh;
   top: 0;
+  left: calc(20% - 1px);
   z-index: -1;
 
   @media all and (max-width: 959px) {
-- 
2.25.1


From 14bf1d6e38a7b62d1e7b241cfcac4b7321053046 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sat, 2 Mar 2019 00:20:02 +0100
Subject: [PATCH 3/8] Fix stats vertical border fill postitioning edge case
 (war scroll)

---
 static/src/app/statistic/stats.component.scss                 | 2 +-
 static/src/app/statistic/war/war-list/war-list.component.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/static/src/app/statistic/stats.component.scss b/static/src/app/statistic/stats.component.scss
index a35c9ac..5b326f5 100644
--- a/static/src/app/statistic/stats.component.scss
+++ b/static/src/app/statistic/stats.component.scss
@@ -3,7 +3,7 @@
   float: left;
 
   @media all and (max-width: 959px) {
-    width: 100%;
+    width: 100%!important;
   }
 }
 
diff --git a/static/src/app/statistic/war/war-list/war-list.component.scss b/static/src/app/statistic/war/war-list/war-list.component.scss
index bcc6b67..6b498d0 100644
--- a/static/src/app/statistic/war/war-list/war-list.component.scss
+++ b/static/src/app/statistic/war/war-list/war-list.component.scss
@@ -94,6 +94,10 @@
   left: calc(20% - 1px);
   z-index: -1;
 
+  &.collapsed {
+    left: 0;
+  }
+
   @media all and (max-width: 959px) {
     display: none;
   }
-- 
2.25.1


From fe7140afd9c89d836d90ddd64c5d2a41a9f66559 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sat, 2 Mar 2019 15:14:52 +0100
Subject: [PATCH 4/8] Improve manage pages form positioning and request/confirm
 promotion/award pages

---
 static/src/app/models/model-interfaces.ts     |   2 +-
 .../request/award/req-award.component.html    | 119 +++++++++---------
 .../request/award/req-award.component.scss    |  27 ++--
 .../confirm-award.component.html              |   4 +-
 .../confirm-award.component.scss              |  18 +--
 .../confirm-award/confirm-award.component.ts  |   2 +-
 .../confirm-promotion.component.html          |   6 +-
 .../confirm-promotion.component.scss          |  18 +--
 .../confirm-promotion.component.ts            |   2 +-
 .../promotion/req-promotion.component.html    | 104 +++++++--------
 .../promotion/req-promotion.component.scss    |  26 ++--
 .../sql-dashboard.component.html              |  14 +--
 .../sql-dashboard.component.scss              |  13 +-
 static/src/app/style/overview.scss            |  10 +-
 14 files changed, 163 insertions(+), 202 deletions(-)

diff --git a/static/src/app/models/model-interfaces.ts b/static/src/app/models/model-interfaces.ts
index 60a7538..ea7837f 100644
--- a/static/src/app/models/model-interfaces.ts
+++ b/static/src/app/models/model-interfaces.ts
@@ -85,7 +85,7 @@ export interface Rank {
 
 export interface Award {
   _id?: string;
-  userId: string;
+  userId: string | User;
   decorationId?: any; // Decoration or string
   reason?: string;
   proposer?: AppUser;
diff --git a/static/src/app/request/award/req-award.component.html b/static/src/app/request/award/req-award.component.html
index ecbcab1..5e50a72 100644
--- a/static/src/app/request/award/req-award.component.html
+++ b/static/src/app/request/award/req-award.component.html
@@ -1,66 +1,68 @@
-<form #form="ngForm" class="overview">
-  <h3>{{'request.award.headline' | translate}}</h3>
+<div class="request-award-container">
+  <form #form="ngForm" class="overview">
+    <h3>{{'request.award.headline' | translate}}</h3>
 
-  <div class="form-group">
-    <label for="user">{{'request.award.field.user' | translate}}</label>
-    <select class="form-control"
-            name="user"
-            id="user"
-            [(ngModel)]="user"
-            [compareWith]="equals"
-            (change)="toggleUser()"
-            required>
-      <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
-      <option *ngFor="let user of users" [ngValue]="user">
-        {{user.username}}
-      </option>
-    </select>
-  </div>
-
-  <div class="form-group">
-    <label for="decoration">{{'request.award.field.award' | translate}}</label>
-    <select class="form-control"
-            name="decoration"
-            id="decoration"
-            [(ngModel)]="decoration"
-            [compareWith]="equals"
-            (change)="toggleDecoPreview(decoDescription, decoPreview)"
-            required>
-      <option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
-      <option *ngFor="let deco of decorations" [ngValue]="deco">
-        {{deco.name}}
-      </option>
-    </select>
-  </div>
-
-  <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
-    <div class="col-sm-1 decoration-preview">
-      <img class="center-block" #decoPreview>
+    <div class="form-group">
+      <label for="user">{{'request.award.field.user' | translate}}</label>
+      <select class="form-control"
+              name="user"
+              id="user"
+              [(ngModel)]="user"
+              [compareWith]="equals"
+              (change)="toggleUser()"
+              required>
+        <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
+        <option *ngFor="let user of users" [ngValue]="user">
+          {{user.username}}
+        </option>
+      </select>
     </div>
-    <div class="col-sm-2"
-         style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
-      &nbsp;
+
+    <div class="form-group">
+      <label for="decoration">{{'request.award.field.award' | translate}}</label>
+      <select class="form-control"
+              name="decoration"
+              id="decoration"
+              [(ngModel)]="decoration"
+              [compareWith]="equals"
+              (change)="toggleDecoPreview(decoDescription, decoPreview)"
+              required>
+        <option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
+        <option *ngFor="let deco of decorations" [ngValue]="deco">
+          {{deco.name}}
+        </option>
+      </select>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="reason">{{'request.award.field.reason' | translate}}</label>
-    <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
-              id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
-  </div>
+    <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
+      <div class="col-sm-1 decoration-preview">
+        <img class="center-block" #decoPreview>
+      </div>
+      <div class="col-sm-2"
+           style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
+        &nbsp;
+      </div>
+    </div>
 
-  <button id="cancel"
-          (click)="cancel()"
-          class="btn btn-default">
-    {{'request.award.button.cancel' | translate}}
-  </button>
+    <div class="form-group">
+      <label for="reason">{{'request.award.field.reason' | translate}}</label>
+      <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
+                id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
+    </div>
 
-  <button id="save"
-          (click)="addAwarding(decoPreview, decoDescription)"
-          class="btn btn-default"
-          [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
-    {{'request.award.button.submit' | translate}}
-  </button>
+    <button id="cancel"
+            (click)="cancel()"
+            class="btn btn-default">
+      {{'request.award.button.cancel' | translate}}
+    </button>
+
+    <button id="save"
+            (click)="addAwarding(decoPreview, decoDescription)"
+            class="btn btn-default"
+            [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
+      {{'request.award.button.submit' | translate}}
+    </button>
+  </form>
 
   <div class="table-container" *ngIf="showForm">
     <table class="table table-hover">
@@ -113,5 +115,4 @@
       </tbody>
     </table>
   </div>
-
-</form>
+</div>
diff --git a/static/src/app/request/award/req-award.component.scss b/static/src/app/request/award/req-award.component.scss
index cf92a6d..067113f 100644
--- a/static/src/app/request/award/req-award.component.scss
+++ b/static/src/app/request/award/req-award.component.scss
@@ -1,18 +1,19 @@
-@import url('../../style/overview.scss');
+div.request-award-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 
-.overview {
-  width: 100% !important;
-  margin-left: 25px !important;
+  form {
+    width: 33%;
+    min-width: 300px;
+    margin: auto;
+  }
 }
 
 .decoration-preview {
   padding: 5px;
 }
 
-.trash {
-  cursor: pointer;
-}
-
 .table {
   overflow-wrap: break-word;
   table-layout: fixed;
@@ -21,16 +22,6 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   min-width: 800px;
   padding: 5px;
 }
-
-.form-group {
-  width: 25%;
-  min-width: 300px;
-}
-
-h3 {
-  margin: 80px 0 20px -20px;
-}
diff --git a/static/src/app/request/confirm-award/confirm-award.component.html b/static/src/app/request/confirm-award/confirm-award.component.html
index ba2eac2..30371ce 100644
--- a/static/src/app/request/confirm-award/confirm-award.component.html
+++ b/static/src/app/request/confirm-award/confirm-award.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<div class="confirm-award-container">
   <h3>{{'request.confirm.award.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -58,4 +58,4 @@
       </tbody>
     </table>
   </div>
-</form>
+</div>
diff --git a/static/src/app/request/confirm-award/confirm-award.component.scss b/static/src/app/request/confirm-award/confirm-award.component.scss
index 07c2b42..b51495f 100644
--- a/static/src/app/request/confirm-award/confirm-award.component.scss
+++ b/static/src/app/request/confirm-award/confirm-award.component.scss
@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
-
-.overview {
-  margin-left: 25px !important;
+div.confirm-award-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 }
 
 .decoration-preview {
@@ -10,6 +10,7 @@
 
 .action {
   cursor: pointer;
+  line-height: 2em;
 }
 
 .table {
@@ -20,14 +21,5 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   padding: 5px;
 }
-
-.form-group {
-  width: 25%;
-}
-
-h3 {
-  margin: 80px 0 20px -20px;
-}
diff --git a/static/src/app/request/confirm-award/confirm-award.component.ts b/static/src/app/request/confirm-award/confirm-award.component.ts
index a047134..6e16251 100644
--- a/static/src/app/request/confirm-award/confirm-award.component.ts
+++ b/static/src/app/request/confirm-award/confirm-award.component.ts
@@ -25,7 +25,7 @@ export class ConfirmAwardComponent implements OnInit {
     });
   }
 
-  confirm(award: Award, decision: boolean, reason: string, rejectReason: string) {
+  confirm(award: Award, decision: boolean, reason: string, rejectReason?: string) {
     const updateObject = {
       _id: award._id,
       confirmed: decision ? 1 : 2
diff --git a/static/src/app/request/confirm-promotion/confirm-promotion.component.html b/static/src/app/request/confirm-promotion/confirm-promotion.component.html
index 6a8b276..48220c8 100644
--- a/static/src/app/request/confirm-promotion/confirm-promotion.component.html
+++ b/static/src/app/request/confirm-promotion/confirm-promotion.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<div class="confirm-promotion-container">
   <h3>{{'request.confirm.promotion.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -52,7 +52,7 @@
         <td class="text-right">
           <a class="action" (click)="confirm(promotion, true)">
             {{'request.confirm.promotion.table.button.action.accept' | translate}}
-          </a><br>
+          </a>
           <a class="action" (click)="confirm(promotion, false, rejectReason.value)">
             {{'request.confirm.promotion.table.button.action.reject' | translate}}
           </a>
@@ -61,4 +61,4 @@
       </tbody>
     </table>
   </div>
-</form>
+</div>
diff --git a/static/src/app/request/confirm-promotion/confirm-promotion.component.scss b/static/src/app/request/confirm-promotion/confirm-promotion.component.scss
index 07c2b42..76152ca 100644
--- a/static/src/app/request/confirm-promotion/confirm-promotion.component.scss
+++ b/static/src/app/request/confirm-promotion/confirm-promotion.component.scss
@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
-
-.overview {
-  margin-left: 25px !important;
+div.confirm-promotion-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 }
 
 .decoration-preview {
@@ -10,6 +10,7 @@
 
 .action {
   cursor: pointer;
+  line-height: 2em;
 }
 
 .table {
@@ -20,14 +21,5 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   padding: 5px;
 }
-
-.form-group {
-  width: 25%;
-}
-
-h3 {
-  margin: 80px 0 20px -20px;
-}
diff --git a/static/src/app/request/confirm-promotion/confirm-promotion.component.ts b/static/src/app/request/confirm-promotion/confirm-promotion.component.ts
index 6bd2e21..886dfb2 100644
--- a/static/src/app/request/confirm-promotion/confirm-promotion.component.ts
+++ b/static/src/app/request/confirm-promotion/confirm-promotion.component.ts
@@ -33,7 +33,7 @@ export class ConfirmPromotionComponent implements OnInit {
     });
   }
 
-  confirm(promotion: Promotion, decision: boolean, rejectReason: string) {
+  confirm(promotion: Promotion, decision: boolean, rejectReason?: string) {
     const updateObject = {
       _id: promotion._id,
       confirmed: decision ? 1 : 2
diff --git a/static/src/app/request/promotion/req-promotion.component.html b/static/src/app/request/promotion/req-promotion.component.html
index ed5e3ca..be121b6 100644
--- a/static/src/app/request/promotion/req-promotion.component.html
+++ b/static/src/app/request/promotion/req-promotion.component.html
@@ -1,61 +1,63 @@
-<form #form="ngForm" class="overview">
-  <h3>{{'request.promotion.headline' | translate}}</h3>
-
-  <div class="form-group">
-    <label for="user">{{'request.promotion.field.participant' | translate}}</label>
-    <select class="form-control"
-            name="user"
-            id="user"
-            [(ngModel)]="user"
-            [compareWith]="equals"
-            required
-            (change)="toggleUser()">
-      <option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
-      <option *ngFor="let user of users" [ngValue]="user">
-        {{user.username}}
-      </option>
-    </select>
-  </div>
-
-  <div *ngIf="showForm">
+<div class="request-promotion-container">
+  <form #form="ngForm">
+    <h3>{{'request.promotion.headline' | translate}}</h3>
 
     <div class="form-group">
-      <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
-      <input class="form-control"
-             [(ngModel)]="selectedUserRank"
-             [ngModelOptions]="{standalone: true}"
-             readonly>
-    </div>
-
-    <div class="form-group">
-      <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
+      <label for="user">{{'request.promotion.field.participant' | translate}}</label>
       <select class="form-control"
-              name="decoration"
-              id="decoration"
-              #decorationField
-              [(ngModel)]="newLevel"
-              required>
-        <option *ngFor="let rank of ranks" [ngValue]="rank.level">
-          {{rank.name}}
+              name="user"
+              id="user"
+              [(ngModel)]="user"
+              [compareWith]="equals"
+              required
+              (change)="toggleUser()">
+        <option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
+        <option *ngFor="let user of users" [ngValue]="user">
+          {{user.username}}
         </option>
       </select>
     </div>
 
-  </div>
+    <div *ngIf="showForm">
 
-  <button id="cancel"
-          (click)="cancel()"
-          class="btn btn-default">
-    {{'request.promotion.button.cancel' | translate}}
-  </button>
+      <div class="form-group">
+        <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
+        <input class="form-control"
+               [(ngModel)]="selectedUserRank"
+               [ngModelOptions]="{standalone: true}"
+               readonly>
+      </div>
 
-  <button id="save"
-          *ngIf="showForm"
-          (click)="addPromotion()"
-          class="btn btn-default"
-          [disabled]="newLevel === user.rankLvl">
-    {{'request.promotion.button.submit' | translate}}
-  </button>
+      <div class="form-group">
+        <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
+        <select class="form-control"
+                name="decoration"
+                id="decoration"
+                #decorationField
+                [(ngModel)]="newLevel"
+                required>
+          <option *ngFor="let rank of ranks" [ngValue]="rank.level">
+            {{rank.name}}
+          </option>
+        </select>
+      </div>
+
+    </div>
+
+    <button id="cancel"
+            (click)="cancel()"
+            class="btn btn-default">
+      {{'request.promotion.button.cancel' | translate}}
+    </button>
+
+    <button id="save"
+            *ngIf="showForm"
+            (click)="addPromotion()"
+            class="btn btn-default"
+            [disabled]="newLevel === user.rankLvl">
+      {{'request.promotion.button.submit' | translate}}
+    </button>
+  </form>
 
   <div class="table-container">
     <label>Beförderungsanträge</label>
@@ -106,6 +108,4 @@
       </tbody>
     </table>
   </div>
-
-
-</form>
+</div>
diff --git a/static/src/app/request/promotion/req-promotion.component.scss b/static/src/app/request/promotion/req-promotion.component.scss
index 5e40c75..e7db664 100644
--- a/static/src/app/request/promotion/req-promotion.component.scss
+++ b/static/src/app/request/promotion/req-promotion.component.scss
@@ -1,17 +1,19 @@
-@import url('../../style/overview.scss');
+.request-promotion-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 
-.overview {
-  margin-left: 25px !important;
+  form {
+    width: 33%;
+    min-width: 300px;
+    margin: auto;
+  }
 }
 
 .decoration-preview {
   padding: 5px;
 }
 
-.trash {
-  cursor: pointer;
-}
-
 .table {
   overflow-wrap: break-word;
   table-layout: fixed;
@@ -20,16 +22,6 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   min-width: 800px;
   padding: 5px;
 }
-
-.form-group {
-  width: 25%;
-  min-width: 300px;
-}
-
-h3 {
-  margin: 80px 0 20px -20px;
-}
diff --git a/static/src/app/request/sql-dashboard/sql-dashboard.component.html b/static/src/app/request/sql-dashboard/sql-dashboard.component.html
index 99303d5..d57f630 100644
--- a/static/src/app/request/sql-dashboard/sql-dashboard.component.html
+++ b/static/src/app/request/sql-dashboard/sql-dashboard.component.html
@@ -1,4 +1,4 @@
-<div class="overview">
+<div class="sql-dashboard-container">
   <h3>{{'request.sql.dashboard.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -6,11 +6,11 @@
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
-        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
-        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
-        <th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
+        <th class="col-sm-2">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
+        <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
+        <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
+        <th class="col-sm-2 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.promotion.table.head.date' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let promotion of promotions">
@@ -27,7 +27,7 @@
         <td>
           {{promotion.proposer.username}}
         </td>
-        <td class="text-center">
+        <td class="text-right">
           {{promotion.timestamp | date: 'dd.MM.yyyy'}}
         </td>
       </tr>
diff --git a/static/src/app/request/sql-dashboard/sql-dashboard.component.scss b/static/src/app/request/sql-dashboard/sql-dashboard.component.scss
index 9a8d311..62d3af5 100644
--- a/static/src/app/request/sql-dashboard/sql-dashboard.component.scss
+++ b/static/src/app/request/sql-dashboard/sql-dashboard.component.scss
@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
-
-.overview {
-  margin-left: 25px !important;
+.sql-dashboard-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 }
 
 .decoration-preview {
@@ -16,11 +16,6 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   min-width: 800px;
   padding: 5px;
 }
-
-h3 {
-  margin: 80px 0 20px -20px;
-}
diff --git a/static/src/app/style/overview.scss b/static/src/app/style/overview.scss
index 8685f47..15426f4 100644
--- a/static/src/app/style/overview.scss
+++ b/static/src/app/style/overview.scss
@@ -8,10 +8,8 @@
   bottom: 10px;
 }
 
-.absolute-label {
-  display: block;
-  position: absolute;
-  font-size: 12px;
-  padding: 5px;
-  margin-left: 25%;
+@media all and (max-width: 959px) {
+  .overview {
+    left: 345px;
+  }
 }
-- 
2.25.1


From 8ce3f10ee83f230abbc2583a4a932d2bc705bf51 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sat, 2 Mar 2019 22:32:49 +0100
Subject: [PATCH 5/8] Optimize style for login & sign-up

---
 static/src/app/login/login.component.html  | 12 ++--
 static/src/app/login/login.component.scss  | 64 +++++++---------------
 static/src/app/login/signup.component.html | 23 ++++----
 3 files changed, 38 insertions(+), 61 deletions(-)

diff --git a/static/src/app/login/login.component.html b/static/src/app/login/login.component.html
index 76e4fac..f605685 100644
--- a/static/src/app/login/login.component.html
+++ b/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 class="form-signin-heading">{{'login.headline' | translate}}</h2>
+    <h2>{{'login.headline' | translate}}</h2>
 
     <label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label>
     <input #userName id="inputEmail" class="form-control"
@@ -11,12 +11,10 @@
     <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>
+    <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>
 </form>
 
diff --git a/static/src/app/login/login.component.scss b/static/src/app/login/login.component.scss
index 479de01..39fb8fe 100644
--- a/static/src/app/login/login.component.scss
+++ b/static/src/app/login/login.component.scss
@@ -2,53 +2,31 @@
   width: 100%;
   padding: 15px;
   margin: 0 auto;
-}
 
-.form-signin > .row {
-  max-width: 400px;
-  margin: auto;
-}
+  & > .row {
+    max-width: 400px;
+    margin: auto;
 
-.form-signin-heading {
-  text-align: center;
-}
+    & > h2 {
+      text-align: center
+    }
 
-.form-signin .form-signin-heading, .form-signin .checkbox, #inputEmail {
-  margin-bottom: 10px;
-}
+    input.form-control {
+      margin-bottom: 10px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      font-size: 16px;
+      height: auto;
+      padding: 10px;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
 
-.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;
-}
-
-.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%;
+    button {
+      width: 100%;
+    }
+  }
 }
 
 /* Loading Animation */
diff --git a/static/src/app/login/signup.component.html b/static/src/app/login/signup.component.html
index af110ce..151a310 100644
--- a/static/src/app/login/signup.component.html
+++ b/static/src/app/login/signup.component.html
@@ -1,26 +1,27 @@
 <form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)">
 
-  <div class="row" style="position: absolute;width: 500px;left: 40%;">
-    <h2 style="text-align: center;" class="form-signin-heading">{{'signup.headline' | translate}}</h2>
+  <div class="row">
+    <h2>{{'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="">
 
-    <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>
+    <button mat-stroked-button type="submit">
+      <span *ngIf="!loading">{{'signup.submit' | translate}}</span>
+      <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </button>
   </div>
 </form>
 
-- 
2.25.1


From 4cf2e627552b0d9cde160685f2820f822cffd467 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sun, 3 Mar 2019 00:42:37 +0100
Subject: [PATCH 6/8] Basic introduction mat-table for army meber view;
 Improved scoreboard mobile display

---
 static/src/app/app.module.ts                  |  3 +-
 .../army-member/army-member.component.html    | 63 +++++++--------
 .../army-member/army-member.component.scss    | 13 ++-
 .../army/army-member/army-member.component.ts | 27 +++----
 .../war/scoreboard/scoreboard.component.html  | 81 +++++++++----------
 .../war/scoreboard/scoreboard.component.scss  | 40 +++++----
 .../war/war-header/war-header.component.html  |  2 +-
 .../war/war-header/war-header.component.scss  | 71 +++++++++++++++-
 8 files changed, 187 insertions(+), 113 deletions(-)

diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts
index ac162dc..5c51b0b 100644
--- a/static/src/app/app.module.ts
+++ b/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, MatToolbarModule} from '@angular/material';
+import {MatListModule, MatMenuModule, MatSidenavModule, MatTableModule, MatToolbarModule} from '@angular/material';
 import {FlexLayoutModule} from '@angular/flex-layout';
 
 @NgModule({
@@ -38,6 +38,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
     MatToolbarModule,
     MatListModule,
     MatMenuModule,
+    MatTableModule,
     FlexLayoutModule,
   ],
 
diff --git a/static/src/app/army/army-member/army-member.component.html b/static/src/app/army/army-member/army-member.component.html
index 1912f18..a80a670 100644
--- a/static/src/app/army/army-member/army-member.component.html
+++ b/static/src/app/army/army-member/army-member.component.html
@@ -25,40 +25,35 @@
       </span>
     </div>
 
-    <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 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>
   </div>
 </div>
diff --git a/static/src/app/army/army-member/army-member.component.scss b/static/src/app/army/army-member/army-member.component.scss
index 994c654..bbba143 100644
--- a/static/src/app/army/army-member/army-member.component.scss
+++ b/static/src/app/army/army-member/army-member.component.scss
@@ -23,10 +23,11 @@
   table-layout: fixed;
 }
 
-.table-container {
-  margin-top: 10px;
+div.table-container {
+  margin-top:20px;
   padding: 5px;
   overflow-x: auto;
+  min-width: 500px;
 }
 
 .table-head {
@@ -34,8 +35,12 @@
   color: white;
 }
 
-tbody {
-  background: rgba(255, 255, 255, 0.88);
+mat-table.mat-table {
+  background: rgba(255, 255, 255, 0.70);
+}
+
+mat-row.mat-row {
+  @extend mat-table.mat-table;
 }
 
 .cell-outline {
diff --git a/static/src/app/army/army-member/army-member.component.ts b/static/src/app/army/army-member/army-member.component.ts
index 4874bb3..859248a 100644
--- a/static/src/app/army/army-member/army-member.component.ts
+++ b/static/src/app/army/army-member/army-member.component.ts
@@ -2,7 +2,6 @@ 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';
@@ -14,8 +13,6 @@ import {Location} from '@angular/common';
 })
 export class ArmyMemberComponent implements OnInit {
 
-  subscription: Subscription;
-
   user: User = {};
 
   awards: Award[] = [];
@@ -26,6 +23,8 @@ 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,
@@ -34,17 +33,17 @@ export class ArmyMemberComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.subscription = this.route.params
-                            .map(params => params['id'])
-                            .filter(id => id !== undefined)
-                            .flatMap(id => this.userService.getUser(id))
-                            .subscribe(user => {
-                              this.user = user;
-                              this.signatureUrl = window.location.origin + '/resource/signature/' + user._id + '.png';
-                              this.awardingService.getUserAwardings(user._id).subscribe((awards => {
-                                this.awards = awards;
-                              }));
-                            });
+    this.route.params
+        .map(params => params['id'])
+        .filter(id => id !== undefined)
+        .flatMap(id => this.userService.getUser(id))
+        .subscribe(user => {
+          this.user = user;
+          this.signatureUrl = window.location.origin + '/resource/signature/' + user._id + '.png';
+          this.awardingService.getUserAwardings(user._id).subscribe((awards => {
+            this.awards = awards;
+          }));
+        });
   };
 
   backToOverview() {
diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html
index b8bb8db..85374b2 100644
--- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html
+++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html
@@ -1,48 +1,45 @@
-<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">
 
-  <mat-table matSort
-             [dataSource]="sortedRows"
-             matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
-             (matSortChange)="sortScoreboardData($event)"
-             class="mat-elevation-z8">
+  <ng-container matColumnDef="{{tableHead[0].prop}}" sticky>
+    <mat-header-cell *matHeaderCellDef
+                     mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let element"
+              [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+      {{element.name}}
+    </mat-cell>
+  </ng-container>
 
-    <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"
-                [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
-        {{element.name}}
-      </mat-cell>
-    </ng-container>
+  <ng-container matColumnDef="{{tableHead[1].prop}}">
+    <mat-header-cell *matHeaderCellDef
+                     mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let element">{{element.fraction ===
+    'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
+  </ng-container>
 
-    <ng-container matColumnDef="{{tableHead[1].prop}}">
-      <mat-header-cell *matHeaderCellDef
-                       mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
-      <mat-cell *matCellDef="let element">{{element.fraction ===
-      'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
-    </ng-container>
+  <ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
+    <mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}" matTooltip="{{column.head | translate}}">
+      <mat-icon svgIcon="{{column.prop}}">
+      </mat-icon>
+    </mat-header-cell>
+    <mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell>
+  </ng-container>
 
-    <ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
-      <mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}" matTooltip="{{column.head | translate}}">
-        <mat-icon svgIcon="{{column.prop}}">
-        </mat-icon>
-      </mat-header-cell>
-      <mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="interact">
-      <mat-header-cell *matHeaderCellDef></mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        <button mat-icon-button
-                matTooltip="{{ 'stats.scoreboard.button.detail' | translate:{name: element.name} }}"
-                (click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
+  <ng-container matColumnDef="interact">
+    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <button mat-icon-button
+              matTooltip="{{ 'stats.scoreboard.button.detail' | translate:{name: element.name} }}"
+              (click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
                  element['steamUUID'] : element['name'])">
-          <mat-icon svgIcon="stats-detail"></mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+        <mat-icon svgIcon="stats-detail"></mat-icon>
+      </button>
+    </mat-cell>
+  </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-  </mat-table>
-</div>
+  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.scss b/static/src/app/statistic/war/scoreboard/scoreboard.component.scss
index 065f9a7..7aafc92 100644
--- a/static/src/app/statistic/war/scoreboard/scoreboard.component.scss
+++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.scss
@@ -1,24 +1,12 @@
 @import url('../../../style/list-entry.scss');
 @import url('../../../style/hide-scrollbar.scss');
 
-.scoreboard-table {
+mat-table.mat-table {
   width: 1058px;
-  margin: auto;
-  height: 68vh;
   overflow-x: hidden;
   overflow-y: auto;
-  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;
+  margin: auto;
+  height: 70vh;
 }
 
 .mat-column-name {
@@ -50,7 +38,27 @@
     white-space: pre-wrap;
   }
 
-  .mat-header-row, .scoreboard-table {
+  .mat-header-row, mat-table.mat-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;
+  }
+}
diff --git a/static/src/app/statistic/war/war-header/war-header.component.html b/static/src/app/statistic/war/war-header/war-header.component.html
index d3f88b0..b9525ae 100644
--- a/static/src/app/statistic/war/war-header/war-header.component.html
+++ b/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" style="width: 250px">
+    <div class="pull-left head-field">
       <h4>{{'stats.scoreboard.standings' | translate}}</h4>
       <span [style.color]="fraction.COLOR_BLUFOR"
             style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
diff --git a/static/src/app/statistic/war/war-header/war-header.component.scss b/static/src/app/statistic/war/war-header/war-header.component.scss
index c7caa14..f823169 100644
--- a/static/src/app/statistic/war/war-header/war-header.component.scss
+++ b/static/src/app/statistic/war/war-header/war-header.component.scss
@@ -16,10 +16,13 @@
   font-size: 22px;
   margin-top: 10px;
   margin-bottom: 10px;
+  width: 250px;
 }
 
 .head-field-pie-chart {
-  @extend .head-field;
+  font-size: 22px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   padding-left: 100px;
 }
 
@@ -119,3 +122,69 @@ 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%;
+  }
+}
-- 
2.25.1


From 51ce2a1534ac26823a5bf45166977781cec58feb Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sun, 3 Mar 2019 15:04:42 +0100
Subject: [PATCH 7/8] Improve fraction stats and war header mobile display

---
 .../overview/campaign-overview.component.scss |  1 +
 .../fraction-stats.component.html             |  3 +-
 .../fraction-stats.component.scss             | 28 +++++++++++++++----
 .../war/scoreboard/scoreboard.component.scss  |  4 +--
 .../war/war-header/war-header.component.html  | 11 +++++++-
 .../war/war-header/war-header.component.scss  | 15 ++++------
 6 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/static/src/app/statistic/campaign/overview/campaign-overview.component.scss b/static/src/app/statistic/campaign/overview/campaign-overview.component.scss
index d30640d..150d27f 100644
--- a/static/src/app/statistic/campaign/overview/campaign-overview.component.scss
+++ b/static/src/app/statistic/campaign/overview/campaign-overview.component.scss
@@ -10,6 +10,7 @@
   .slide-chart-container {
     width: 100%;
     min-width: unset;
+    height: 65vh;
     margin-top: 105px;
     margin-bottom: 35px;
   }
diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html
index 498b206..f563a65 100644
--- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html
+++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html
@@ -1,5 +1,4 @@
-<div class="fade-in" style="border-top: 1px solid #dadada; padding-top:25px;" xmlns="http://www.w3.org/1999/html">
-
+<div class="fade-in fraction-stats-container">
   <mat-button-toggle-group class="chart-select-group"
                            #group="matButtonToggleGroup"
                            [(ngModel)]="activeChartSelect"
diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss
index f9da332..27abd46 100644
--- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss
+++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss
@@ -1,6 +1,11 @@
 @import url('../../../style/list-entry.scss');
 @import url('../../../style/hide-scrollbar.scss');
 
+.fraction-stats-container {
+  border-top: 1px solid #dadada;
+  padding-top: 25px;
+}
+
 .chart-select-group {
   display: flex;
   width: fit-content;
@@ -40,16 +45,29 @@
 }
 
 @media all and (max-width: 959px) {
+  .fraction-stats-container {
+    width: 93%;
+    margin: auto;
+  }
+
   .chart-container {
-    width: 150%;
+    width: 100%;
     min-width: 0;
-    height: 70vh
+    padding: 0;
+    margin: 10px 0 0;
   }
 
   .chart-select-group {
-    background: #dadada;
-    max-width: fit-content;
-    width: 200%;
     flex-wrap: wrap;
   }
+
+  mat-button-toggle.mat-button-toggle {
+    width: 50%;
+    border: 1px solid #dadada;
+    text-align: center;
+
+    & /deep/ button.mat-button-toggle-button, & /deep/ div.mat-button-toggle-label-content {
+      width: 100%;
+    }
+  }
 }
diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.scss b/static/src/app/statistic/war/scoreboard/scoreboard.component.scss
index 7aafc92..5e532a2 100644
--- a/static/src/app/statistic/war/scoreboard/scoreboard.component.scss
+++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.scss
@@ -43,13 +43,10 @@ mat-table.mat-table {
   }
 }
 
-
 @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 {
@@ -58,6 +55,7 @@ mat-table.mat-table {
 
   mat-table.mat-table {
     width: 100%;
+    height: 50vh;
     overflow-x: auto;
     display: grid;
   }
diff --git a/static/src/app/statistic/war/war-header/war-header.component.html b/static/src/app/statistic/war/war-header/war-header.component.html
index b9525ae..0664a55 100644
--- a/static/src/app/statistic/war/war-header/war-header.component.html
+++ b/static/src/app/statistic/war/war-header/war-header.component.html
@@ -9,7 +9,16 @@
             style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
     </div>
 
-    <div class="pull-left head-field-pie-chart">
+    <div class="pull-left head-field" style="margin-top:0" *ngIf="isSmallLayout">
+      <h4>{{'stats.scoreboard.participants' | translate}}</h4>
+      <span [style.color]="fraction.COLOR_BLUFOR"
+            style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.playersBlufor}}</span>
+      <span style="font-size: 13px;font-weight: bold;">vs</span>
+      <span [style.color]="fraction.COLOR_OPFOR"
+            style="font-weight: bold; margin-left: 10px;">{{war.playersOpfor}} {{fraction.OPFOR}}</span>
+    </div>
+
+    <div class="pull-left head-field-pie-chart" *ngIf="!isSmallLayout">
       <h4 class="pull-left" style="margin-bottom: 0;">{{'stats.scoreboard.participants' | translate}}</h4>
       <ngx-charts-pie-chart
         class="pull-left"
diff --git a/static/src/app/statistic/war/war-header/war-header.component.scss b/static/src/app/statistic/war/war-header/war-header.component.scss
index f823169..32a8b32 100644
--- a/static/src/app/statistic/war/war-header/war-header.component.scss
+++ b/static/src/app/statistic/war/war-header/war-header.component.scss
@@ -145,11 +145,12 @@ span.tab-control {
     }
 
     div.btn-clean-log {
-      padding-left: 0;
-      padding-top: 38px;
+      padding: 2vw 4vw 38px;
+      width: 100%;
 
       & > a {
         margin: 0 !important;
+        width:100%;
       }
     }
   }
@@ -165,12 +166,6 @@ span.tab-control {
     }
   }
 
-  .head-field-pie-chart {
-    width: calc(54% - 1.5vw);
-    padding-left: 10%;
-    margin-bottom: -8px;
-  }
-
   .nav-tabs > li {
     width: 25%;
     font-size: 12px;
@@ -184,7 +179,7 @@ span.tab-control {
   .nav-tabs > li:last-child {
     width: fit-content;
     position: absolute;
-    margin-top: -48px;
-    margin-left: 46%;
+    margin-top: -38px;
+    margin-left: 27%;
   }
 }
-- 
2.25.1


From e445a56a245983c2f86cac20407a5fd025609593 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sun, 3 Mar 2019 15:26:03 +0100
Subject: [PATCH 8/8] Finish mat table usage for army member page

---
 .../army-member/army-member.component.scss    | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/static/src/app/army/army-member/army-member.component.scss b/static/src/app/army/army-member/army-member.component.scss
index bbba143..d158fdd 100644
--- a/static/src/app/army/army-member/army-member.component.scss
+++ b/static/src/app/army/army-member/army-member.component.scss
@@ -2,7 +2,7 @@
 
 .army-member-view {
   width: 90%;
-  height: 100vh;
+  min-height: 100vh;
   padding: 5px;
   margin: auto;
 }
@@ -18,11 +18,6 @@
   padding-left: 5px;
 }
 
-.table {
-  overflow-wrap: break-word;
-  table-layout: fixed;
-}
-
 div.table-container {
   margin-top:20px;
   padding: 5px;
@@ -37,16 +32,24 @@ div.table-container {
 
 mat-table.mat-table {
   background: rgba(255, 255, 255, 0.70);
+
+  .mat-column-award-graphics {
+    flex: 0 0 15%;
+  }
+
+  .mat-column-title {
+    flex: 0 0 25%;
+  }
+
+  .mat-column-reason {
+    flex: 0 0 52%;
+  }
+
+  .mat-column-date {
+    flex: 0 0 8%;
+  }
 }
 
 mat-row.mat-row {
   @extend mat-table.mat-table;
 }
-
-.cell-outline {
-  outline: 1px solid #D4D4D4;
-}
-
-tr.cell-outline:hover {
-  background-color: #ffffff;
-}
-- 
2.25.1