From e94f7a0253c9c25f2092cb65e8848fc10687a684 Mon Sep 17 00:00:00 2001
From: Niggl <info@nicolai-ort.com>
Date: Thu, 2 Jul 2020 11:01:33 +0200
Subject: [PATCH] Migration to cards and new div

---
 src/app/task-form/task-form.component.html | 66 +++++++++-------------
 src/app/task-table/task-table.component.ts |  1 +
 2 files changed, 28 insertions(+), 39 deletions(-)

diff --git a/src/app/task-form/task-form.component.html b/src/app/task-form/task-form.component.html
index 4476270..5463e85 100644
--- a/src/app/task-form/task-form.component.html
+++ b/src/app/task-form/task-form.component.html
@@ -1,10 +1,8 @@
-<div class="modal-content p-3">
-    <div class="modal-header">
-        <table>
-            <tr>
-                <h4 class="modal-title">Neuen Task anlegen</h4>
-            </tr>
-            <tr>
+<div class="card" style="width: 100%;">
+    <div class="container">
+    <div class="card-body">
+        <div class="col-8">
+                <h4 class="card-title">Neuen Task anlegen</h4>
                 <div ngbDropdown class="dropdown">
                     <span ngbDropdownToggle class="dropdown-toggle" id="dropdownMenuUserstory" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         Gehört zu Story: {{getUserstoryTitleById(task.userstoryid) || "Keine"}}
@@ -14,42 +12,31 @@
                         <option ngbDropdownItem *ngFor="let userstory of userstories" (click)="task.userstoryid = userstory.id">{{ userstory.title }}</option>
                     </div>
                 </div>
-            </tr>
-        </table>
+        </div>
         <button (click)="onClose()" type="button" class="close" aria-label="Close">
             <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-    <div class="modal-body">
+        </button>    
         <form (ngSubmit)="onSubmit()">
             <div class="row">
-                <div class="col-md-9">
+            <div class="col-8">
                     <div class="form-group">
                         <label for="Title">Titel</label>
                         <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="task.title" id="titleField"/>
                     </div>
-                </div>
-                <div class="col-md-1"></div>
-                <div class="col-md-2">
-                    <div ngbDropdown class="dropdown">
-                        <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Prio: {{task.priority}}
-                        </button>
-                        <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
-                            <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="task.priority=p">{{p}}</option>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-md-9">
                     <div class="form-group">
                         <label for="Inhalt">What to do?</label>
                         <textarea type="text" class="form-control" id="Story" required name="story" rows="5" [(ngModel)]="task.content"></textarea>
+                    </div>                
+            </div>
+            <div class="col-4">
+                        <div ngbDropdown class="dropdown">
+                            <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                Prio: {{task.priority}}
+                            </button>
+                            <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                                <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="task.priority=p">{{p}}</option>
+                            </div>
                     </div>
-                </div>
-                <div class="col-md-1"></div>
-                <div class="col-md-2">
                     <div class="form-group">
                         <div ngbDropdown class="dropdown" [autoClose]="false">
                             <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -79,14 +66,15 @@
                     <input type="text" class="form-control" id="Author" required name="author"/>
                 </div>
                 </div>
-            </div>
-            
-    
-    <div class="modal-footer">
-        <button (click)="onClose()" type="dismiss" class="btn btn-secondary" data-dismiss="modal">
-            Abbrechen
-        </button>
-        <button type="submit" class="btn btn-primary">Erstellen</button>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <button (click)="onClose()" type="dismiss" class="btn btn-secondary" data-dismiss="modal">
+                Abbrechen
+            </button>
+            <button type="submit" class="btn btn-primary">Erstellen</button>
+        </div>
     </div>
 </form></div>
+</div>
 </div>
\ No newline at end of file
diff --git a/src/app/task-table/task-table.component.ts b/src/app/task-table/task-table.component.ts
index 6e850ad..66e49fe 100644
--- a/src/app/task-table/task-table.component.ts
+++ b/src/app/task-table/task-table.component.ts
@@ -102,6 +102,7 @@ export class TaskTableComponent extends TableComponentBase<ScrumTask> {
     const modalRef = this.modalService.open(TaskFormComponent, {
       backdrop: 'static',
       keyboard: true,
+      size: 'lg',
     });
     if (editTask === null) {
       modalRef.result.then((result) => {