From 148160dcb75f8faa3da697cc0b2eed3ebfd89ab9 Mon Sep 17 00:00:00 2001
From: Florian Hartwich <hardi@noarch.de>
Date: Sat, 7 Oct 2017 09:38:02 +0200
Subject: [PATCH] Fix war detail alignment

---
 .../campaign-player-detail.component.css      |   4 -
 .../campaign-player-detail.component.ts       |   2 +-
 .../war-detail/war-detail.component.css       |  23 ++-
 .../war-detail/war-detail.component.html      | 155 +++++++++---------
 .../war-detail/war-detail.component.ts        |   2 +-
 static/src/app/style/hide-scrollbar.css       |   9 +
 6 files changed, 108 insertions(+), 87 deletions(-)
 create mode 100644 static/src/app/style/hide-scrollbar.css

diff --git a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css
index aed471d..ac2d807 100644
--- a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css
+++ b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css
@@ -8,10 +8,6 @@
   height: 100vh;
 }
 
-::-webkit-scrollbar {
-  width: 0;  /* remove scrollbar space */
-}
-
 h2 {
   padding: 10px;
 }
diff --git a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts
index 7ccd760..c490c46 100644
--- a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts
+++ b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts
@@ -9,7 +9,7 @@ import {Location} from '@angular/common';
 @Component({
   selector: 'campaign-player-detail',
   templateUrl: './campaign-player-detail.component.html',
-  styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css']
+  styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
 })
 export class CampaignPlayerDetailComponent {
 
diff --git a/static/src/app/statistic/war-detail/war-detail.component.css b/static/src/app/statistic/war-detail/war-detail.component.css
index 454c430..83ff550 100644
--- a/static/src/app/statistic/war-detail/war-detail.component.css
+++ b/static/src/app/statistic/war-detail/war-detail.component.css
@@ -1,13 +1,26 @@
+.vertical-spacer {
+  height: 100vh;
+  float: left;
+  width: 4%;
+}
+
+@media screen and (min-width: 1500px) {
+  .vertical-spacer {
+    width: 15%;
+  }
+}
+
+@media screen and (min-width: 2000px) {
+  .vertical-spacer {
+    width: 20%;
+  }
+}
+
 .overview {
-  position: fixed;
   overflow-y: scroll;
   overflow-x: hidden;
   border-left: thin solid lightgrey;
   bottom: 20px;
-  width: 100%;
-  padding-left: 50px;
-  padding-top: 70px;
-  margin-left: 10px;
   height: 100vh;
 }
 
diff --git a/static/src/app/statistic/war-detail/war-detail.component.html b/static/src/app/statistic/war-detail/war-detail.component.html
index fa69568..fb894eb 100644
--- a/static/src/app/statistic/war-detail/war-detail.component.html
+++ b/static/src/app/statistic/war-detail/war-detail.component.html
@@ -1,84 +1,87 @@
-<div class="overview fade-in" xmlns="http://www.w3.org/1999/html">
-
-  <div style="min-height: 263px;">
-    <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
-    <h3 class="pull-left" style="width: 250px">
-      <h4>Endpunktestand:</h4>
-      <span class="text-blufor" style="font-weight: bold; margin-right: 10px">NATO {{war.ptBlufor}}</span>
-      <span style="font-size: x-large">|</span>
-      <span class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} CSAT</span>
-    </h3>
-
-    <h3 class="pull-left" style="padding-left: 150px;">
-      <h4>Teilnehmer:</h4>
-      <ngx-charts-pie-chart
-        [view]="[150, 150]"
-        [scheme]="{domain: ['#B22222', '#0000FF']}"
-        [results]="playerChart"
-        [legend]="false"
-        [explodeSlices]="false"
-        [labels]="false"
-        [doughnut]="false"
-        [gradient]="false">
-      </ngx-charts-pie-chart>
-    </h3>
-
-    <div class="pull-left" style="padding-left: 150px; padding-top:15px">
-      <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
-        anzeigen</a>
-      <form class="form-group">
-        <label class="radio-inline">
-          <input type="radio" name="fractSelect"
-                 [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
-                 [(ngModel)]="fractionRadioSelect"
-                 (change)="filterPlayersByFraction()">Alle
-        </label>
-        <label class="radio-inline">
-          <input type="radio" name="fractSelect" value="BLUFOR"
-                 [(ngModel)]="fractionRadioSelect"
-                 #fractRadioBufor
-                 (change)="filterPlayersByFraction(fractRadioBufor.value)">NATO
-        </label>
-        <label class="radio-inline">
-          <input type="radio" name="fractSelect" value="OPFOR"
-                 [(ngModel)]="fractionRadioSelect"
-                 #fractRadioOpfor
-                 (change)="filterPlayersByFraction(fractRadioOpfor.value)">CSAT
-        </label>
-        <br>
-      </form>
+  <div class="overview fade-in" xmlns="http://www.w3.org/1999/html">
+    <div class=vertical-spacer>
     </div>
-  </div>
+    <div style="overflow:hidden">
+    <div style="width: 920px;min-height: 263px;">
+      <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
+      <h3 class="pull-left" style="width: 250px">
+        <h4>Endpunktestand:</h4>
+        <span class="text-blufor" style="font-weight: bold; margin-right: 10px">NATO {{war.ptBlufor}}</span>
+        <span style="font-size: x-large">|</span>
+        <span class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} CSAT</span>
+      </h3>
 
-  <ngx-datatable
-    [rows]="rows"
-    [reorderable]="reorderable"
-    [sorts]="[{prop: 'kill', dir: 'desc'}]"
-    [messages]="{emptyMessage: 'Loading...'}"
-    [headerHeight]="cellHeight"
-    [rowHeight]="cellHeight"
-    [cssClasses]='customClasses'
-    [selectionType]="'single'"
-    (select)="selectPlayerDetail($event)">
-    <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
-      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+      <h3 class="pull-left" style="padding-left: 150px;">
+        <h4>Teilnehmer:</h4>
+        <ngx-charts-pie-chart
+          [view]="[150, 150]"
+          [scheme]="{domain: ['#B22222', '#0000FF']}"
+          [results]="playerChart"
+          [legend]="false"
+          [explodeSlices]="false"
+          [labels]="false"
+          [doughnut]="false"
+          [gradient]="false">
+        </ngx-charts-pie-chart>
+      </h3>
+
+      <div class="pull-left" style="padding-left: 150px; padding-top:15px">
+        <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
+          anzeigen</a>
+        <form class="form-group">
+          <label class="radio-inline">
+            <input type="radio" name="fractSelect"
+                   [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
+                   [(ngModel)]="fractionRadioSelect"
+                   (change)="filterPlayersByFraction()">Alle
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="fractSelect" value="BLUFOR"
+                   [(ngModel)]="fractionRadioSelect"
+                   #fractRadioBufor
+                   (change)="filterPlayersByFraction(fractRadioBufor.value)">NATO
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="fractSelect" value="OPFOR"
+                   [(ngModel)]="fractionRadioSelect"
+                   #fractRadioOpfor
+                   (change)="filterPlayersByFraction(fractRadioOpfor.value)">CSAT
+          </label>
+          <br>
+        </form>
+      </div>
+    </div>
+
+    <ngx-datatable
+      [rows]="rows"
+      [reorderable]="reorderable"
+      [sorts]="[{prop: 'kill', dir: 'desc'}]"
+      [messages]="{emptyMessage: 'Loading...'}"
+      [headerHeight]="cellHeight"
+      [rowHeight]="cellHeight"
+      [cssClasses]='customClasses'
+      [selectionType]="'single'"
+      (select)="selectPlayerDetail($event)">
+      <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
+        <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
         <span class="player-name"
               [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
           {{value}}
         </span>
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
-      <ng-template ngx-datatable-cell-template let-value="value">
-        {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
-    <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
-    <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
-    <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
-    <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
-    <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
-  </ngx-datatable>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
+        <ng-template ngx-datatable-cell-template let-value="value">
+          {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
+      <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
+      <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
+      <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
+      <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
+      <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
+    </ngx-datatable>
+    </div>
 
 </div>
diff --git a/static/src/app/statistic/war-detail/war-detail.component.ts b/static/src/app/statistic/war-detail/war-detail.component.ts
index 3695170..e9e8936 100644
--- a/static/src/app/statistic/war-detail/war-detail.component.ts
+++ b/static/src/app/statistic/war-detail/war-detail.component.ts
@@ -7,7 +7,7 @@ import {War} from "../../models/model-interfaces";
 @Component({
   selector: 'war-detail',
   templateUrl: './war-detail.component.html',
-  styleUrls: ['./war-detail.component.css', '../../style/list-entry.css']
+  styleUrls: ['./war-detail.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
 })
 export class WarDetailComponent {
 
diff --git a/static/src/app/style/hide-scrollbar.css b/static/src/app/style/hide-scrollbar.css
new file mode 100644
index 0000000..e7cb272
--- /dev/null
+++ b/static/src/app/style/hide-scrollbar.css
@@ -0,0 +1,9 @@
+::-webkit-scrollbar {
+  /*width: 0px;  !* remove scrollbar space *!*/
+  background: transparent; /* just make scrollbar invisible */
+}
+
+/* show position indicator in red */
+::-webkit-scrollbar-thumb {
+  background: rgb(234, 234, 234);
+}