styling

dmp-frontend/src/app/ui/description/overview/description-overview.component.scss

@@ -194,6 +194,7 @@
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+	max-width: 85%;
 }
 
 .doi-label {

dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.html

@@ -7,13 +7,15 @@
 			<mat-icon>close</mat-icon>
 		</div>
 	</div>
-	<div class="">
+</div>
-		<div class="upload-form col-12 pr-0 pl-0">
+<mat-dialog-content class="container-fluid confirmation-dialog">
+	<div class="row">
+		<div class="upload-form col-12">
 			<mat-form-field class="w-100" *ngIf="files?.length == 0 || files[0].type.includes('/xml')">
 				<input [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
 			</mat-form-field>
 		</div>
-		<div class="col-12 pr-0 pl-0">
+		<div class="col-12">
 			<ngx-dropzone class="drop-file" (change)="selectFile($event)" [accept]="'text/xml, application/json'" [multiple]="false">
 				<ngx-dropzone-preview class="file-preview" *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
 					<ngx-dropzone-label class="file-label">{{ f.name }}</ngx-dropzone-label>
@@ -30,11 +32,11 @@
 				<input class="hidden" #fileInput type="file" onClick="this.form.reset()" (change)="uploadFile($event)" accept="text/xml, application/json">
 			</form>
 		</div>
-		<div class="upload-form col-12 pr-0 pl-0" *ngIf="formGroup == null && files.length > 0 && files[0].type.includes('/json')">
+		<div class="upload-form col-12" *ngIf="formGroup == null && files.length > 0 && files[0].type.includes('/json')">
 			{{ 'DMP-UPLOAD.ANALYZING-FILE' | translate }}
 			<b class="fa fa-spinner fa-spin" ></b>
 		</div>
-		<div class="upload-form col-12 pr-0 pl-0" *ngIf="formGroup && files.length > 0 && files[0].type.includes('/json')">
+		<div class="upload-form col-12" *ngIf="formGroup && files.length > 0 && files[0].type.includes('/json')">
 			<mat-form-field class="w-100">
 				<input [formControl]="formGroup.get('label')" matInput required="true" placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
 			</mat-form-field>
@@ -44,25 +46,31 @@
 			</mat-form-field>
 			<ng-container *ngIf="formGroup.get('blueprintId').value">
 				<div *ngFor="let description of formGroup.get('descriptions').controls; let descriptionIndex=index;" class="row mb-3">
-					<span *ngIf="description.get('label').value"  style="font-size: 1rem;">
+					<div class="col-12">
-						{{ description.get('label').value }}
+						<span *ngIf="description.get('label').value"  style="font-size: 1rem;">
-					</span>
+							{{ description.get('label').value }}
-					<mat-form-field class="w-100">
+						</span>
-						<mat-label>{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
+					</div>
-						<app-single-auto-complete required="true" placeholder="{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE-PLACHOLDER' | translate}}" [formControl]="description.get('templateId')" [configuration]="descriptionTemplateSingleAutocompleteConfiguration"></app-single-auto-complete>									
+					<div class="col-12">
-						<mat-error *ngIf="description.get('templateId').hasError('backendError')">{{description.get('templateId').getError('backendError').message}}</mat-error>
+						<mat-form-field class="w-100">
-						<mat-error *ngIf="description.get('templateId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+							<mat-label>{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
-					</mat-form-field>
+							<app-single-auto-complete required="true" placeholder="{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE-PLACHOLDER' | translate}}" [formControl]="description.get('templateId')" [configuration]="descriptionTemplateSingleAutocompleteConfiguration"></app-single-auto-complete>									
-					<mat-form-field class="w-100">
+							<mat-error *ngIf="description.get('templateId').hasError('backendError')">{{description.get('templateId').getError('backendError').message}}</mat-error>
-						<mat-label>{{'DMP-UPLOAD.FIELDS.SECTION' | translate}}</mat-label>
+							<mat-error *ngIf="description.get('templateId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						<mat-select [formControl]="description.get('sectionId')" placeholder="{{'DMP-UPLOAD.FIELDS.SECTION-PLACEHOLDER' | translate}}">			
+						</mat-form-field>
-							<mat-option *ngFor="let section of selectedBlueprintSections" [value]="section.id">
+					</div>
-								<span style="font-size: 1rem;">
+					<div class="col-12">
-									{{ section.label }}
+						<mat-form-field class="w-100">
-								</span>
+							<mat-label>{{'DMP-UPLOAD.FIELDS.SECTION' | translate}}</mat-label>
-							</mat-option>
+							<mat-select [formControl]="description.get('sectionId')" placeholder="{{'DMP-UPLOAD.FIELDS.SECTION-PLACEHOLDER' | translate}}">			
-						</mat-select>						
+								<mat-option *ngFor="let section of selectedBlueprintSections" [value]="section.id">
-					</mat-form-field>
+									<span style="font-size: 1rem;">
+										{{ section.label }}
+									</span>
+								</mat-option>
+							</mat-select>						
+						</mat-form-field>
+					</div>
 				</div>
 			</ng-container>
 		</div>
@@ -78,4 +86,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</mat-dialog-content>

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss

@@ -196,6 +196,7 @@
 	font-style: normal;
 	padding-bottom: 0.5rem;
 	padding-top: 0.5rem;
+	max-width: 85%;
 }
 
 .doi-label {