static/src/app/admin/admin.component.css

@@ -1,5 +1,13 @@
 .overview {
-  padding: 80px 0 0 10%!important;
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  bottom: 20px;
+  width: 100%;
+  padding-left: 50px;
+  padding-top: 190px;
+  margin-left: 10px;
+  height: 100vh;
 }
 
 .trash {
@@ -24,11 +32,3 @@
 .cell-outline {
   outline: 1px solid #D4D4D4;
 }
-
-.label {
-  display: block;
-  position: absolute;
-  font-size: 12px;
-  padding: 5px;
-  margin-left: 25%;
-}

static/src/app/admin/admin.component.html

@@ -3,7 +3,8 @@
   <h2>Admin Panel</h2>
 
   <span *ngIf="showSuccessLabel"
-        class="label label-success label-small">
+        class="label label-success label-small"
+        style="margin-left: inherit">
         Erfolgreich gespeichert
   </span>
 

static/src/app/admin/admin.component.ts

@@ -8,7 +8,7 @@ import {SquadService} from "../services/squad-service/squad.service";
 @Component({
   selector: 'admin-panel',
   templateUrl: './admin.component.html',
-  styleUrls: ['./admin.component.css', '../style/overview.css']
+  styleUrls: ['./admin.component.css']
 })
 export class AdminComponent {
 

static/src/app/army/army-member.component.css

@@ -1,14 +1,14 @@
-.army-member-view {
+.overview {
-  width: 90%;
   height: 100vh;
+  width: 90%;
   padding: 5px;
   margin: auto;
+  position: relative;
+  left: -1%;
 }
 
-.army-member-view-container {
+:host /deep/ #right {
-  width: 90%;
+  padding-left: 0;
-  min-width: 870px;
-  margin:auto
 }
 
 .return-button {

static/src/app/army/army-member.component.html

@@ -1,5 +1,5 @@
-<div class="army-member-view">
+<div class="overview">
-  <div class="army-member-view-container">
+  <div style="width: 90%; min-width: 870px; margin:auto">
     <div class="return-button">
       <span class="btn btn-default" style="position:absolute;" (click)="backToOverview()">< zurück zur Übersicht</span>
       <h3 class="text-center" [ngClass]="user.squad?.fraction === 'BLUFOR' ? 'blufor' : 'opfor'">

static/src/app/decorations/edit-decoration/edit-decoration.component.ts

@@ -7,7 +7,7 @@ import {Subscription} from "rxjs/Subscription";
 
 @Component({
   templateUrl: './edit-decoration.component.html',
-  styleUrls: ['./edit-decoration.component.css', '../../style/entry-form.css', '../../style/overview.css']
+  styleUrls: ['./edit-decoration.component.css', '../../style/entry-form.css']
 })
 export class EditDecorationComponent {
 

static/src/app/ranks/edit-rank/edit-rank.component.ts

@@ -8,7 +8,7 @@ import {Subscription} from "rxjs/Subscription";
 
 @Component({
   templateUrl: './edit-rank.component.html',
-  styleUrls: ['./edit-rank.component.css', '../../style/entry-form.css', '../../style/overview.css']
+  styleUrls: ['./edit-rank.component.css', '../../style/entry-form.css']
 })
 export class EditRankComponent {
 

static/src/app/request/award/req-award.component.css

@@ -1,8 +1,3 @@
-.overview {
-  width: 100%!important;
-  margin-left: 25px!important;
-}
-
 .decoration-preview {
   padding: 5px;
 }
@@ -19,24 +14,30 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 75%;
+  width: 65%;
-  min-width: 800px;
+}
-  padding: 5px;
+
+/* enable scrolling for long list of awardings */
+.overview {
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+  border-left: thin solid lightgrey;
+  padding: 20px 0 0 50px;
+  margin-left: 10px;
+  height: 100vh;
+  bottom: 10px;
 }
 
 .form-group {
   width: 25%;
-  min-width: 300px;
 }
 
 h3 {
   margin: 80px 0 20px -20px;
 }
 
-.label {
+label {
   display: block;
-  position: absolute;
-  font-size: 12px;
-  padding: 5px;
-  margin-left: 25%;
 }

static/src/app/request/award/req-award.component.html

@@ -17,6 +17,7 @@
     </select>
   </div>
 
+
   <div class="form-group">
     <label for="decoration">Auszeichnung</label>
     <select class="form-control"
@@ -63,7 +64,8 @@
   </button>
 
   <span *ngIf="showSuccessLabel"
-        class="label label-success label-small">
+        class="label label-success label-small"
+        style="margin-left: inherit">
   Erfolgreich gespeichert
   </span>
 

static/src/app/request/award/req-award.component.ts

@@ -10,7 +10,7 @@ import {LoginService} from "../../services/login-service/login-service";
 
 @Component({
   templateUrl: './req-award.component.html',
-  styleUrls: ['./req-award.component.css', '../../style/overview.css'],
+  styleUrls: ['./req-award.component.css'],
 })
 export class RequestAwardComponent {
 

static/src/app/request/confirm-award/confirm-award.component.css

@@ -1,7 +1,3 @@
-.overview {
-  margin-left: 25px!important;
-}
-
 .decoration-preview {
   padding: 5px;
 }
@@ -19,7 +15,19 @@
   margin-top: 40px;
   overflow-x: auto;
   width: 75%;
-  padding: 5px;
+}
+
+/* enable scrolling for long list of awardings */
+.overview {
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+  border-left: thin solid lightgrey;
+  padding: 20px 0 0 50px;
+  margin-left: 10px;
+  height: 100vh;
+  bottom: 10px;
 }
 
 .form-group {
@@ -30,10 +38,6 @@ h3 {
   margin: 80px 0 20px -20px;
 }
 
-.label {
+label {
   display: block;
-  position: absolute;
-  font-size: 12px;
-  padding: 5px;
-  margin-left: 25%;
 }

static/src/app/request/confirm-award/confirm-award.component.html

@@ -2,7 +2,8 @@
   <h3>Offene Anträge - Auszeichnungen</h3>
 
   <span *ngIf="showSuccessLabel"
-        class="label label-success label-small">
+        class="label label-success label-small"
+        style="margin-left: inherit">
   Erfolgreich gespeichert
   </span>
 

static/src/app/request/confirm-award/confirm-award.component.ts

@@ -6,7 +6,7 @@ import {LoginService} from "../../services/login-service/login-service";
 
 @Component({
   templateUrl: './confirm-award.component.html',
-  styleUrls: ['./confirm-award.component.css', '../../style/overview.css'],
+  styleUrls: ['./confirm-award.component.css'],
 })
 export class ConfirmAwardComponent {
 

static/src/app/request/confirm-promotion/confirm-promotion.component.css

@@ -1,7 +1,3 @@
-.overview {
-  margin-left: 25px!important;
-}
-
 .decoration-preview {
   padding: 5px;
 }
@@ -19,7 +15,19 @@
   margin-top: 40px;
   overflow-x: auto;
   width: 65%;
-  padding: 5px;
+}
+
+/* enable scrolling for long list of awardings */
+.overview {
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+  border-left: thin solid lightgrey;
+  padding: 20px 0 0 50px;
+  margin-left: 10px;
+  height: 100vh;
+  bottom: 10px;
 }
 
 .form-group {
@@ -30,10 +38,6 @@ h3 {
   margin: 80px 0 20px -20px;
 }
 
-.label {
+label {
   display: block;
-  position: absolute;
-  font-size: 12px;
-  padding: 5px;
-  margin-left: 25%;
 }

static/src/app/request/confirm-promotion/confirm-promotion.component.html

@@ -2,7 +2,8 @@
   <h3>Offene Anträge - Beförderung</h3>
 
   <span *ngIf="showSuccessLabel"
-        class="label label-success label-small">
+        class="label label-success label-small"
+        style="margin-left: inherit">
   Erfolgreich gespeichert
   </span>
 

static/src/app/request/confirm-promotion/confirm-promotion.component.ts

@@ -7,7 +7,7 @@ import {LoginService} from "../../services/login-service/login-service";
 
 @Component({
   templateUrl: './confirm-promotion.component.html',
-  styleUrls: ['./confirm-promotion.component.css', '../../style/overview.css'],
+  styleUrls: ['./confirm-promotion.component.css'],
 })
 export class ConfirmPromotionComponent {
 

static/src/app/request/promotion/req-promotion.component.css

@@ -1,7 +1,3 @@
-.overview {
-  margin-left: 25px!important;
-}
-
 .decoration-preview {
   padding: 5px;
 }
@@ -19,23 +15,29 @@
   margin-top: 40px;
   overflow-x: auto;
   width: 65%;
-  min-width: 800px;
+}
-  padding: 5px;
+
+/* enable scrolling for long list of awardings */
+.overview {
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+  border-left: thin solid lightgrey;
+  padding: 20px 0 0 50px;
+  margin-left: 10px;
+  height: 100vh;
+  bottom: 10px;
 }
 
 .form-group {
   width: 25%;
-  min-width: 300px;
 }
 
 h3 {
   margin: 80px 0 20px -20px;
 }
 
-.label {
+label {
   display: block;
-  position: absolute;
-  font-size: 12px;
-  padding: 5px;
-  margin-left: 25%;
 }

static/src/app/request/promotion/req-promotion.component.html

@@ -58,7 +58,8 @@
   </button>
 
   <span *ngIf="showSuccessLabel"
-        class="label label-success label-small">
+        class="label label-success label-small"
+        style="margin-left: inherit">
   Erfolgreich gespeichert
   </span>
 

static/src/app/request/promotion/req-promotion.component.ts

@@ -10,7 +10,7 @@ import {LoginService} from "../../services/login-service/login-service";
 
 @Component({
   templateUrl: './req-promotion.component.html',
-  styleUrls: ['./req-promotion.component.css', '../../style/overview.css'],
+  styleUrls: ['./req-promotion.component.css'],
 })
 export class RequestPromotionComponent {
 

static/src/app/squads/edit-squad/edit-squad.component.ts

@@ -8,7 +8,7 @@ import {Subscription} from "rxjs/Subscription";
 
 @Component({
   templateUrl: './edit-squad.component.html',
-  styleUrls: ['./edit-squad.component.css', '../../style/entry-form.css', '../../style/overview.css']
+  styleUrls: ['./edit-squad.component.css', '../../style/entry-form.css']
 })
 export class EditSquadComponent {
 

static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css

@@ -1,3 +1,13 @@
+.overview {
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  border-left: thin solid lightgrey;
+  bottom: 20px;
+  padding: 70px 1% 0 1%;
+  height: 100vh;
+}
+
 h2 {
   padding: 10px;
 }

static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html

@@ -1,4 +1,4 @@
-<div class="overview fade-in" style="padding: 70px 1% 0 1%;" xmlns="http://www.w3.org/1999/html">
+<div class="overview fade-in" xmlns="http://www.w3.org/1999/html">
   <h2 class="pull-left">Spielerstatistik - {{campaignPlayer.name}}</h2>
   <h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>
 

static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts

@@ -9,8 +9,7 @@ import {Location} from '@angular/common';
 @Component({
   selector: 'campaign-player-detail',
   templateUrl: './campaign-player-detail.component.html',
-  styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css',
+  styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
-    '../../style/hide-scrollbar.css', '../../style/overview.css']
 })
 export class CampaignPlayerDetailComponent {
 

static/src/app/statistic/campaign-submit/campaign-submit.component.css

@@ -0,0 +1,8 @@
+.overview {
+  position: fixed;
+  width: 25%;
+  min-width: 300px;
+  padding-left: 50px;
+  padding-top: 70px;
+  margin-left: 10px;
+}

static/src/app/statistic/campaign-submit/campaign-submit.component.ts

@@ -8,7 +8,7 @@ import {CampaignService} from "../../services/campaign-service/campaign.service"
 @Component({
   selector: 'campaign-submit',
   templateUrl: './campaign-submit.component.html',
-  styleUrls: ['./campaign-submit.component.css', '../../style/entry-form.css', '../../style/overview.css']
+  styleUrls: ['./campaign-submit.component.css']
 })
 export class CampaignSubmitComponent {
 

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

@@ -8,7 +8,7 @@ import {ChartUtils} from "../../utils/chart-utils";
 @Component({
   selector: 'stats-overview',
   templateUrl: './stats-overview.component.html',
-  styleUrls: ['./stats-overview.component.css', '../../style/list-entry.css',  '../../style/overview.css'],
+  styleUrls: ['./stats-overview.component.css', '../../style/list-entry.css'],
   inputs: ['campaigns'],
   providers: [{provide: CarouselConfig, useValue: {interval: false}}]
 })

static/src/app/statistic/war-submit/war-submit.component.css

@@ -0,0 +1,8 @@
+.overview {
+  position: fixed;
+  width: 25%;
+  min-width: 300px;
+  padding-left: 50px;
+  padding-top: 70px;
+  margin-left: 10px;
+}

static/src/app/statistic/war-submit/war-submit.component.ts

@@ -9,8 +9,7 @@ import {CampaignService} from "../../services/campaign-service/campaign.service"
 @Component({
   selector: 'war-submit',
   templateUrl: './war-submit.component.html',
-  styleUrls: ['./war-submit.component.css', '../../style/load-indicator.css',
+  styleUrls: ['./war-submit.component.css', '../../style/load-indicator.css']
-    '../../style/entry-form.css', '../../style/overview.css']
 })
 export class WarSubmitComponent {
 

static/src/app/style/entry-form.css

@@ -1,10 +1,3 @@
-.overview {
-  overflow: hidden!important;
-  padding-top: 80px!important;
-  width: 20%;
-  min-width: 280px;
-}
-
 h3 {
   margin-left: -20px;
 }
@@ -17,6 +10,17 @@ label {
   border-color: red;
 }
 
+.overview {
+  position: fixed;
+  width: 25%;
+  min-width: 500px;
+  border-left: thin solid lightgrey;
+  padding-left: 50px;
+  padding-top: 20px;
+  margin-left: 10px;
+  height: 100vh;
+}
+
 .preview-image {
   margin: 10px;
 }

static/src/app/style/load-indicator.css

@@ -1,7 +1,9 @@
 .load-indicator {
   position: absolute;
   top: 50%;
-  left: 48.5%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
   z-index: 1;
 }
 

static/src/app/style/overview.css

@@ -1,9 +0,0 @@
-.overview {
-  position: fixed;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  border-left: thin solid lightgrey;
-  padding: 20px 0 0 50px;
-  height: 100vh;
-  bottom: 10px;
-}

static/src/app/users/award-user/award-user.component.css

@@ -18,6 +18,19 @@
   width: 50%;
 }
 
+/* enable scrolling for long list of awardings */
+.overview {
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+  border-left: thin solid lightgrey;
+  padding: 20px 0 0 50px;
+  margin-left: 10px;
+  height: 100vh;
+  bottom: 10px;
+}
+
 .form-group {
   width: 25%;
 }

static/src/app/users/award-user/award-user.component.ts

@@ -8,7 +8,7 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
 
 @Component({
   templateUrl: './award-user.component.html',
-  styleUrls: ['./award-user.component.css', '../../style/overview.css', '../../style/hide-scrollbar.css'],
+  styleUrls: ['./award-user.component.css'],
 })
 export class AwardUserComponent {
 

static/src/app/users/edit-user/edit-user.component.ts

@@ -10,7 +10,7 @@ import {NgForm} from "@angular/forms";
 
 @Component({
   templateUrl: './edit-user.component.html',
-  styleUrls: ['./edit-user.component.css', '../../style/entry-form.css', '../../style/overview.css'],
+  styleUrls: ['./edit-user.component.css', '../../style/entry-form.css'],
 })
 export class EditUserComponent {