rearrange header and use display dependent heights in scoreboard

static/src/app/statistic/war-detail/fraction-stats/fraction-stats.component.css

@@ -17,7 +17,7 @@
   width: 95%;
   margin: 2%;
   min-width: 900px;
-  height: 600px;
+  height: 50vh;
   padding: 15px;
   float: left;
 }

static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css

@@ -4,6 +4,12 @@
 
 /* ########### DATATABLE ########### */
 
+ngx-datatable {
+  width: 1020px;
+  margin: auto;
+  height: 68vh;
+}
+
 :host /deep/ .datatable-header {
   background: #222222;
   font-weight: 700;

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

@@ -1,6 +1,5 @@
 <div class="fade-in" style="overflow-x: auto" xmlns="http://www.w3.org/1999/html">
   <ngx-datatable
-    style="width:1020px; margin:auto; height:70vh;"
     [rows]="rows"
     [sorts]="[{prop: 'kill', dir: 'desc'}]"
     [reorderable]="reorderable"

static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, SimpleChanges, ViewChild} from "@angular/core";
+import {Component, EventEmitter, SimpleChanges} from "@angular/core";
 import {War} from "../../../models/model-interfaces";
 import {Fraction} from "../../../utils/fraction.enum";
 

static/src/app/statistic/war-detail/war-detail.component.css

@@ -1,11 +1,11 @@
 .war-header-container {
   width: 920px;
-  min-height: 205px;
+  min-height: 168px;
   margin: auto;
 }
 
 .head-field {
-  font-size: 24px;
+  font-size: 22px;
   margin-top: 10px;
   margin-bottom: 10px;
 }

static/src/app/statistic/war-detail/war-detail.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">
-    <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
+    <h3>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h3>
     <div class="pull-left head-field" style="width: 250px">
       <h4>Endpunktestand:</h4>
       <span [style.color]="fraction.COLOR_BLUFOR" style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
@@ -8,9 +8,10 @@
       <span [style.color]="fraction.COLOR_OPFOR" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
     </div>
 
-    <div class="pull-left head-field " style="padding-left: 140px;">
-      <h4 style="margin-bottom: 0;">Teilnehmer:</h4>
+    <div class="pull-left head-field " style="padding-left: 100px;">
+      <h4 class="pull-left" style="margin-bottom: 0;">Teilnehmer:</h4>
       <ngx-charts-pie-chart
+        class="pull-left"
         [view]="[120, 120]"
         [scheme]="colorScheme"
         [results]="playerChart"
@@ -22,7 +23,7 @@
       </ngx-charts-pie-chart>
     </div>
 
-    <div class="pull-left " style="padding-left: 150px; padding-top:15px">
+    <div class="pull-left " style="padding-left: 100px; 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" *ngIf="tab === 0">