From 1938d74b0846da877621f21d870ad76a7462533a Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Tue, 26 Feb 2019 00:23:21 +0100
Subject: [PATCH] mobile ready rank overview

---
 .../decoration-overview.component.scss        |  2 +-
 .../decoration-overview.component.ts          |  1 -
 .../rank-overview.component.html              |  2 +-
 .../rank-overview.component.scss              | 47 +++++++++++++++++++
 4 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.scss b/static/src/app/pub/decoration-overview/decoration-overview.component.scss
index db1cab3..2dff247 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.scss
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.scss
@@ -90,7 +90,7 @@ h1 {
 
     @media all and (max-width: 959px) {
       width: 33%;
-      float:left;
+      float: left;
     }
 
     &.active {
diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
index 1d5e5b4..1a9f236 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
@@ -1,6 +1,5 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-
 import {Fraction} from '../../utils/fraction.enum';
 import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';
diff --git a/static/src/app/pub/rank-overview/rank-overview.component.html b/static/src/app/pub/rank-overview/rank-overview.component.html
index 1df56cb..1e52cd1 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.html
+++ b/static/src/app/pub/rank-overview/rank-overview.component.html
@@ -1,4 +1,4 @@
-<div style="width: 1000px; margin:auto; position: relative;">
+<div class="rank-overview-container">
   <h1>{{'public.ranks.headline' | translate}}</h1>
 
   <div class="column-container pull-left">
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 6d06b56..36016f6 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.scss
+++ b/static/src/app/pub/rank-overview/rank-overview.component.scss
@@ -1,5 +1,52 @@
 @import url('../../style/background-image.scss');
 
+.rank-overview-container {
+  width: 1000px;
+  margin: auto;
+  position: relative;
+}
+
+@media all and (max-width: 959px) {
+  .rank-overview-container {
+    width: 100vw;
+  }
+
+  div.column-container {
+    width: 49vw;
+  }
+
+  h1 {
+    font-size: 26px;
+    margin: 0.5em 0;
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+
+  .mat-column-picture {
+    max-width: 4vw;
+  }
+
+  .mat-column-name {
+    max-width: 7.5vw;
+  }
+
+  td.mat-cell:first-child {
+    padding-left: 1vw;
+  }
+
+  td > img {
+    height: 13vh !important;
+    max-height: 120px;
+    padding: 4px;
+  }
+
+  :host {
+    margin-bottom: -50vh;
+  }
+}
+
 table {
   width: 100%;
 }