From fe7140afd9c89d836d90ddd64c5d2a41a9f66559 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sat, 2 Mar 2019 15:14:52 +0100
Subject: [PATCH] Improve manage pages form positioning and request/confirm
 promotion/award pages

---
 static/src/app/models/model-interfaces.ts     |   2 +-
 .../request/award/req-award.component.html    | 119 +++++++++---------
 .../request/award/req-award.component.scss    |  27 ++--
 .../confirm-award.component.html              |   4 +-
 .../confirm-award.component.scss              |  18 +--
 .../confirm-award/confirm-award.component.ts  |   2 +-
 .../confirm-promotion.component.html          |   6 +-
 .../confirm-promotion.component.scss          |  18 +--
 .../confirm-promotion.component.ts            |   2 +-
 .../promotion/req-promotion.component.html    | 104 +++++++--------
 .../promotion/req-promotion.component.scss    |  26 ++--
 .../sql-dashboard.component.html              |  14 +--
 .../sql-dashboard.component.scss              |  13 +-
 static/src/app/style/overview.scss            |  10 +-
 14 files changed, 163 insertions(+), 202 deletions(-)

diff --git a/static/src/app/models/model-interfaces.ts b/static/src/app/models/model-interfaces.ts
index 60a7538..ea7837f 100644
--- a/static/src/app/models/model-interfaces.ts
+++ b/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;
diff --git a/static/src/app/request/award/req-award.component.html b/static/src/app/request/award/req-award.component.html
index ecbcab1..5e50a72 100644
--- a/static/src/app/request/award/req-award.component.html
+++ b/static/src/app/request/award/req-award.component.html
@@ -1,66 +1,68 @@
-<form #form="ngForm" class="overview">
-  <h3>{{'request.award.headline' | translate}}</h3>
+<div class="request-award-container">
+  <form #form="ngForm" class="overview">
+    <h3>{{'request.award.headline' | translate}}</h3>
 
-  <div class="form-group">
-    <label for="user">{{'request.award.field.user' | translate}}</label>
-    <select class="form-control"
-            name="user"
-            id="user"
-            [(ngModel)]="user"
-            [compareWith]="equals"
-            (change)="toggleUser()"
-            required>
-      <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
-      <option *ngFor="let user of users" [ngValue]="user">
-        {{user.username}}
-      </option>
-    </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 class="form-group">
+      <label for="user">{{'request.award.field.user' | translate}}</label>
+      <select class="form-control"
+              name="user"
+              id="user"
+              [(ngModel)]="user"
+              [compareWith]="equals"
+              (change)="toggleUser()"
+              required>
+        <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
+        <option *ngFor="let user of users" [ngValue]="user">
+          {{user.username}}
+        </option>
+      </select>
     </div>
-    <div class="col-sm-2"
-         style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
-      &nbsp;
+
+    <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>
 
-  <div class="form-group">
-    <label for="reason">{{'request.award.field.reason' | translate}}</label>
-    <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
-              id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
-  </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"
+           style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
+        &nbsp;
+      </div>
+    </div>
 
-  <button id="cancel"
-          (click)="cancel()"
-          class="btn btn-default">
-    {{'request.award.button.cancel' | translate}}
-  </button>
+    <div class="form-group">
+      <label for="reason">{{'request.award.field.reason' | translate}}</label>
+      <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
+                id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
+    </div>
 
-  <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>
+    <button id="cancel"
+            (click)="cancel()"
+            class="btn btn-default">
+      {{'request.award.button.cancel' | 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">
@@ -113,5 +115,4 @@
       </tbody>
     </table>
   </div>
-
-</form>
+</div>
diff --git a/static/src/app/request/award/req-award.component.scss b/static/src/app/request/award/req-award.component.scss
index cf92a6d..067113f 100644
--- a/static/src/app/request/award/req-award.component.scss
+++ b/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 {
-  width: 100% !important;
-  margin-left: 25px !important;
+  form {
+    width: 33%;
+    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;
-}
diff --git a/static/src/app/request/confirm-award/confirm-award.component.html b/static/src/app/request/confirm-award/confirm-award.component.html
index ba2eac2..30371ce 100644
--- a/static/src/app/request/confirm-award/confirm-award.component.html
+++ b/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>
diff --git a/static/src/app/request/confirm-award/confirm-award.component.scss b/static/src/app/request/confirm-award/confirm-award.component.scss
index 07c2b42..b51495f 100644
--- a/static/src/app/request/confirm-award/confirm-award.component.scss
+++ b/static/src/app/request/confirm-award/confirm-award.component.scss
@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
-
-.overview {
-  margin-left: 25px !important;
+div.confirm-award-container {
+  margin: 2em auto;
+  width: 95%;
+  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;
-}
diff --git a/static/src/app/request/confirm-award/confirm-award.component.ts b/static/src/app/request/confirm-award/confirm-award.component.ts
index a047134..6e16251 100644
--- a/static/src/app/request/confirm-award/confirm-award.component.ts
+++ b/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
diff --git a/static/src/app/request/confirm-promotion/confirm-promotion.component.html b/static/src/app/request/confirm-promotion/confirm-promotion.component.html
index 6a8b276..48220c8 100644
--- a/static/src/app/request/confirm-promotion/confirm-promotion.component.html
+++ b/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>
diff --git a/static/src/app/request/confirm-promotion/confirm-promotion.component.scss b/static/src/app/request/confirm-promotion/confirm-promotion.component.scss
index 07c2b42..76152ca 100644
--- a/static/src/app/request/confirm-promotion/confirm-promotion.component.scss
+++ b/static/src/app/request/confirm-promotion/confirm-promotion.component.scss
@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
-
-.overview {
-  margin-left: 25px !important;
+div.confirm-promotion-container {
+  margin: 2em auto;
+  width: 95%;
+  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;
-}
diff --git a/static/src/app/request/confirm-promotion/confirm-promotion.component.ts b/static/src/app/request/confirm-promotion/confirm-promotion.component.ts
index 6bd2e21..886dfb2 100644
--- a/static/src/app/request/confirm-promotion/confirm-promotion.component.ts
+++ b/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
diff --git a/static/src/app/request/promotion/req-promotion.component.html b/static/src/app/request/promotion/req-promotion.component.html
index ed5e3ca..be121b6 100644
--- a/static/src/app/request/promotion/req-promotion.component.html
+++ b/static/src/app/request/promotion/req-promotion.component.html
@@ -1,61 +1,63 @@
-<form #form="ngForm" class="overview">
-  <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="request-promotion-container">
+  <form #form="ngForm">
+    <h3>{{'request.promotion.headline' | translate}}</h3>
 
     <div class="form-group">
-      <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>
+      <label for="user">{{'request.promotion.field.participant' | translate}}</label>
       <select class="form-control"
-              name="decoration"
-              id="decoration"
-              #decorationField
-              [(ngModel)]="newLevel"
-              required>
-        <option *ngFor="let rank of ranks" [ngValue]="rank.level">
-          {{rank.name}}
+              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>
+    <div *ngIf="showForm">
 
-  <button id="cancel"
-          (click)="cancel()"
-          class="btn btn-default">
-    {{'request.promotion.button.cancel' | translate}}
-  </button>
+      <div class="form-group">
+        <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
+        <input class="form-control"
+               [(ngModel)]="selectedUserRank"
+               [ngModelOptions]="{standalone: true}"
+               readonly>
+      </div>
 
-  <button id="save"
-          *ngIf="showForm"
-          (click)="addPromotion()"
-          class="btn btn-default"
-          [disabled]="newLevel === user.rankLvl">
-    {{'request.promotion.button.submit' | translate}}
-  </button>
+      <div class="form-group">
+        <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
+        <select class="form-control"
+                name="decoration"
+                id="decoration"
+                #decorationField
+                [(ngModel)]="newLevel"
+                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>
@@ -106,6 +108,4 @@
       </tbody>
     </table>
   </div>
-
-
-</form>
+</div>
diff --git a/static/src/app/request/promotion/req-promotion.component.scss b/static/src/app/request/promotion/req-promotion.component.scss
index 5e40c75..e7db664 100644
--- a/static/src/app/request/promotion/req-promotion.component.scss
+++ b/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 {
-  margin-left: 25px !important;
+  form {
+    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;
-}
diff --git a/static/src/app/request/sql-dashboard/sql-dashboard.component.html b/static/src/app/request/sql-dashboard/sql-dashboard.component.html
index 99303d5..d57f630 100644
--- a/static/src/app/request/sql-dashboard/sql-dashboard.component.html
+++ b/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-1">{{'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-1 ">{{'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-2">{{'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-2">{{'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 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>
diff --git a/static/src/app/request/sql-dashboard/sql-dashboard.component.scss b/static/src/app/request/sql-dashboard/sql-dashboard.component.scss
index 9a8d311..62d3af5 100644
--- a/static/src/app/request/sql-dashboard/sql-dashboard.component.scss
+++ b/static/src/app/request/sql-dashboard/sql-dashboard.component.scss
@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
-
-.overview {
-  margin-left: 25px !important;
+.sql-dashboard-container {
+  margin: 2em auto;
+  width: 95%;
+  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;
-}
diff --git a/static/src/app/style/overview.scss b/static/src/app/style/overview.scss
index 8685f47..15426f4 100644
--- a/static/src/app/style/overview.scss
+++ b/static/src/app/style/overview.scss
@@ -8,10 +8,8 @@
   bottom: 10px;
 }
 
-.absolute-label {
-  display: block;
-  position: absolute;
-  font-size: 12px;
-  padding: 5px;
-  margin-left: 25%;
+@media all and (max-width: 959px) {
+  .overview {
+    left: 345px;
+  }
 }