Improve manage pages form positioning and request/confirm promotion/award pages

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

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

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

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

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

@@ -1,18 +1,19 @@
-@import url('../../style/overview.scss');
+div.request-award-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 
-.overview {
+  form {
-  width: 100% !important;
+    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;
@@ -21,16 +22,6 @@
 .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 @@
-<form #form="ngForm" class="overview">
+<div class="confirm-award-container">
   <h3>{{'request.confirm.award.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -58,4 +58,4 @@
       </tbody>
     </table>
   </div>
-</form>
+</div>

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

@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
+div.confirm-award-container {
-
+  margin: 2em auto;
-.overview {
+  width: 95%;
-  margin-left: 25px !important;
+  min-width: 835px;
 }
 
 .decoration-preview {
@@ -10,6 +10,7 @@
 
 .action {
   cursor: pointer;
+  line-height: 2em;
 }
 
 .table {
@@ -20,14 +21,5 @@
 .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 @@
-<form #form="ngForm" class="overview">
+<div class="confirm-promotion-container">
   <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><br>
+          </a>
           <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>
-</form>
+</div>

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

@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
+div.confirm-promotion-container {
-
+  margin: 2em auto;
-.overview {
+  width: 95%;
-  margin-left: 25px !important;
+  min-width: 835px;
 }
 
 .decoration-preview {
@@ -10,6 +10,7 @@
 
 .action {
   cursor: pointer;
+  line-height: 2em;
 }
 
 .table {
@@ -20,14 +21,5 @@
 .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,4 +1,5 @@
-<form #form="ngForm" class="overview">
+<div class="request-promotion-container">
+  <form #form="ngForm">
     <h3>{{'request.promotion.headline' | translate}}</h3>
 
     <div class="form-group">
@@ -56,6 +57,7 @@
             [disabled]="newLevel === user.rankLvl">
       {{'request.promotion.button.submit' | translate}}
     </button>
+  </form>
 
   <div class="table-container">
     <label>Beförderungsanträge</label>
@@ -106,6 +108,4 @@
       </tbody>
     </table>
   </div>
-
+</div>
-
-</form>

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

@@ -1,17 +1,19 @@
-@import url('../../style/overview.scss');
+.request-promotion-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 
-.overview {
+  form {
-  margin-left: 25px !important;
+    width: 33%;
+    min-width: 300px;
+    margin: auto;
+  }
 }
 
 .decoration-preview {
   padding: 5px;
 }
 
-.trash {
-  cursor: pointer;
-}
-
 .table {
   overflow-wrap: break-word;
   table-layout: fixed;
@@ -20,16 +22,6 @@
 .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="overview">
+<div class="sql-dashboard-container">
   <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-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
+        <th class="col-sm-2">{{'request.confirm.promotion.table.head.participant' | 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.before' | 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.rank.after' | translate}}</th>
-        <th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
+        <th class="col-sm-2 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
+        <th class="col-sm-1 text-right">{{'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-center">
+        <td class="text-right">
           {{promotion.timestamp | date: 'dd.MM.yyyy'}}
         </td>
       </tr>

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

@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
+.sql-dashboard-container {
-
+  margin: 2em auto;
-.overview {
+  width: 95%;
-  margin-left: 25px !important;
+  min-width: 835px;
 }
 
 .decoration-preview {
@@ -16,11 +16,6 @@
 .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%;
+    width: 100%!important;
   }
 }
 

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

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