From 0d9f6ec3c475789e338b4c58c8cd696a763bf4a3 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Fri, 22 Mar 2024 11:48:54 +0200
Subject: [PATCH] styling changes

*dmp-description
---
 .../dmp-blueprint-editor.component.html       | 147 +++++++++++-------
 .../dmp-blueprint-editor.component.scss       |  24 +--
 2 files changed, 90 insertions(+), 81 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
index 90bd7d6f8..0b890f004 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
@@ -92,7 +92,7 @@
 											</div>
 											<div class="row">
 												<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
-													<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
+													<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
 															<div class="col-auto section-options-vertical">
 																<div class="row justify-content-center">
 																	<div class="col-auto">
@@ -106,14 +106,14 @@
 																	</div>
 																</div>
 															</div>
-															<div class="col-auto pr-0 section-field section-options-horizontal">
+															<div class="col-auto pr-0 section-options-horizontal">
 																	<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{fieldIndex + 1}}</span>
 																	<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 															</div>
 															<div class="col">
 																<div class="row">
 																	
-																	<div class="col-4 section-field">
+																	<div class="col-12 col-xl-4">
 																		<mat-form-field class="mt-3 w-100">
 																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
 																			<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)">
@@ -123,7 +123,7 @@
 																			<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
+																	<div class="col-12 col-xl-4" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
 																		<mat-form-field class="mt-3 w-100">
 																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
 																			<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled">
@@ -133,7 +133,7 @@
 																			<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
+																	<div class="col-12 col-xl-4" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
 																		<mat-form-field class="mt-3 w-100">
 																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
 																			<mat-select [formControl]="field.get('dataType')">
@@ -145,7 +145,7 @@
 																			<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
+																	<div class="col-12 col-xl-4" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
 																		<mat-form-field class="mt-3 w-100">
 																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label>
 																			<app-single-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete>
@@ -153,7 +153,7 @@
 																			<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value != null">
+																	<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
 																		<mat-form-field class="mt-3 w-100">
 																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
 																			<input matInput type="text" name="label" [formControl]="field.get('label')">
@@ -161,7 +161,7 @@
 																			<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value != null">
+																	<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
 																		<mat-form-field class="mt-3 w-100">
 																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
 																			<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
@@ -169,7 +169,7 @@
 																			<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 auto section-field" *ngIf="field.get('category').value != null">
+																	<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
 																		<mat-form-field class="mt-3 w-100">
 																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
 																			<input matInput type="text" name="description" [formControl]="field.get('description')">
@@ -177,7 +177,7 @@
 																			<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value != null">
+																	<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
 																		<mat-form-field class="mt-3 w-100">
 																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
 																			<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
@@ -188,14 +188,14 @@
 																	</div>
 																</div>
 															</div>
-															<div class="col-auto">
+															<div class="col-12 col-xl-auto">
 																<div class="row">
 																	<div class="col-auto section-field" *ngIf="field.get('category').value != null">
 																		<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Title || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Description" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
 																		<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
 																		<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																	</div>
-																	<div [hidden]="viewOnly" class="col-auto section-field section-options-horizontal">
+																	<div [hidden]="viewOnly" class="col-auto section-options-horizontal">
 																		<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
 																			<mat-icon>delete</mat-icon>
 																		</button>
@@ -225,62 +225,93 @@
 												</div>
 											</div>
 
-											<div cdkDropList class="col-12" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
-												<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled">
-													<div class="description-fields-wrapper">
-														<div class="description-field-index">
+											<div class="row">
+												<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
+													<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled">
+
+														<!-- <div class="description-field-index">
 															<span style="font-size: 18px;">{{descriptionTemplateIndex + 1}}</span>
 														</div>
 														<div class="description-field-sortable"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-														<div class="description-field-template">
-															<mat-form-field class="w-100">
-																<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
-																<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [hidePlaceholder]="true" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, i)"></app-single-auto-complete>
-																<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
+															-->
+														<div class="col-auto section-options-vertical">
+															<div class="row justify-content-center">
+																<div class="col-auto">
+																	<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
+																	<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
+																</div>
+																<div class="col-auto">
+																	<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
+																		<mat-icon>delete</mat-icon>
+																	</button>
+																</div>
+															</div>
 														</div>
-														<div class="description-field-template-label">
-															<mat-form-field class="w-100">
-																<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label>
-																<input matInput type="text" name="label" [formControl]="descriptionTemplate.get('label')">
-																<mat-error *ngIf="descriptionTemplate.get('label').hasError('backendError')">{{descriptionTemplate.get('label').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="descriptionTemplate.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div class="description-field-template-min-multiplicity">
-															<mat-form-field class="w-100">
-																<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}</mat-label>
-																<input matInput type="number" min="0" name="minMultiplicity" [formControl]="descriptionTemplate.get('minMultiplicity')">
-																<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('backendError')">{{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div class="description-field-template-max-multiplicity">
-															<mat-form-field class="w-100">
-																<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}</mat-label>
-																<input matInput type="number" min="1" name="maxMultiplicity" [formControl]="descriptionTemplate.get('maxMultiplicity')">
-																<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('backendError')">{{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div class="description-field-delete">
-															<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
-																<mat-icon>delete</mat-icon>
-															</button>
+														<div class="col-auto pr-0 section-options-horizontal">
+																<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
+																<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
+														</div>	
+														
+														<div class="col">
+															<div class="row">
+																<div class="col-12 col-lg-6 col-xl-3">
+																	<mat-form-field class="w-100">
+																		<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
+																		<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [hidePlaceholder]="true" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, i)"></app-single-auto-complete>
+																		<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
+																		<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																	</mat-form-field>
+																</div>
+																<div class="col-12 col-lg-6 col-xl-3">
+																	<mat-form-field class="w-100">
+																		<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label>
+																		<input matInput type="text" name="label" [formControl]="descriptionTemplate.get('label')">
+																		<mat-error *ngIf="descriptionTemplate.get('label').hasError('backendError')">{{descriptionTemplate.get('label').getError('backendError').message}}</mat-error>
+																		<mat-error *ngIf="descriptionTemplate.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																	</mat-form-field>
+																</div>
+																<div class="col-12 col-lg-6 col-xl-3">
+																	<mat-form-field class="w-100">
+																		<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}</mat-label>
+																		<input matInput type="number" min="0" name="minMultiplicity" [formControl]="descriptionTemplate.get('minMultiplicity')">
+																		<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('backendError')">{{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}</mat-error>
+																		<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																	</mat-form-field>
+																</div>
+																<div class="col-12 col-lg-6 col-xl-3">
+																	<mat-form-field class="w-100">
+																		<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}</mat-label>
+																		<input matInput type="number" min="1" name="maxMultiplicity" [formControl]="descriptionTemplate.get('maxMultiplicity')">
+																		<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('backendError')">{{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}</mat-error>
+																		<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																	</mat-form-field>
+																</div>
+															</div>
 														</div>
+														<div class="col-12 col-xl-auto section-options-horizontal">
+															<div class="row">
+																<div class="col-auto">
+																	<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
+																		<mat-icon>delete</mat-icon>
+																	</button>
+																</div>
+															</div>
+														</div>	
 													</div>
+													<mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
 												</div>
-												<mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
 											</div>
-											<div *ngIf="section.get('hasTemplates').value == true">
-												<mat-form-field class="col-6 mt-3">
-													<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}</mat-label>
-													<app-multiple-auto-complete [formControl]="section.get('prefillingSourcesIds')" [configuration]="prefillingSourceService.multipleAutocompleteConfiguration"></app-multiple-auto-complete>
-													<mat-error *ngIf="section.get('prefillingSourcesIds').hasError('backendError')">{{section.get('prefillingSourcesIds').getError('backendError').message}}</mat-error>
-												</mat-form-field>
+											<div class="row">
+												<div *ngIf="section.get('hasTemplates').value == true" class="col-lg-6 col-12">
+													<mat-form-field class="w-100 mt-3">
+														<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}</mat-label>
+														<app-multiple-auto-complete [formControl]="section.get('prefillingSourcesIds')" [configuration]="prefillingSourceService.multipleAutocompleteConfiguration"></app-multiple-auto-complete>
+														<mat-error *ngIf="section.get('prefillingSourcesIds').hasError('backendError')">{{section.get('prefillingSourcesIds').getError('backendError').message}}</mat-error>
+													</mat-form-field>
+												</div>
 											</div>
 
+
 										</mat-card-content>
 
 
diff --git a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss
index c3fcf299d..ebd157447 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss
@@ -135,12 +135,9 @@
 	}
 }
 
+.description-fields-wrapper,
 .section-fields-wrapper {
 	width: 100%;
-	margin-top: 1.0rem;
-	display: flex;
-	flex-wrap: wrap; // ??
-	align-items: center;
 	
 	.section-options-vertical {
 		display: none;
@@ -159,27 +156,8 @@
 		}
 		
 		.section-options-vertical {
-			width: 100%;
 			display: initial;
 		}
-
-		.section-field {
-			width: 100%;
-			max-width: initial;
-		}
-	}
-}
-
-.description-fields-wrapper {
-	width: 100%;
-	margin-top: 1.0rem;
-	display: flex;
-	flex-wrap: wrap; // ??
-	align-items: center;
-
-	@media (max-width: 1470px) {
-		flex-direction: column;
-		align-items: flex-start;
 	}
 }