mobile ready rank overview

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';

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">

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%;
 }