From 5d6e3fc0897ca468f2326c294a03a7cd88da0073 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Tue, 26 Feb 2019 15:42:06 +0100
Subject: [PATCH] Make army oveview mobile responsive

---
 static/src/app/app.config.ts                  |  1 +
 .../army/army-squad/army-squad.component.scss | 17 +++++-
 static/src/app/army/army.component.html       | 22 ++++++--
 static/src/app/army/army.component.scss       | 55 +++++++++++++++++++
 static/src/app/army/army.component.ts         | 17 +++++-
 .../rank-overview.component.scss              |  4 +-
 6 files changed, 107 insertions(+), 9 deletions(-)

diff --git a/static/src/app/app.config.ts b/static/src/app/app.config.ts
index 9499120..ec695f6 100644
--- a/static/src/app/app.config.ts
+++ b/static/src/app/app.config.ts
@@ -44,6 +44,7 @@ export const RouteConfig = {
 
 export const BaseConfig = {
   responsive: {
+    breakpointSmallPx: 599,
     breakpointPx: 959,
   },
   i18n: {
diff --git a/static/src/app/army/army-squad/army-squad.component.scss b/static/src/app/army/army-squad/army-squad.component.scss
index d00e68e..771a292 100644
--- a/static/src/app/army/army-squad/army-squad.component.scss
+++ b/static/src/app/army/army-squad/army-squad.component.scss
@@ -3,6 +3,21 @@
   padding: 6px 0;
 }
 
+@media all and (max-width: 599px) {
+  .squad-layout {
+    width: 100vw;
+    padding: 1vh 1vw;
+  }
+
+  img {
+    right: 3vw;
+  }
+
+  div.name-cell {
+    margin-left: 2vw;
+  }
+}
+
 .squad-layout > div {
   clear: both;
 }
@@ -24,7 +39,7 @@
 }
 
 .squad-member-count {
-  float:left;
+  float: left;
   color: whitesmoke;
   margin-left: 42px
 }
diff --git a/static/src/app/army/army.component.html b/static/src/app/army/army.component.html
index 3caa90b..92b49aa 100644
--- a/static/src/app/army/army.component.html
+++ b/static/src/app/army/army.component.html
@@ -1,8 +1,14 @@
-<div style="width: 1100px; margin:auto; position: relative;">
+<div class="army-content-container">
   <h1>{{'public.army.headline' | translate}}</h1>
 
-  <div class="pull-left army-column">
-    <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
+  <div class="pull-left army-column" *ngIf="!isSmallLayout || singleViewSelected === fraction.BLUFOR">
+    <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">
+      {{fraction.BLUFOR}}
+      <button mat-icon-button class="switch-btn-blufor"
+              (click)="singleViewSwitch(fraction.OPFOR)">
+        <mat-icon svgIcon="chevron-right"></mat-icon>
+      </button>
+    </h3>
     <cc-army-squad *ngFor="let squad of army[0].squads"
                    [squad]="squad"
                    squadFraction="BLUFOR"
@@ -11,8 +17,14 @@
     <div class="member-count">{{'public.army.members' | translate}} {{army[0].memberCount}}</div>
   </div>
 
-  <div class="pull-right army-column">
-    <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
+  <div class="pull-right army-column" *ngIf="!isSmallLayout || singleViewSelected === fraction.OPFOR">
+    <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">
+      <button mat-icon-button class="switch-btn-opfor"
+              (click)="singleViewSwitch(fraction.BLUFOR)">
+        <mat-icon svgIcon="chevron-right"></mat-icon>
+      </button>
+      {{fraction.OPFOR}}
+    </h3>
     <cc-army-squad *ngFor="let squad of army[1].squads"
                    [squad]="squad"
                    squadFraction="OPFOR"
diff --git a/static/src/app/army/army.component.scss b/static/src/app/army/army.component.scss
index a140bb4..fa4ea0d 100644
--- a/static/src/app/army/army.component.scss
+++ b/static/src/app/army/army.component.scss
@@ -1,5 +1,56 @@
 @import url('../style/background-image.scss');
 
+.army-content-container {
+  width: 1100px;
+  margin: auto;
+  position: relative;
+}
+
+.army-column-right {
+  float: right;
+}
+
+@media all and (max-width: 599px) {
+  h1 {
+    font-size: 26px;
+    margin: 0.5em 0;
+  }
+
+  .army-content-container {
+    width: 100%;
+  }
+
+  div.army-column {
+    width: 100%;
+
+    h3 {
+      background: #222;
+      margin: 0.2em 0;
+      padding: 1.5vh 0;
+
+      button {
+        position: absolute;
+        margin-top: -7px;
+        display: inline-block;
+
+        &.switch-btn-blufor {
+          right: 5vw;
+        }
+
+        &.switch-btn-opfor {
+          transform: rotate(180deg);
+          left: 5vw;
+        }
+
+        mat-icon {
+          width: 3em;
+          height: 3em;
+        }
+      }
+    }
+  }
+}
+
 .army-column {
   width: 45%;
 }
@@ -8,6 +59,10 @@ h1 {
   text-align: center;
 }
 
+h3 button {
+  display: none;
+}
+
 .army-head {
   font-weight: bolder;
   text-align: center
diff --git a/static/src/app/army/army.component.ts b/static/src/app/army/army.component.ts
index 31e2c9e..5a36203 100644
--- a/static/src/app/army/army.component.ts
+++ b/static/src/app/army/army.component.ts
@@ -3,6 +3,8 @@ import {Army} from '../models/model-interfaces';
 import {ArmyService} from '../services/army-service/army.service';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Fraction} from '../utils/fraction.enum';
+import {BaseConfig} from '../app.config';
+import {Observable} from 'rxjs';
 
 
 @Component({
@@ -12,9 +14,13 @@ import {Fraction} from '../utils/fraction.enum';
 })
 export class ArmyComponent implements OnInit {
 
+  readonly fraction = Fraction;
+
   army: Army[] = [{}, {}];
 
-  readonly fraction = Fraction;
+  singleViewSelected = this.fraction.BLUFOR;
+
+  isSmallLayout;
 
   constructor(private router: Router,
               private route: ActivatedRoute,
@@ -25,9 +31,18 @@ export class ArmyComponent implements OnInit {
     this.armyService.getArmies().subscribe(army => {
       this.army = army;
     });
+
+    this.isSmallLayout = (window.innerWidth <= BaseConfig.responsive.breakpointSmallPx);
+    Observable.fromEvent(window, 'resize').subscribe(event => {
+      this.isSmallLayout = event.target['innerWidth'] <= BaseConfig.responsive.breakpointSmallPx;
+    });
   };
 
   select(memberId) {
     this.router.navigate(['member', memberId], {relativeTo: this.route});
   }
+
+  singleViewSwitch(switchFraction: Fraction) {
+    this.singleViewSelected = switchFraction;
+  }
 }
diff --git a/static/src/app/pub/rank-overview/rank-overview.component.scss b/static/src/app/pub/rank-overview/rank-overview.component.scss
index 36016f6..dc92687 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.scss
+++ b/static/src/app/pub/rank-overview/rank-overview.component.scss
@@ -8,11 +8,11 @@
 
 @media all and (max-width: 959px) {
   .rank-overview-container {
-    width: 100vw;
+    width: 100%;
   }
 
   div.column-container {
-    width: 49vw;
+    width: 49%;
   }
 
   h1 {