From 4fb2326ef6a1f272ddbdd340eab4f284050771fa Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Wed, 30 Jan 2019 20:35:14 +0100
Subject: [PATCH] Fix misaligned score table header by flex box use

---
 .../war/scoreboard/scoreboard.component.css   | 61 +++----------------
 .../war/scoreboard/scoreboard.component.html  | 33 +++++-----
 2 files changed, 26 insertions(+), 68 deletions(-)

diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.css b/static/src/app/statistic/war/scoreboard/scoreboard.component.css
index a2a28db..7367a6f 100644
--- a/static/src/app/statistic/war/scoreboard/scoreboard.component.css
+++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.css
@@ -1,65 +1,24 @@
 .scoreboard-table {
-  height: 60vh;
-  width: fit-content;
-  border: 1px solid #dadada;
-  overflow-x: auto;
-  margin: 56px auto auto;
-}
-
-: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 {
-  position: absolute;
-  margin-top: -5px;
-}
-
-:host /deep/ table.mat-table > tbody {
-  margin-top: 60px;
-  display: block;
+  width: 1115px;
+  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-column-name {
-  width: 200px;
+  flex: 0 0 220px;
 }
 
 .mat-column-fraction {
-  width: 90px;
+  flex: 0 0 90px;
 }
 
 .mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch, .mat-column-vehicleLight,
 .mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn, .mat-column-interact {
-  width: 67px;
-  text-indent: 9px;
-}
-
-.mat-column-vehicleLight mat-icon.mat-icon {
-  width: 28px;
-  margin-bottom: 5px;
-}
-
-.mat-column-vehicleHeavy mat-icon.mat-icon {
-  width: 33px;
-  margin-top: 5px;
-}
-
-.mat-column-vehicleAir mat-icon.mat-icon {
-  width: 35px;
-  margin-bottom: 5px;
-}
-
-td.mat-cell:last-child, td.mat-footer-cell:last-child, th.mat-header-cell:last-child {
-  padding-right: 0;
+  flex: 0 0 80px;
 }
 
 :host /deep/ .mat-table .mat-icon {
diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html
index ebd4e7b..4ef7c99 100644
--- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html
+++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html
@@ -1,47 +1,46 @@
 <div class="fade-in scoreboard-table">
 
-  <table mat-table matSort
+  <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}}">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</th>
-      <td mat-cell *matCellDef="let element"
+      <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}}
-      </td>
+      </mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="{{tableHead[1].prop}}">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</th>
-      <td mat-cell *matCellDef="let element">{{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</td>
+      <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}}">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}">
+      <mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}">
         <mat-icon svgIcon="{{column.prop}}"
                   matTooltip="{{column.head | translate}}">
         </mat-icon>
-      </th>
-      <td mat-cell *matCellDef="let element">{{element[column.prop]}}</td>
+      </mat-header-cell>
+      <mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="interact">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let element">
+      <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>
+          <mat-icon svgIcon="stats-detail"></mat-icon>
         </button>
-      </td>
+      </mat-cell>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
 </div>