From 04ff22fafc8a2a161a7ab403febd159b27a1a288 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Wed, 27 Feb 2019 16:38:46 +0100
Subject: [PATCH] Improve responsive layout

---
 static/src/app/app.component.html                  |  2 +-
 .../app/army/army-squad/army-squad.component.scss  |  1 +
 static/src/app/army/army.component.scss            |  7 ++++---
 .../pub/rank-overview/rank-overview.component.scss |  5 +----
 static/src/app/statistic/stats.component.html      | 14 ++++++++------
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html
index 8393bea..1cc35d7 100644
--- a/static/src/app/app.component.html
+++ b/static/src/app/app.component.html
@@ -14,7 +14,7 @@
     </mat-sidenav>
   </mat-sidenav-container>
 
-  <div (click)="sidenav.close()">
+  <div style="overflow-x: auto;position: relative;min-height: calc(100vh - 50px);" (click)="sidenav.close()">
     <router-outlet></router-outlet>
     <div id="left">
       <router-outlet name="left"></router-outlet>
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 e5ca46b..f150a4b 100644
--- a/static/src/app/army/army-squad/army-squad.component.scss
+++ b/static/src/app/army/army-squad/army-squad.component.scss
@@ -10,6 +10,7 @@
 
   img {
     right: 3vw;
+    max-width: 27%;
   }
 
   div.name-cell {
diff --git a/static/src/app/army/army.component.scss b/static/src/app/army/army.component.scss
index 1718803..20a97a1 100644
--- a/static/src/app/army/army.component.scss
+++ b/static/src/app/army/army.component.scss
@@ -22,12 +22,13 @@
 
     h3 {
       background: #222;
+      font-size: 18px;
       margin: 0.2em 0;
       padding: 1.5vh 0;
 
       button {
         position: absolute;
-        margin-top: -7px;
+        margin-top: -10px;
         display: inline-block;
 
         &.switch-btn-blufor {
@@ -40,8 +41,8 @@
         }
 
         mat-icon {
-          width: 3em;
-          height: 3em;
+          width: 2.5em;
+          height: 2.5em;
         }
       }
     }
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 dc92687..4f3cfea 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.scss
+++ b/static/src/app/pub/rank-overview/rank-overview.component.scss
@@ -39,12 +39,9 @@
   td > img {
     height: 13vh !important;
     max-height: 120px;
+    max-width: 100%;
     padding: 4px;
   }
-
-  :host {
-    margin-bottom: -50vh;
-  }
 }
 
 table {
diff --git a/static/src/app/statistic/stats.component.html b/static/src/app/statistic/stats.component.html
index f82158e..f40f096 100644
--- a/static/src/app/statistic/stats.component.html
+++ b/static/src/app/statistic/stats.component.html
@@ -1,9 +1,11 @@
-<campaign-navigation
-  [selectedCampaignId]="selectedCampaign._id"
-  (campaignSelect)="switchCampaign($event)"
-  (campaignEdit)="editCampaign($event)"
-  (campaignDelete)="deleteCampaign($event)">
-</campaign-navigation>
+<div>
+  <campaign-navigation
+    [selectedCampaignId]="selectedCampaign._id"
+    (campaignSelect)="switchCampaign($event)"
+    (campaignEdit)="editCampaign($event)"
+    (campaignDelete)="deleteCampaign($event)">
+  </campaign-navigation>
+</div>
 
 <div class="side-bar"
      [ngClass]="{collapsed: collapsed}"