From 7bfff54d3070f2b3122352ff08152c88356c7785 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 19 Mar 2024 10:47:50 +0200
Subject: [PATCH] styling changes

*dmp editor
---
 .../dmp-blueprint-editor.component.html       | 57 +++++++--------
 .../dmp-blueprint-editor.component.scss       | 69 +++++++++++++++++++
 2 files changed, 98 insertions(+), 28 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 8a674d4e8..98ee097b1 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
@@ -91,20 +91,12 @@
 												</div>
 
 												<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="sections-wrapper d-flex align-items-center mb-4" [cdkDragDisabled]="formGroup.disabled">
-														
+													<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="d-flex align-items-center mb-4" [cdkDragDisabled]="formGroup.disabled">
 														<div class="section-fields-wrapper">
-
 															<div class="section-field-index">
 																<span style="font-size: 18px;">{{fieldIndex + 1}}</span>
-															</div>
-															<div [hidden]="viewOnly" class="section-field-delete">
-																<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>
-															</div>
+															</div>				
 															<div class="section-field-sortable"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-														
 															<div class="section-field-category">
 																<mat-form-field class="w-100">
 																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
@@ -183,6 +175,11 @@
 																<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="section-field-delete">
+																<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>
+															</div>
 														</div>
 													</div>
 													<mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error>
@@ -207,21 +204,12 @@
 
 											<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="d-flex align-items-baseline">
-														<div class="mr-1">
-															<span style="font-size: 15px;">{{descriptionTemplateIndex + 1}}</span>
+													<div class="description-fields-wrapper">
+														<div class="description-field-index">
+															<span style="font-size: 18px;">{{descriptionTemplateIndex + 1}}</span>
 														</div>
-														<div class="mr-1">
-															<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 class="mr-1"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-													</div>
-													
-													<div class="d-flex flex-wrap mt-1">
-														<div class="col-auto w-100 mt-3">
+														<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>
@@ -229,15 +217,15 @@
 																<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 															</mat-form-field>
 														</div>
-														<div class="col-auto w-100">
+														<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 class="mt-3" type="text" name="label" [formControl]="descriptionTemplate.get('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">
+														<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')">
@@ -245,7 +233,7 @@
 																<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 															</mat-form-field>
 														</div>
-														<div class="col">
+														<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')">
@@ -253,7 +241,20 @@
 																<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>
 													</div>
+													
+													
+													<!-- <div class="d-flex flex-wrap mt-1">
+														
+														
+														
+														
+													</div> -->
 
 												</div>
 												<mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
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 4db954ac2..e7a514041 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
@@ -149,6 +149,7 @@
 
 	.section-field-index {
 		width: auto;
+		margin-top: 0.2rem;
 		
 		@media (max-width: 1470px) {
 			margin-left: 1.1rem;
@@ -273,3 +274,71 @@
 		}
 	}
 }
+
+
+.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;
+	}
+
+	.description-field-index {
+		width: auto;
+		margin-top: 0.2rem;
+		
+		@media (max-width: 1470px) {
+			margin-left: 1.1rem;
+			// margin-left: 1.6rem;
+		}
+	}
+
+	.description-field-delete {
+		width: auto;
+		@media (max-width: 1470px) {
+			// margin-left: 0.5rem;
+		}
+	}
+	
+	.description-field-sortable {
+		width: auto;
+		margin-top: 0.5rem;
+		
+		@media (max-width: 1470px) {
+			margin-top: 0;
+			margin-left: 0.7rem;
+			// margin-left: 1.2rem;
+		}
+	}
+	
+	.description-field-template {
+		width: 15rem;
+		margin-left: 0.5rem;
+		margin-top: 1.4rem;
+		
+		@media (max-width: 1470px) {
+			margin-top: 0;
+			margin-left: 0;
+			width: 100%;
+		}
+	}
+	
+	.description-field-template-label,
+	.description-field-template-min-multiplicity,
+	.description-field-template-max-multiplicity {
+		width: 11.0rem;
+		margin-left: 0.5rem;
+		margin-top: 1.4rem;
+		@media (max-width: 1470px) {
+			margin-top: 0;
+			margin-left: 0;
+			width: 100%;
+			width: 100%;
+		}
+	}
+}