static/src/app/models/model-interfaces.ts

@@ -85,7 +85,7 @@ export interface Rank {
 
 export interface Award {
   _id?: string;
-  userId: string | User;
+  userId: string;
   decorationId?: any; // Decoration or string
   reason?: string;
   proposer?: AppUser;

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

@@ -1,68 +1,66 @@
-<div class="request-award-container">
+<form #form="ngForm" class="overview">
-  <form #form="ngForm" class="overview">
+  <h3>{{'request.award.headline' | translate}}</h3>
-    <h3>{{'request.award.headline' | translate}}</h3>
 
-    <div class="form-group">
+  <div class="form-group">
-      <label for="user">{{'request.award.field.user' | translate}}</label>
+    <label for="user">{{'request.award.field.user' | translate}}</label>
-      <select class="form-control"
+    <select class="form-control"
-              name="user"
+            name="user"
-              id="user"
+            id="user"
-              [(ngModel)]="user"
+            [(ngModel)]="user"
-              [compareWith]="equals"
+            [compareWith]="equals"
-              (change)="toggleUser()"
+            (change)="toggleUser()"
-              required>
+            required>
-        <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
+      <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
-        <option *ngFor="let user of users" [ngValue]="user">
+      <option *ngFor="let user of users" [ngValue]="user">
-          {{user.username}}
+        {{user.username}}
-        </option>
+      </option>
-      </select>
+    </select>
+  </div>
+
+  <div class="form-group">
+    <label for="decoration">{{'request.award.field.award' | translate}}</label>
+    <select class="form-control"
+            name="decoration"
+            id="decoration"
+            [(ngModel)]="decoration"
+            [compareWith]="equals"
+            (change)="toggleDecoPreview(decoDescription, decoPreview)"
+            required>
+      <option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
+      <option *ngFor="let deco of decorations" [ngValue]="deco">
+        {{deco.name}}
+      </option>
+    </select>
+  </div>
+
+  <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
+    <div class="col-sm-1 decoration-preview">
+      <img class="center-block" #decoPreview>
     </div>
-
+    <div class="col-sm-2"
-    <div class="form-group">
+         style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
-      <label for="decoration">{{'request.award.field.award' | translate}}</label>
+      &nbsp;
-      <select class="form-control"
-              name="decoration"
-              id="decoration"
-              [(ngModel)]="decoration"
-              [compareWith]="equals"
-              (change)="toggleDecoPreview(decoDescription, decoPreview)"
-              required>
-        <option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
-        <option *ngFor="let deco of decorations" [ngValue]="deco">
-          {{deco.name}}
-        </option>
-      </select>
     </div>
+  </div>
 
-    <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
+  <div class="form-group">
-      <div class="col-sm-1 decoration-preview">
+    <label for="reason">{{'request.award.field.reason' | translate}}</label>
-        <img class="center-block" #decoPreview>
+    <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
-      </div>
+              id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
-      <div class="col-sm-2"
+  </div>
-           style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
-        &nbsp;
-      </div>
-    </div>
 
-    <div class="form-group">
+  <button id="cancel"
-      <label for="reason">{{'request.award.field.reason' | translate}}</label>
+          (click)="cancel()"
-      <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
+          class="btn btn-default">
-                id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
+    {{'request.award.button.cancel' | translate}}
-    </div>
+  </button>
 
-    <button id="cancel"
+  <button id="save"
-            (click)="cancel()"
+          (click)="addAwarding(decoPreview, decoDescription)"
-            class="btn btn-default">
+          class="btn btn-default"
-      {{'request.award.button.cancel' | translate}}
+          [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
-    </button>
+    {{'request.award.button.submit' | translate}}
-
+  </button>
-    <button id="save"
-            (click)="addAwarding(decoPreview, decoDescription)"
-            class="btn btn-default"
-            [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
-      {{'request.award.button.submit' | translate}}
-    </button>
-  </form>
 
   <div class="table-container" *ngIf="showForm">
     <table class="table table-hover">
@@ -115,4 +113,5 @@
       </tbody>
     </table>
   </div>
-</div>
+
+</form>

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

@@ -1,19 +1,18 @@
-div.request-award-container {
+@import url('../../style/overview.scss');
-  margin: 2em auto;
-  width: 95%;
-  min-width: 835px;
 
-  form {
+.overview {
-    width: 33%;
+  width: 100% !important;
-    min-width: 300px;
+  margin-left: 25px !important;
-    margin: auto;
-  }
 }
 
 .decoration-preview {
   padding: 5px;
 }
 
+.trash {
+  cursor: pointer;
+}
+
 .table {
   overflow-wrap: break-word;
   table-layout: fixed;
@@ -22,6 +21,16 @@ div.request-award-container {
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
+  width: 90%;
   min-width: 800px;
   padding: 5px;
 }
+
+.form-group {
+  width: 25%;
+  min-width: 300px;
+}
+
+h3 {
+  margin: 80px 0 20px -20px;
+}

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

@@ -1,4 +1,4 @@
-<div class="confirm-award-container">
+<form #form="ngForm" class="overview">
   <h3>{{'request.confirm.award.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -58,4 +58,4 @@
       </tbody>
     </table>
   </div>
-</div>
+</form>

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

@@ -1,7 +1,7 @@
-div.confirm-award-container {
+@import url('../../style/overview.scss');
-  margin: 2em auto;
+
-  width: 95%;
+.overview {
-  min-width: 835px;
+  margin-left: 25px !important;
 }
 
 .decoration-preview {
@@ -10,7 +10,6 @@ div.confirm-award-container {
 
 .action {
   cursor: pointer;
-  line-height: 2em;
 }
 
 .table {
@@ -21,5 +20,14 @@ div.confirm-award-container {
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
+  width: 90%;
   padding: 5px;
 }
+
+.form-group {
+  width: 25%;
+}
+
+h3 {
+  margin: 80px 0 20px -20px;
+}

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

@@ -25,7 +25,7 @@ export class ConfirmAwardComponent implements OnInit {
     });
   }
 
-  confirm(award: Award, decision: boolean, reason: string, rejectReason?: string) {
+  confirm(award: Award, decision: boolean, reason: string, rejectReason: string) {
     const updateObject = {
       _id: award._id,
       confirmed: decision ? 1 : 2

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

@@ -1,4 +1,4 @@
-<div class="confirm-promotion-container">
+<form #form="ngForm" class="overview">
   <h3>{{'request.confirm.promotion.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -52,7 +52,7 @@
         <td class="text-right">
           <a class="action" (click)="confirm(promotion, true)">
             {{'request.confirm.promotion.table.button.action.accept' | translate}}
-          </a>
+          </a><br>
           <a class="action" (click)="confirm(promotion, false, rejectReason.value)">
             {{'request.confirm.promotion.table.button.action.reject' | translate}}
           </a>
@@ -61,4 +61,4 @@
       </tbody>
     </table>
   </div>
-</div>
+</form>

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

@@ -1,7 +1,7 @@
-div.confirm-promotion-container {
+@import url('../../style/overview.scss');
-  margin: 2em auto;
+
-  width: 95%;
+.overview {
-  min-width: 835px;
+  margin-left: 25px !important;
 }
 
 .decoration-preview {
@@ -10,7 +10,6 @@ div.confirm-promotion-container {
 
 .action {
   cursor: pointer;
-  line-height: 2em;
 }
 
 .table {
@@ -21,5 +20,14 @@ div.confirm-promotion-container {
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
+  width: 90%;
   padding: 5px;
 }
+
+.form-group {
+  width: 25%;
+}
+
+h3 {
+  margin: 80px 0 20px -20px;
+}

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

@@ -33,7 +33,7 @@ export class ConfirmPromotionComponent implements OnInit {
     });
   }
 
-  confirm(promotion: Promotion, decision: boolean, rejectReason?: string) {
+  confirm(promotion: Promotion, decision: boolean, rejectReason: string) {
     const updateObject = {
       _id: promotion._id,
       confirmed: decision ? 1 : 2

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

@@ -1,63 +1,61 @@
-<div class="request-promotion-container">
+<form #form="ngForm" class="overview">
-  <form #form="ngForm">
+  <h3>{{'request.promotion.headline' | translate}}</h3>
-    <h3>{{'request.promotion.headline' | translate}}</h3>
+
+  <div class="form-group">
+    <label for="user">{{'request.promotion.field.participant' | translate}}</label>
+    <select class="form-control"
+            name="user"
+            id="user"
+            [(ngModel)]="user"
+            [compareWith]="equals"
+            required
+            (change)="toggleUser()">
+      <option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
+      <option *ngFor="let user of users" [ngValue]="user">
+        {{user.username}}
+      </option>
+    </select>
+  </div>
+
+  <div *ngIf="showForm">
 
     <div class="form-group">
-      <label for="user">{{'request.promotion.field.participant' | translate}}</label>
+      <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
+      <input class="form-control"
+             [(ngModel)]="selectedUserRank"
+             [ngModelOptions]="{standalone: true}"
+             readonly>
+    </div>
+
+    <div class="form-group">
+      <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
       <select class="form-control"
-              name="user"
+              name="decoration"
-              id="user"
+              id="decoration"
-              [(ngModel)]="user"
+              #decorationField
-              [compareWith]="equals"
+              [(ngModel)]="newLevel"
-              required
+              required>
-              (change)="toggleUser()">
+        <option *ngFor="let rank of ranks" [ngValue]="rank.level">
-        <option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
+          {{rank.name}}
-        <option *ngFor="let user of users" [ngValue]="user">
-          {{user.username}}
         </option>
       </select>
     </div>
 
-    <div *ngIf="showForm">
+  </div>
 
-      <div class="form-group">
+  <button id="cancel"
-        <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
+          (click)="cancel()"
-        <input class="form-control"
+          class="btn btn-default">
-               [(ngModel)]="selectedUserRank"
+    {{'request.promotion.button.cancel' | translate}}
-               [ngModelOptions]="{standalone: true}"
+  </button>
-               readonly>
-      </div>
 
-      <div class="form-group">
+  <button id="save"
-        <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
+          *ngIf="showForm"
-        <select class="form-control"
+          (click)="addPromotion()"
-                name="decoration"
+          class="btn btn-default"
-                id="decoration"
+          [disabled]="newLevel === user.rankLvl">
-                #decorationField
+    {{'request.promotion.button.submit' | translate}}
-                [(ngModel)]="newLevel"
+  </button>
-                required>
-          <option *ngFor="let rank of ranks" [ngValue]="rank.level">
-            {{rank.name}}
-          </option>
-        </select>
-      </div>
-
-    </div>
-
-    <button id="cancel"
-            (click)="cancel()"
-            class="btn btn-default">
-      {{'request.promotion.button.cancel' | translate}}
-    </button>
-
-    <button id="save"
-            *ngIf="showForm"
-            (click)="addPromotion()"
-            class="btn btn-default"
-            [disabled]="newLevel === user.rankLvl">
-      {{'request.promotion.button.submit' | translate}}
-    </button>
-  </form>
 
   <div class="table-container">
     <label>Beförderungsanträge</label>
@@ -108,4 +106,6 @@
       </tbody>
     </table>
   </div>
-</div>
+
+
+</form>

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

@@ -1,19 +1,17 @@
-.request-promotion-container {
+@import url('../../style/overview.scss');
-  margin: 2em auto;
-  width: 95%;
-  min-width: 835px;
 
-  form {
+.overview {
-    width: 33%;
+  margin-left: 25px !important;
-    min-width: 300px;
-    margin: auto;
-  }
 }
 
 .decoration-preview {
   padding: 5px;
 }
 
+.trash {
+  cursor: pointer;
+}
+
 .table {
   overflow-wrap: break-word;
   table-layout: fixed;
@@ -22,6 +20,16 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
+  width: 90%;
   min-width: 800px;
   padding: 5px;
 }
+
+.form-group {
+  width: 25%;
+  min-width: 300px;
+}
+
+h3 {
+  margin: 80px 0 20px -20px;
+}

static/src/app/request/sql-dashboard/sql-dashboard.component.html

@@ -1,4 +1,4 @@
-<div class="sql-dashboard-container">
+<div class="overview">
   <h3>{{'request.sql.dashboard.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -6,11 +6,11 @@
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-2">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
-        <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
-        <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
-        <th class="col-sm-2 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
+        <th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-right">{{'request.confirm.promotion.table.head.date' | translate}}</th>
+        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let promotion of promotions">
@@ -27,7 +27,7 @@
         <td>
           {{promotion.proposer.username}}
         </td>
-        <td class="text-right">
+        <td class="text-center">
           {{promotion.timestamp | date: 'dd.MM.yyyy'}}
         </td>
       </tr>

static/src/app/request/sql-dashboard/sql-dashboard.component.scss

@@ -1,7 +1,7 @@
-.sql-dashboard-container {
+@import url('../../style/overview.scss');
-  margin: 2em auto;
+
-  width: 95%;
+.overview {
-  min-width: 835px;
+  margin-left: 25px !important;
 }
 
 .decoration-preview {
@@ -16,6 +16,11 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
+  width: 90%;
   min-width: 800px;
   padding: 5px;
 }
+
+h3 {
+  margin: 80px 0 20px -20px;
+}

static/src/app/statistic/stats.component.scss

@@ -3,7 +3,7 @@
   float: left;
 
   @media all and (max-width: 959px) {
-    width: 100%!important;
+    width: 100%;
   }
 }
 

static/src/app/statistic/war/war-list/war-list.component.scss

@@ -94,10 +94,6 @@
   left: calc(20% - 1px);
   z-index: -1;
 
-  &.collapsed {
-    left: 0;
-  }
-
   @media all and (max-width: 959px) {
     display: none;
   }

static/src/app/style/overview.scss

@@ -8,8 +8,10 @@
   bottom: 10px;
 }
 
-@media all and (max-width: 959px) {
+.absolute-label {
-  .overview {
+  display: block;
-    left: 345px;
+  position: absolute;
-  }
+  font-size: 12px;
+  padding: 5px;
+  margin-left: 25%;
 }