static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css

@@ -4,7 +4,10 @@
   overflow-x: hidden;
   border-left: thin solid lightgrey;
   bottom: 20px;
-  padding: 70px 1% 0 1%;
+  width: 80%;
+  padding-left: 20px;
+  padding-right: 5%;
+  padding-top: 70px;
   height: 100vh;
 }
 

static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html

@@ -1,4 +1,5 @@
 <div class="overview fade-in" xmlns="http://www.w3.org/1999/html">
+
   <h2 class="pull-left">Spielerstatistik - {{campaignPlayer.name}}</h2>
   <h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>
 
@@ -162,4 +163,5 @@
       </ngx-charts-line-chart>
     </div>
   </div>
+
 </div>

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', '../../style/hide-scrollbar.css']
+  styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css']
 })
 export class CampaignPlayerDetailComponent {
 

static/src/app/statistic/overview/stats-overview.component.html

@@ -1,13 +1,13 @@
 <div class="slide-chart-container" style="height: 150px;">
   <h2 style="margin-bottom: 20px">{{title}}</h2>
 
-    <div class="btn btn-default" [style.background]="isActiveSlide(0)"
+    <div class="btn btn-default" [style.background]="activeSlideIndex === 0 ? '#d9edf7':'white'"
          (click)="goToSlide(0)" *ngIf="id != 'all'">Gesamtpunktzahl
     </div>
-    <div class="btn btn-default" [style.background]="isActiveSlide(1)"
+    <div class="btn btn-default" [style.background]="activeSlideIndex === 1 ? '#d9edf7':'white'"
          (click)="goToSlide(1)">Punkte je Schlacht
     </div>
-    <div class="btn btn-default" [style.background]="isActiveSlide(2)"
+    <div class="btn btn-default" [style.background]="activeSlideIndex === 2 ? '#d9edf7':'white'"
          (click)="goToSlide(2)">Spielerzahlen
     </div>
 </div>

static/src/app/statistic/overview/stats-overview.component.ts

@@ -153,8 +153,4 @@ export class StatisticOverviewComponent {
     Object.assign(this, this.currentData);
   }
 
-  isActiveSlide(index) {
-    return this.activeSlideIndex === index ? '#d9edf7':'white'
-  }
-
 }

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

@@ -1,26 +1,13 @@
-.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;
 }
 

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

@@ -1,8 +1,6 @@
-  <div class="overview fade-in" xmlns="http://www.w3.org/1999/html">
-    <div class=vertical-spacer>
-    </div>
-    <div style="overflow:hidden">
-    <div style="width: 920px;min-height: 263px;">
+<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>
@@ -82,6 +80,5 @@
     <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>

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', '../../style/hide-scrollbar.css']
+  styleUrls: ['./war-detail.component.css', '../../style/list-entry.css']
 })
 export class WarDetailComponent {
 

static/src/app/style/hide-scrollbar.css

@@ -1,9 +0,0 @@
-::-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);
-}