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] 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%;
+  }
+}