better positioning for userstory modal

package.json

@@ -45,5 +45,13 @@
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~3.8.3"
-  }
+  },
+  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.7.",
+  "main": "karma.conf.js",
+  "repository": {
+    "type": "git",
+    "url": "https://git.informatik.fh-nuernberg.de/scrum-taskboard/frontend.git"
+  },
+  "author": "",
+  "license": "ISC"
 }

src/app/app-routing.module.ts

@@ -4,15 +4,14 @@ import { Routes, RouterModule } from '@angular/router';
 import { TaskListComponent } from './task-list/task-list.component';
 import { UserstoryListComponent } from './userstory-list/userstory-list.component';
 
-
 const routes: Routes = [
-  { path: 'tasks', component: TaskListComponent },
-  { path: 'userstories', component: UserstoryListComponent },
-  { path: '', redirectTo: '/tasks', pathMatch: 'full' },
+	{ path: 'tasks', component: TaskListComponent },
+	{ path: 'userstories', component: UserstoryListComponent },
+	{ path: '', redirectTo: '/tasks', pathMatch: 'full' }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+	imports: [ RouterModule.forRoot(routes) ],
+	exports: [ RouterModule ]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/task-form/task-form.component.html

@@ -21,7 +21,7 @@
                 <option value="low">Low</option>
                 <option value="medium">Medium</option>
                 <option value="high">High</option>
-             </select>
+            </select>
         </div>
 
         <button type="submit" class="btn btn-success">Submit</button>

src/app/userstory-form/userstory-form.component.css

@@ -1,12 +1,12 @@
-.modal-footer{
-    border-top: 0px solid;
-    padding-top: 5%;
+.modal-footer {
+	border-top: 0px solid;
+	padding-top: 5%;
 }
-.modal-lg{
-    width: 1040px;
+.modal-content {
+	width: 1040px;
+	right: 55%;
 }
 
-  .modal{
-      margin: 0 auto;
-
-  }
+.modal {
+	margin: 0 auto;
+}

src/app/userstory-form/userstory-form.component.html

@@ -1,4 +1,4 @@
-<div class="modal-lg">
+<!-- <div class="modal-lg"> -->
     <div class="modal-content p-3">
         <div class="modal-header">
             <h4 class="modal-title">Neue Userstory anlegen</h4>
@@ -58,4 +58,4 @@
             </div>
         </div>
     </div>
-</div>
+<!-- </div> -->

src/app/userstory-form/userstory-form.component.ts

@@ -3,48 +3,42 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { BackendService, ScrumUserstory, Priority } from '../services/backend.service';
 
 @Component({
-    selector: 'app-userstory-form',
-    templateUrl: './userstory-form.component.html',
-    styleUrls: ['./userstory-form.component.css']
+	selector: 'app-userstory-form',
+	templateUrl: './userstory-form.component.html',
+	styleUrls: [ './userstory-form.component.css' ]
 })
 export class UserstoryFormComponent implements OnInit {
+	@Input() public userstory: ScrumUserstory;
+	private editing: boolean;
 
+	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {}
 
-    @Input()
-    public userstory: ScrumUserstory;
-    private editing: boolean;
+	ngOnInit(): void {
+		if (this.userstory === null || this.userstory === undefined) {
+			this.userstory = { title: '' };
+			this.editing = false;
+		} else {
+			this.editing = true;
+		}
+	}
 
-    constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { }
-
-    ngOnInit(): void {
-        if (this.userstory === null || this.userstory === undefined) {
-            this.userstory = {title: ""};
-            this.editing = false;
-        }
-        else
-        {
-            this.editing = true;
-        }
-    }
-
-    onSubmit() {
-        if (this.editing) {
-            this.backendService.putUserstory(this.userstory).subscribe(response => {
-                if (response.status > 399) {
-                  alert('Fehler');
-                }
-              });
-        }
-        else {
-            this.backendService.postUserstory(this.userstory).subscribe(response => {
-                if (response.status > 399) {
-                  alert('Fehler');
-                }
-              });
-        }
-        this.activeModalService.close(this.userstory);
-    }
-    onClose(){
-        this.activeModalService.dismiss(this.userstory);
-    }
+	onSubmit() {
+		if (this.editing) {
+			this.backendService.putUserstory(this.userstory).subscribe((response) => {
+				if (response.status > 399) {
+					alert('Fehler');
+				}
+			});
+		} else {
+			this.backendService.postUserstory(this.userstory).subscribe((response) => {
+				if (response.status > 399) {
+					alert('Fehler');
+				}
+			});
+		}
+		this.activeModalService.close(this.userstory);
+	}
+	onClose() {
+		this.activeModalService.dismiss(this.userstory);
+	}
 }