static/src/app/app.component.css

@@ -1,3 +1,10 @@
+html {
+  height: 100%;
+}
+body {
+  min-height: 100%;
+}
+
 ul {
   list-style-type: none;
   margin: 0;
@@ -8,6 +15,17 @@ 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,7 +1,6 @@
 :host {
   display: flow-root;
   height: 100%;
-  min-height: 100vh;
   width: 100%;
   margin-top: -23px;
   padding-top: 23px;
@@ -9,7 +8,7 @@
   background-image: url('../../../assets/bg.jpg');
   background-size: cover;
   background-attachment: fixed;
-  background-position: top;
+  background-position: center;
   background-repeat: no-repeat;
 }
 
@@ -28,7 +27,8 @@
 
 .return-button {
   position: absolute;
-  padding-left: 5px;
+  display: block;
+  width: auto;
 }
 
 .table {

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

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

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

@@ -4,14 +4,6 @@
   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;
 }
@@ -46,8 +38,39 @@
   border-top-right-radius: 0;
 }
 
-button {
+.account-wall {
-  width: 100%;
+  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;
 }
 
 /* Loading Animation */

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

@@ -1,6 +1,7 @@
 <form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
-  <div class="row">
+
-    <h2 class="form-signin-heading">Login</h2>
+  <div class="row" style="position: absolute;width: 400px;left: 40%;">
+    <h2 style="text-align: center;" class="form-signin-heading">Anmelden</h2>
 
     <label for="inputEmail" class="sr-only">Benutzername</label>
     <input #userName id="inputEmail" class="form-control" placeholder="Benutzername" required="" autofocus="">
@@ -8,12 +9,15 @@
     <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 mat-stroked-button type="submit">
+      <button type="submit" class="btn btn-lg btn-block btn-primary">
         <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,7 +1,6 @@
 :host {
   display: flow-root;
   height: 100%;
-  min-height: 100vh;
   width: 100%;
   margin-top: -23px;
   padding-top: 23px;
@@ -9,7 +8,7 @@
   background-image: url('../../../assets/bg.jpg');
   background-size: cover;
   background-attachment: fixed;
-  background-position: top;
+  background-position: center;
   background-repeat: no-repeat;
 }
 

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

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

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

@@ -1,6 +1,6 @@
 .scroll-btn {
   position: absolute;
-  height: 46px;
+  height: 53px;
   width: 32px;
   cursor: pointer;
 }
@@ -8,11 +8,15 @@
 .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: 46px;
+  height: 53px
-  width: 28px;
 }
 
 .campaign-horizontal-list {
@@ -22,28 +26,25 @@
   margin: 0;
   padding: 0;
   overflow: hidden;
-  box-shadow: #666666 1px 1px 4px;
+  box-shadow: #dadada 0 1px 5px;
 }
 
 .campaign-entry {
-  border: 1px solid #222222;
+  border: 1px solid #dadada;
-  min-width: 20%;
+  min-width: 120px;
-  max-height: 4em;
+  width: 20%;
-  padding: 10px 0;
+  padding: 15px;
   text-align: center;
   cursor: pointer;
   font-size: 16px;
   float: left;
-  background: #424242;
+  color: #333333;
-  color: #9d9d9d;
 }
 
 .active {
-  background: #222222;
+  background: #e7e7e7;
-  color: white;
-  border-bottom: 3px solid #ffd740;
 }
 
 .campaign-entry:hover {
-  border-bottom: 3px solid #ffd740;
+  background: #f9f9f9;
 }

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

@@ -1,4 +1,4 @@
-<div class="scroll-btn"
+<div class="scroll-btn scroll-btn-left"
      *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, OnChanges, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnInit, 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 OnChanges {
+export class CampaignNavigationComponent implements OnInit {
 
   @Input() campaigns: Campaign[];
 
@@ -22,7 +22,7 @@ export class CampaignNavigationComponent implements OnChanges {
 
   repeater;
 
-  ngOnChanges() {
+  ngOnInit() {
     this.isRightScrollVisible = this.campaigns.length > 4;
   }
 

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

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

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

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

@@ -6,9 +6,9 @@ import {Fraction} from '../../../utils/fraction.enum';
 
 
 @Component({
-  selector: 'cc-campaign-overview',
+  selector: 'stats-overview',
-  templateUrl: './campaign-overview.component.html',
+  templateUrl: './stats-overview.component.html',
-  styleUrls: ['./campaign-overview.component.css']
+  styleUrls: ['./stats-overview.component.css', '../../../style/list-entry.css', '../../../style/overview.css']
 })
 export class StatisticOverviewComponent implements OnInit {
 
@@ -21,6 +21,7 @@ export class StatisticOverviewComponent implements OnInit {
   pointSumData: any[] = [];
   playerData: any[] = [];
   currentData: any[] = [];
+  activeSlideIndex;
 
   colorScheme = {
     domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
@@ -85,8 +86,8 @@ export class StatisticOverviewComponent implements OnInit {
     });
   }
 
-  goToSlide(index) {
+  goToSlide(index: number) {
-    switch (parseInt(index, 10)) {
+    switch (index) {
       case 0:
         this.currentData = this.pointSumData;
         this.yAxisLabel = 'Gesamtpunkte';
@@ -100,6 +101,7 @@ export class StatisticOverviewComponent implements OnInit {
         this.yAxisLabel = 'Anzahl Spieler';
         break;
     }
+    this.activeSlideIndex = index;
   }
 
   initChart(wars: any[]) {
@@ -151,4 +153,8 @@ 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,7 +16,6 @@
   position: fixed;
   top: calc(100vh - 35px);
   left: -10px;
-  background: #424242;
+  background: white;
   border: 1px solid #dadada;
-  box-shadow: #ffd740 0 0 3px;
 }

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

@@ -1,6 +1,7 @@
 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';
@@ -13,7 +14,6 @@ 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: 29px;
+  width: 30px;
-  height: 29px;
+  height: 30px;
   position: absolute;
   left: calc(100% + 11px);
   background: -moz-linear-gradient(45deg, white 50%, transparent 50%);

static/src/styles.css

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