Fixes layout and adds breadcrumb on /plans/clone/:id

dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard.component.html

@@ -1,3 +1,5 @@
+<div class="main-content">
+	<div class="container-fluid">
 		<div class="dmp-wizard">
 		  <mat-horizontal-stepper #stepper>
 			<mat-step>
@@ -17,3 +19,5 @@
 			</mat-step>
 		  </mat-horizontal-stepper>
 		</div>
+	</div>
+</div>

dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard.component.ts

@@ -58,6 +58,11 @@ export class DmpWizardComponent extends BaseComponent implements OnInit, IBreadC
 							this.formGroup.get('label').setValue(this.dmp.label + " New");
 							this.isClone = true;
 						}
+						const breadCrumbs = [];
+						breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/plans" });
+						breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, url: '/plans/clone/' + this.dmp.id });
+						this.breadCrumbs = Observable.of(breadCrumbs);
+						console.log(this.breadCrumbs);
 					});
 			});
 	}

dmp-frontend/src/app/ui/dmp/wizard/editor/dmp-wizard-editor.component.html

@@ -2,8 +2,8 @@
 	<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
 		<mat-card>
 			<mat-card-content>
-				<div class="row">
+				<div class="d-flex row">
-					<mat-form-field class="col-md-6">
+					<mat-form-field class="col-8">
 						<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label"
 							formControlName="label" required>
 						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
@@ -11,7 +11,7 @@
 						<mat-error *ngIf="formGroup.get('label').hasError('required')">
 							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
-					<mat-form-field class="col-md-6">
+					<mat-form-field class="col-8">
 						<app-single-auto-complete [formControl]="formGroup.get('project')"
 							placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
 							[configuration]="projectAutoCompleteConfiguration">
@@ -22,7 +22,7 @@
 							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
 
-					<mat-form-field class="col-md-12">
+					<mat-form-field class="col-8">
 						<textarea matInput class="description-area"
 							placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
 						</textarea>
@@ -31,20 +31,20 @@
 						<mat-error *ngIf="formGroup.get('description').hasError('required')">
 							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
-					<mat-form-field class="col-md-6">
+					<mat-form-field class="col-8">
-						<app-multiple-auto-complete class="col-md-10" [formControl]="formGroup.get('profiles')"
+						<app-multiple-auto-complete [formControl]="formGroup.get('profiles')"
-							placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
+							placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}"
 							[configuration]="profilesAutoCompleteConfiguration">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
 							{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
 						<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
 							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						<button mat-icon-button matSuffix type="button" (click)="availableProfiles()">
+						<button matSuffix type="button" class="input-btn" (click)="availableProfiles()">
-							<mat-icon>view_list</mat-icon>
+							<mat-icon class="icon-btn">view_list</mat-icon>
 						</button>
 					</mat-form-field>
-					<mat-form-field class="col-md-6">
+					<mat-form-field class="col-8">
 						<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
 							placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
 							[configuration]="organisationsAutoCompleteConfiguration">
@@ -54,7 +54,7 @@
 						<mat-error *ngIf="formGroup.get('organisations').hasError('required')">
 							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
-					<mat-form-field class="col-md-6">
+					<mat-form-field class="col-8">
 						<app-multiple-auto-complete [formControl]="formGroup.get('researchers')"
 							placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
 							[configuration]="researchersAutoCompleteConfiguration">
@@ -63,8 +63,8 @@
 							{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
 						<mat-error *ngIf="formGroup.get('researchers').hasError('required')">
 							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						<button mat-icon-button matSuffix type="button" (click)="addResearcher()">
+						<button matSuffix type="button" class="input-btn" (click)="addResearcher()">
-							<mat-icon>add_circle</mat-icon>
+							<mat-icon class="icon-btn">add_circle</mat-icon>
 						</button>
 					</mat-form-field>
 					<mat-form-field class="col-md-6">

dmp-frontend/src/app/ui/dmp/wizard/editor/dmp-wizard-editor.component.scss

@@ -6,12 +6,22 @@
   table-layout: fixed;
 }
 
+.input-btn {
+  border: none;
+  color: #aaaaaa;
+  background-color: #ffffff00;
+  cursor: pointer;
+}
+
+.input-btn :hover {
+  color: #4687f0 !important;
+}
+
 .table-card .mat-grid-tile {
   background: rgba(0, 0, 0, 0.32);
 }
 
 .data-management-plan-wizard-editor {
-	
   .mat-form-field-full-width {
     mat-form-field {
       width: 100%;
@@ -19,7 +29,6 @@
     }
   }
 
-
   .mat-card {
     margin: 16px 0;
   }
@@ -35,5 +44,4 @@
   .description-area {
     height: 100px;
   }
-	
 }