Use material toggle in campaign overview

static/src/app/app.component.css

@@ -1,10 +1,3 @@
-html {
-  height: 100%;
-}
-body {
-  min-height: 100%;
-}
-
 ul {
   list-style-type: none;
   margin: 0;
@@ -15,17 +8,6 @@ li {
   display: inline;
 }
 
-.sidebar-toggle-btn {
-  background: #dadada;
-  filter: drop-shadow(2px 1px 1px #666);
-  margin-left: -12px;
-  z-index: 500;
-}
-
-.sidebar-toggle-btn mat-icon.mat-icon {
-  color: #666666;
-}
-
 .content {
   padding-left: 15px;
   padding-right: 15px;

static/src/app/army/army-member/army-member.component.css

@@ -1,6 +1,7 @@
 :host {
   display: flow-root;
   height: 100%;
+  min-height: 100vh;
   width: 100%;
   margin-top: -23px;
   padding-top: 23px;
@@ -8,7 +9,7 @@
   background-image: url('../../../assets/bg.jpg');
   background-size: cover;
   background-attachment: fixed;
-  background-position: center;
+  background-position: top;
   background-repeat: no-repeat;
 }
 
@@ -27,8 +28,7 @@
 
 .return-button {
   position: absolute;
-  display: block;
-  width: auto;
+  padding-left: 5px;
 }
 
 .table {

static/src/app/army/army.component.css

@@ -1,6 +1,7 @@
 :host {
   display: flow-root;
   height: 100%;
+  min-height: 100vh;
   width: 100%;
   margin-top: -23px;
   padding-top: 23px;
@@ -8,7 +9,7 @@
   background-image: url('../../assets/bg.jpg');
   background-size: cover;
   background-attachment: fixed;
-  background-position: center;
+  background-position: top;
   background-repeat: no-repeat;
 }
 

static/src/app/login/login.component.css

@@ -4,6 +4,14 @@
   margin: 0 auto;
 }
 
+.form-signin > .row {
+  width: 400px;
+}
+
+.form-signin-heading {
+  text-align: center;
+}
+
 .form-signin .form-signin-heading, .form-signin .checkbox, #inputEmail {
   margin-bottom: 10px;
 }
@@ -38,39 +46,8 @@
   border-top-right-radius: 0;
 }
 
-.account-wall {
-  margin-top: 20px;
-  padding: 40px 0px 20px 0px;
-  background-color: #f7f7f7;
-  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-}
-
-.login-title {
-  color: #555;
-  font-size: 18px;
-  font-weight: 400;
-  display: block;
-}
-
-.profile-img {
-  width: 96px;
-  height: 96px;
-  margin: 0 auto 10px;
-  display: block;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-
-.need-help {
-  margin-top: 10px;
-}
-
-.new-account {
-  display: block;
-  margin-top: 10px;
+button {
+  width: 100%;
 }
 
 /* Loading Animation */

static/src/app/login/login.component.html

@@ -1,7 +1,6 @@
 <form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
-
-  <div class="row" style="position: absolute;width: 400px;left: 40%;">
-    <h2 style="text-align: center;" class="form-signin-heading">Anmelden</h2>
+  <div class="row">
+    <h2 class="form-signin-heading">Login</h2>
 
     <label for="inputEmail" class="sr-only">Benutzername</label>
     <input #userName id="inputEmail" class="form-control" placeholder="Benutzername" required="" autofocus="">
@@ -9,15 +8,12 @@
     <label for="inputPassword" class="sr-only">Passwort</label>
     <input #password type="password" id="inputPassword" class="form-control" placeholder="Passwort" required="">
 
-
     <div class="form-group">
-      <button type="submit" class="btn btn-lg btn-block btn-primary">
+      <button mat-stroked-button type="submit">
         <span *ngIf="!loading">Anmelden</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
     </div>
-
-
   </div>
 </form>
 

static/src/app/pub/decoration-overview/decoration-overview.component.css

@@ -1,6 +1,7 @@
 :host {
   display: flow-root;
   height: 100%;
+  min-height: 100vh;
   width: 100%;
   margin-top: -23px;
   padding-top: 23px;
@@ -8,7 +9,7 @@
   background-image: url('../../../assets/bg.jpg');
   background-size: cover;
   background-attachment: fixed;
-  background-position: center;
+  background-position: top;
   background-repeat: no-repeat;
 }
 

static/src/app/pub/rank-overview/rank-overview.component.css

@@ -1,6 +1,7 @@
 :host {
   display: flow-root;
   height: 100%;
+  min-height: 100vh;
   width: 100%;
   margin-top: -23px;
   padding-top: 23px;
@@ -8,7 +9,7 @@
   background-image: url('../../../assets/bg.jpg');
   background-size: cover;
   background-attachment: fixed;
-  background-position: center;
+  background-position: top;
   background-repeat: no-repeat;
 }
 

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css

@@ -1,6 +1,6 @@
 .scroll-btn {
   position: absolute;
-  height: 53px;
+  height: 46px;
   width: 32px;
   cursor: pointer;
 }
@@ -8,15 +8,11 @@
 .scroll-btn-right {
   top: 50px;
   left: calc(100vw - 45px);
-  background: linear-gradient(to right, rgba(255, 255, 255, 0.89), white);
-}
-
-.scroll-btn-left {
-  background: linear-gradient(to right, white, rgba(255, 255, 255, 0.89));
 }
 
 .scroll-btn mat-icon {
-  height: 53px
+  height: 46px;
+  width: 28px;
 }
 
 .campaign-horizontal-list {
@@ -26,25 +22,28 @@
   margin: 0;
   padding: 0;
   overflow: hidden;
-  box-shadow: #dadada 0 1px 5px;
+  box-shadow: #666666 1px 1px 4px;
 }
 
 .campaign-entry {
-  border: 1px solid #dadada;
-  min-width: 120px;
-  width: 20%;
-  padding: 15px;
+  border: 1px solid #222222;
+  min-width: 20%;
+  max-height: 4em;
+  padding: 10px 0;
   text-align: center;
   cursor: pointer;
   font-size: 16px;
   float: left;
-  color: #333333;
+  background: #424242;
+  color: #9d9d9d;
 }
 
 .active {
-  background: #e7e7e7;
+  background: #222222;
+  color: white;
+  border-bottom: 3px solid #ffd740;
 }
 
 .campaign-entry:hover {
-  background: #f9f9f9;
+  border-bottom: 3px solid #ffd740;
 }

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html

@@ -1,4 +1,4 @@
-<div class="scroll-btn scroll-btn-left"
+<div class="scroll-btn"
      *ngIf="isLeftScrollVisible"
      (mouseenter)="setRepeater(-10)"
      (mouseleave)="clearRepeater()">

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild} from '@angular/core';
 import {Campaign} from '../../../models/model-interfaces';
 
 @Component({
@@ -6,7 +6,7 @@ import {Campaign} from '../../../models/model-interfaces';
   templateUrl: './campaign-navigation.component.html',
   styleUrls: ['./campaign-navigation.component.css']
 })
-export class CampaignNavigationComponent implements OnInit {
+export class CampaignNavigationComponent implements OnChanges {
 
   @Input() campaigns: Campaign[];
 
@@ -22,7 +22,7 @@ export class CampaignNavigationComponent implements OnInit {
 
   repeater;
 
-  ngOnInit() {
+  ngOnChanges() {
     this.isRightScrollVisible = this.campaigns.length > 4;
   }
 

static/src/app/statistic/campaign/overview/campaign-overview.component.css

@@ -6,13 +6,13 @@
   padding-left: 5%;
 }
 
-:host /deep/ .carousel-indicators {
-  display: none;
+mat-button-toggle.mat-button-toggle-checked {
+  background: #ffffff;
 }
 
-:host /deep/ .carousel-control {
-  width: 5%;
-  cursor: pointer;
+mat-button-toggle {
+  color: #666666;
+  background: #e7e7e7;
 }
 
 :host /deep/ .chart-legend {

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

@@ -1,14 +1,19 @@
 <div class="slide-chart-container" style="height: 100px;padding-top: 20px; margin-top: 10px;">
-  <div class="btn btn-default" [style.background]="isActiveSlide(0)"
-       (click)="goToSlide(0)" *ngIf="id != 'all'">Gesamtpunktzahl
-  </div>
-  <div class="btn btn-default" [style.background]="isActiveSlide(1)"
-       (click)="goToSlide(1)">Punkte je Schlacht
-  </div>
-  <div class="btn btn-default" [style.background]="isActiveSlide(2)"
-       (click)="goToSlide(2)">Spielerzahlen
-  </div>
+  <mat-button-toggle-group #viewToggle="matButtonToggleGroup"
+                           [value]="this.id !== 'all' ? '0' : '1'"
+                           (change)="goToSlide(viewToggle.value)">
+    <mat-button-toggle *ngIf="id != 'all'" value="0">
+      Gesamtpunktzahl
+    </mat-button-toggle>
+    <mat-button-toggle value="1">
+      Punkte je Schlacht
+    </mat-button-toggle>
+    <mat-button-toggle value="2">
+      Spielerzahlen
+    </mat-button-toggle>
+  </mat-button-toggle-group>
 </div>
+
 <div class="fade-in">
   <div class="slide-chart-container">
     <ngx-charts-line-chart

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

@@ -6,9 +6,9 @@ import {Fraction} from '../../../utils/fraction.enum';
 
 
 @Component({
-  selector: 'stats-overview',
-  templateUrl: './stats-overview.component.html',
-  styleUrls: ['./stats-overview.component.css', '../../../style/list-entry.css', '../../../style/overview.css']
+  selector: 'cc-campaign-overview',
+  templateUrl: './campaign-overview.component.html',
+  styleUrls: ['./campaign-overview.component.css']
 })
 export class StatisticOverviewComponent implements OnInit {
 
@@ -21,7 +21,6 @@ export class StatisticOverviewComponent implements OnInit {
   pointSumData: any[] = [];
   playerData: any[] = [];
   currentData: any[] = [];
-  activeSlideIndex;
 
   colorScheme = {
     domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
@@ -86,8 +85,8 @@ export class StatisticOverviewComponent implements OnInit {
     });
   }
 
-  goToSlide(index: number) {
-    switch (index) {
+  goToSlide(index) {
+    switch (parseInt(index, 10)) {
       case 0:
         this.currentData = this.pointSumData;
         this.yAxisLabel = 'Gesamtpunkte';
@@ -101,7 +100,6 @@ export class StatisticOverviewComponent implements OnInit {
         this.yAxisLabel = 'Anzahl Spieler';
         break;
     }
-    this.activeSlideIndex = index;
   }
 
   initChart(wars: any[]) {
@@ -153,8 +151,4 @@ export class StatisticOverviewComponent implements OnInit {
     }
     Object.assign(this, this.currentData);
   }
-
-  isActiveSlide(index) {
-    return this.activeSlideIndex === index ? '#d9edf7' : 'white';
-  }
 }

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

@@ -16,6 +16,7 @@
   position: fixed;
   top: calc(100vh - 35px);
   left: -10px;
-  background: white;
+  background: #424242;
   border: 1px solid #dadada;
+  box-shadow: #ffd740 0 0 3px;
 }

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

@@ -1,7 +1,6 @@
 import {RouterModule, Routes} from '@angular/router';
 import {StatisticComponent} from './stats.component';
 import {WarListComponent} from './war/war-list/war-list.component';
-import {StatisticOverviewComponent} from './campaign/overview/stats-overview.component';
 import {WarItemComponent} from './war/war-list/war-item.component';
 import {ModuleWithProviders} from '@angular/core';
 import {CampaignSubmitComponent} from './campaign/campaign-submit/campaign-submit.component';
@@ -14,6 +13,7 @@ import {WarHeaderComponent} from './war/war-header/war-header.component';
 import {WarEditComponent} from './war/war-edit/war-edit.component';
 import {LoginGuardMT} from '../login';
 import {CampaignNavigationComponent} from './campaign/campaign-navigation/campaign-navigation.component';
+import {StatisticOverviewComponent} from './campaign/overview/campaign-overview.component';
 
 
 export const statsRoutes: Routes = [

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

@@ -21,8 +21,8 @@
 }
 
 .select-indicator {
-  width: 30px;
-  height: 30px;
+  width: 29px;
+  height: 29px;
   position: absolute;
   left: calc(100% + 11px);
   background: -moz-linear-gradient(45deg, white 50%, transparent 50%);

static/src/styles.css

@@ -46,6 +46,7 @@ form {
   position: static;
   float: left;
   border-right: thin solid #dadada;
+  box-shadow: #dadada 1px 1px 6px;
 }
 
 #right {