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,5 +1,4 @@
-<div class="request-award-container">
+<form #form="ngForm" class="overview">
-  <form #form="ngForm" class="overview">
   <h3>{{'request.award.headline' | translate}}</h3>
 
   <div class="form-group">
@@ -62,7 +61,6 @@
           [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,5 +1,4 @@
-<div class="request-promotion-container">
+<form #form="ngForm" class="overview">
-  <form #form="ngForm">
   <h3>{{'request.promotion.headline' | translate}}</h3>
 
   <div class="form-group">
@@ -57,7 +56,6 @@
           [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%;
 }