mobile ready decoration overview

static/src/app/app.component.scss

@@ -1,9 +1,9 @@
 @import "style/load-indicator.scss";
 
 mat-sidenav-container, mat-sidenav-content, mat-sidenav {
-  height: 100vh;
+  height: calc(100vh - 65px);
+  min-height: fit-content;
   display: inline;
-  background: #fdfdfd;
 }
 
 mat-sidenav {

static/src/app/common/navigation/navigation-header.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="primary">
-  <div fxHide.gt-sm style="position:absolute;">
+  <div fxHide.gt-sm>
     <button mat-icon-button (click)="onToggleSidenav()">
       <mat-icon svgIcon="menu"></mat-icon>
     </button>

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

@@ -9,10 +9,28 @@ h1 {
   position: relative;
   z-index: 0;
   margin: auto 140px 30px;
+}
 
 @media all and (max-width: 959px) {
+  .decoration-overview-container {
     margin: auto;
   }
+
+  h1 {
+    font-size: 26px;
+    margin: 0.5em 0;
+  }
+
+  :host {
+    margin-bottom: -50vh;
+  }
+}
+
+:host /deep/ .mat-tab-group {
+  @media all and (max-width: 959px) {
+    float: left;
+    width: 100vw;
+  }
 }
 
 :host /deep/ .mat-tab-header {
@@ -41,6 +59,10 @@ h1 {
   height: calc(100vh - 241px);
   min-width: 560px;
   padding: 1em 1.5em;
+
+  @media all and (max-width: 959px) {
+    padding: 0;
+  }
 }
 
 .fraction-side-bar {
@@ -50,9 +72,13 @@ h1 {
   height: calc(100vh - 192px);
   background: #222222;;
   box-shadow: #666666 2px 2px 8px;
+
+  @media all and (max-width: 959px) {
+    width: 100%;
+    height: 50px
   }
 
-.fraction-side-bar > div {
+  > div {
     text-align: center;
     padding: 12px 25px;
     margin-bottom: 15px;
@@ -61,17 +87,27 @@ h1 {
     cursor: pointer;
     border-top: 1px solid #666666;
     border-bottom: 1px solid #666666;
+
+    @media all and (max-width: 959px) {
+      width: 33%;
+      float:left;
     }
 
-.fraction-side-bar > div:first-child {
+    &.active {
-  margin-top: 100%;
-}
-
-.fraction-side-bar > div.active {
       background-color: #080808;
       color: white;
     }
 
+    &:first-child {
+      margin-top: 100%;
+
+      @media all and (max-width: 959px) {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
 /* SCROLL BAR */
 
 :host /deep/ .mat-tab-body-content::-webkit-scrollbar {

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.scss

@@ -7,6 +7,11 @@
   overflow: hidden;
   float: left;
   cursor: pointer;
+
+  @media all and (max-width: 959px) {
+    width: 45vw;
+    margin: 1vh 2vw;
+  }
 }
 
 .decoration-card:hover {

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

@@ -36,6 +36,10 @@
   float: left;
   background: #424242;
   color: #9d9d9d;
+
+  @media all and (max-width: 959px) {
+    min-width: 33%;
+  }
 }
 
 .active {

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

@@ -1,5 +1,6 @@
 <div class="slide-chart-container" style="height: 100px;padding-top: 20px; margin-top: 10px;">
-  <mat-button-toggle-group #viewToggle="matButtonToggleGroup"
+  <mat-button-toggle-group class="chart-select-group"
+                           #viewToggle="matButtonToggleGroup"
                            [value]="this.id !== 'all' ? '0' : '1'"
                            (change)="goToSlide(viewToggle.value)">
     <mat-button-toggle *ngIf="id != 'all'" value="0">

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

@@ -4,6 +4,21 @@
   height: 650px;
   margin: auto;
   padding-left: 5%;
+
+  @media all and (max-width: 959px) {
+    width: 100%;
+    min-width: unset;
+    padding-top: 105px;
+  }
+}
+
+.chart-select-group {
+  @media all and (max-width: 959px) {
+    display: inline-grid;
+    width: 70%;
+    text-align: center;
+    margin-left: 10%;
+  }
 }
 
 mat-button-toggle.mat-button-toggle-checked {

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

@@ -40,6 +40,10 @@ export class StatisticComponent implements OnInit {
           this.resolveCampaignFromUrl();
         });
 
+    if (window.innerWidth <= BaseConfig.responsive.breakpointPx) {
+      this.collapsed = true;
+      this.collapseBtnVisible = false;
+    }
     Observable.fromEvent(window, 'resize').subscribe(event => {
       if (event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx) {
         this.collapsed = true;

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

@@ -90,6 +90,12 @@
   position: fixed;
   border-right: 1px solid #dadada;
   height: 100vh;
+  top: 0;
+  z-index: -1;
+
+  @media all and (max-width: 959px) {
+    display: none;
+  }
 }
 
 /* Table Scrollbar BEGIN */

static/src/app/style/background-image.scss

@@ -1,7 +1,7 @@
 :host {
   display: flow-root;
   height: 100%;
-  min-height: 100vh;
+  min-height: calc(100vh - 50px);
   width: 100%;
   min-width: fit-content;
   padding-bottom: 23px;

static/src/styles.scss

@@ -62,6 +62,11 @@ form {
 
 #right {
   display: flow-root;
+
+  @media all and (max-width: 959px) {
+    display: inline-block;
+    width: 100%;
+  }
 }
 
 /* MATERIAL */