From 279a7f97d2da5b923e8b5ee0eff0cea395bebd5e Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Thu, 21 Mar 2024 12:48:36 +0200
Subject: [PATCH] styling changes

*dmp-blueprint-editor
---
 .../multiple-auto-complete.component.scss     | 16 +++++++-
 .../dmp-blueprint-editor.component.html       | 40 +++++++++----------
 .../dmp-blueprint-editor.component.scss       | 30 +-------------
 3 files changed, 35 insertions(+), 51 deletions(-)

diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
index 0c67f1f8c..633e9467d 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
@@ -28,7 +28,8 @@
 	// text-overflow: ellipsis;
 	// white-space: nowrap;
 	// overflow: hidden;
-	white-space: normal;
+	// white-space: normal;
+	white-space: nowrap;
 	word-break: break-word;
 }
 
@@ -128,3 +129,16 @@
 		color: transparent;
 	}
 }
+
+:host ::ng-deep .mdc-evolution-chip-set__chips {
+  max-width: 100%;
+	text-overflow: ellipsis;
+	flex-flow: nowrap;
+	overflow-x: scroll;
+}
+
+:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
+:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
+:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label {
+  overflow: hidden;
+}
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 2cb60227c..bc54d2b54 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
@@ -89,11 +89,10 @@
 												<div class="col-auto mb-3">
 													<button mat-button class="action-btn" type="button" (click)="addField(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 												</div>
-
+											</div>
+											<div class="row">
 												<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
-													<ng-container *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="" [cdkDragDisabled]="formGroup.disabled">
-														<div class="section-fields-wrapper row" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
-
+													<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 class="col-auto section-options-vertical">
 																<div class="row justify-content-center">
 																	<div class="col-auto">
@@ -107,11 +106,9 @@
 																	</div>
 																</div>
 															</div>
-															<div class="col-auto section-field section-options-horizontal">
-																<div class="w-1">
+															<div class="col-auto pr-0 section-field 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>
 															<div class="col">
 																<div class="row">
@@ -164,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-4 section-field" *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')">
@@ -205,24 +202,25 @@
 																	</div>
 																</div>
 															</div>
-														</div>
-													</ng-container>
+													</div>
 													<mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error>
 													<mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error>
 												</div>
 											</div>
 
-											<div class="col-12">
-												<div class="row d-flex flex-column">
-													<div class="col-auto pl-2">
-														<mat-checkbox [formControl]="section.get('hasTemplates')" (change)="removeAllDescriptionTemplates($event, sectionIndex)">
-															{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}
-														</mat-checkbox>
-														<mat-error *ngIf="section.get('hasTemplates').hasError('backendError')">{{section.get('hasTemplates').getError('backendError').message}}</mat-error>
-														<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-													</div>
-													<div class="col-auto" *ngIf="section.get('hasTemplates').value == true">
-														<button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
+											<div class="row">
+												<div class="col-12">
+													<div class="row d-flex flex-column">
+														<div class="col-auto">
+															<mat-checkbox [formControl]="section.get('hasTemplates')" (change)="removeAllDescriptionTemplates($event, sectionIndex)">
+																{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}
+															</mat-checkbox>
+															<mat-error *ngIf="section.get('hasTemplates').hasError('backendError')">{{section.get('hasTemplates').getError('backendError').message}}</mat-error>
+															<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+														</div>
+														<div class="col-auto" *ngIf="section.get('hasTemplates').value == true">
+															<button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
+														</div>
 													</div>
 												</div>
 											</div>
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 625e43482..c3fcf299d 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,36 +149,8 @@
 	.section-options-horizontal {
 		display: initial;
 	}
-	
-	@media (min-width: 2060px) and (max-width:2215px) {
-		.section-field {
-			padding-left: 0;
-		}
-	}
-	
-	@media (min-width: 2000px) and (max-width: 2060px) {
-		.section-field {
-			padding-left: 0;
-			padding-right: 0.6rem;
-		}
-	}
-	
-	@media (min-width: 1950px) and (max-width: 2000px) {
-		.section-field {
-			padding-left: 0;
-			padding-right: 0.3rem;
-		}
-	}
-	
-	// @media (min-width: 1900px) and (max-width: 1950px) {
-	// 	.section-field {
-	// 		padding-left: 0;
-	// 		padding-right: 0.05rem;
-	// 	}
-	// }
 
-
-	@media (max-width: 1900px) {
+	@media (max-width: 1200px) {
 		flex-direction: column;
 		align-items: flex-start;