Add stats list sidebar collapse

static/src/app/statistic/stats.component.css

@@ -0,0 +1,21 @@
+.side-bar {
+  width: 20%;
+  float: left;
+}
+
+.collapsed {
+  width: 70px;
+}
+
+.button-container {
+  position: relative;
+  z-index: 100;
+}
+
+.button-container > button {
+  position: fixed;
+  top: calc(100vh - 35px);
+  left: -10px;
+  background: white;
+  border: 1px solid #dadada;
+}

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

@@ -5,18 +5,22 @@
 </campaign-navigation>
 
 <div *ngIf="selectedCampaign._id !== 'all'"
-     style="width: 20%; float:left;">
-  <!--<button mat-icon-button-->
-  <!--class="sidebar-toggle-btn"-->
-  <!--(click)="toggleSidebar()"-->
-  <!--<mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">-->
-  <!--</mat-icon>-->
-  <!--<mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">-->
-  <!--</mat-icon>-->
-  <!--</button>-->
+     class="side-bar"
+     [ngClass]="{collapsed: collapsed}">
   <war-list
+    [collapsed]="collapsed"
     [campaign]="selectedCampaign">
   </war-list>
+  <div class="button-container">
+    <button mat-icon-button
+            class="sidebar-toggle-btn"
+            (click)="toggleCollapse()">
+      <mat-icon svgIcon="chevron-left" *ngIf="!collapsed">
+      </mat-icon>
+      <mat-icon svgIcon="chevron-right" *ngIf="collapsed">
+      </mat-icon>
+    </button>
+  </div>
 </div>
 
 <router-outlet></router-outlet>

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

@@ -14,6 +14,8 @@ export class StatisticComponent implements OnInit {
 
   campaigns: Campaign[] = [];
 
+  collapsed: boolean = false;
+
   constructor(private campaignService: CampaignService,
               private router: Router,
               private route: ActivatedRoute) {
@@ -36,4 +38,11 @@ export class StatisticComponent implements OnInit {
     }
     this.router.navigate([{outlets: {'right': ['overview', campaign._id]}}], {relativeTo: this.route});
   }
+
+  toggleCollapse() {
+    this.collapsed = !this.collapsed;
+    setTimeout(_ => {
+      window.dispatchEvent(new Event('resize'));
+    });
+  }
 }

static/src/app/statistic/war/war-list/war-item.component.css

@@ -40,3 +40,7 @@
 .selected div.select-indicator-battle {
   display: block !important;
 }
+
+.collapsed {
+  white-space: nowrap;
+}

static/src/app/statistic/war/war-list/war-item.component.html

@@ -1,12 +1,17 @@
 <div class='war-item' [ngClass]="{selected : selected}" (click)="select()">
-  <div class="war-item-box">
+  <div class="war-item-box"
+       [matTooltip]="collapsed ? war.title : ''"
+       matTooltipPosition="right">
     <div style="position:relative; z-index:10;">
       <div class="select-indicator-battle"></div>
     </div>
-    <span class="war-title">
+    <span class="war-title"
+          [ngClass]="{collapsed: collapsed}">
         ◦ {{war.title}}
       </span>
-    <div class="war-detail">vom {{war.date | date: 'dd.MM.yyyy'}}</div>
+    <div class="war-detail"
+         [ngClass]="{collapsed: collapsed}">vom {{war.date | date: 'dd.MM.yyyy'}}
+    </div>
   </div>
 
   <div *ngIf="loginService.hasPermission(3)"

static/src/app/statistic/war/war-list/war-item.component.ts

@@ -10,6 +10,8 @@ import {LoginService} from '../../../services/app-user-service/login-service';
 })
 export class WarItemComponent implements OnInit {
 
+  @Input() collapsed: boolean;
+
   @Input() selected: boolean;
 
   @Input() war: War;

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

@@ -14,12 +14,17 @@
   margin-right: 5px;
 }
 
-.select-indicator {
+.select-indicator-container {
   display: none;
+  position: relative;
+  z-index: 10;
+}
+
+.select-indicator {
   width: 30px;
   height: 30px;
   position: absolute;
-  left: calc(20% - 15px);
+  left: calc(100% + 11px);
   background: -moz-linear-gradient(45deg, white 50%, transparent 50%);
   background: -webkit-linear-gradient(45deg, white 50%, transparent 50%);
   background: linear-gradient(45deg, white 50%, transparent 50%);
@@ -46,7 +51,7 @@
   direction: ltr;
 }
 
-.selected > div.select-indicator {
+.selected > div.select-indicator-container {
   display: block !important;
 }
 
@@ -66,7 +71,7 @@
 .fill-vertical-border {
   width: 20%;
   position: fixed;
-  border-right:  1px solid #dadada;
+  border-right: 1px solid #dadada;
   height: 100vh;
 }
 
@@ -85,3 +90,7 @@
 }
 
 /* Table Scrollbar END */
+
+.collapsed {
+  width: 70px;
+}

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

@@ -10,21 +10,31 @@
 
 <div class="list-header"
      [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
-  <div class="select-indicator"></div>
-  <mat-icon svgIcon="stats-chart"></mat-icon>
-  Übersicht
+  <div class="select-indicator-container">
+    <div class="select-indicator"></div>
+  </div>
+  <mat-icon [matTooltip]="collapsed ? 'Übersicht' : ''"
+            matTooltipPosition="right"
+            svgIcon="stats-chart"></mat-icon>
+  <span *ngIf="!collapsed">Übersicht</span>
 </div>
 
 <div class="list-header"
      [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
-  <div class="select-indicator"></div>
-  <mat-icon svgIcon="highscore"></mat-icon>
-  Highscore
+  <div class="select-indicator-container">
+    <div class="select-indicator"></div>
+  </div>
+  <mat-icon [matTooltip]="collapsed ? 'Highscore' : ''"
+            matTooltipPosition="right"
+            svgIcon="highscore"></mat-icon>
+  <span *ngIf="!collapsed">Highscore</span>
 </div>
 
 <div class="list-header" style="cursor: default; border-bottom: 1px solid #f1f1f1;">
-  <mat-icon svgIcon="battle"></mat-icon>
-  Schlachten
+  <mat-icon [matTooltip]="collapsed ? 'Schlachten' : ''"
+            matTooltipPosition="right"
+            svgIcon="battle"></mat-icon>
+  <span *ngIf="!collapsed">Schlachten</span>
 </div>
 
 <div class="battle-list">
@@ -34,9 +44,12 @@
       (warEdit)="editWar($event)"
       (warDelete)="deleteWar(war)"
       (warSelected)="selectWar($event)"
+      [collapsed]="collapsed"
       [selected]="war._id == selectedWarId">
     </cc-war-item>
   </div>
 </div>
 
-<div class="fill-vertical-border"></div>
+<div class="fill-vertical-border"
+     [ngClass]="{collapsed: collapsed}">
+</div>

static/src/app/statistic/war/war-list/war-list.component.ts

@@ -15,6 +15,8 @@ export class WarListComponent implements OnInit, OnChanges {
 
   @Input() campaign: Campaign;
 
+  @Input() collapsed: boolean;
+
   selectedWarId: string | number;
 
   campaigns: Campaign[] = [];
@@ -29,7 +31,7 @@ export class WarListComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    this.selectedWarId = this.campaign._id;
+    if (changes.campaign) this.selectedWarId = this.campaign._id;
   }
 
   ngOnInit() {