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

*dmp-user fields and semantics
---
 .../multiple-auto-complete.component.scss        | 16 +---------------
 .../dmp-user-field/dmp-user-field.component.html | 14 +++++++-------
 .../dmp-user-field/dmp-user-field.component.scss | 13 -------------
 3 files changed, 8 insertions(+), 35 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 633e9467d..0c67f1f8c 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,8 +28,7 @@
 	// text-overflow: ellipsis;
 	// white-space: nowrap;
 	// overflow: hidden;
-	// white-space: normal;
-	white-space: nowrap;
+	white-space: normal;
 	word-break: break-word;
 }
 
@@ -129,16 +128,3 @@
 		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/dmp/dmp-user-field/dmp-user-field.component.html b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html
index aa648dd24..1b86486fd 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html
+++ b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html
@@ -30,18 +30,18 @@
 <ng-template #userForm let-user let-userIndex="index">
 
 
-	<div class="col-auto pb-1">
+	<div class="col-12 col-xl-auto pb-1">
 		<span *ngIf="!isUserSelected(userIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.435rem 0 0.435rem;">{{userIndex + 1}}</span>
 		<mat-icon *ngIf="isUserSelected(userIndex)" [ngClass]="{'drag-handle-disabled': form.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 	</div>
-	<div class="col-auto user-field">
+	<div class="col-12 col-xl-auto">
 		<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')" class="w-100">
 			<div *ngFor="let userType of dmpUserTypeEnumValues" class="col p-0">
 				<mat-button-toggle class="lang-button w-100" [value]="userType">{{enumUtils.toDmpUserTypeString(userType)}}</mat-button-toggle>
 			</div>
 		</mat-button-toggle-group>
 	</div>
-	<div class="col-auto mt-3 user-field" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
+	<div class="col-12 col-xl mt-3" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
 		<mat-form-field class="w-100">
 			<mat-label>{{'DMP-EDITOR.FIELDS1.USER' | translate}}*</mat-label>
 			<app-single-auto-complete [formControl]="user.get('user')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
@@ -49,7 +49,7 @@
 			<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-auto mt-3 user-field" *ngIf="user.get('userType').value == dmpUserTypeEnum.External">
+	<div class="col-12 col-xl mt-3" *ngIf="user.get('userType').value == dmpUserTypeEnum.External">
 		<mat-form-field class="w-100">
 			<mat-label>{{'DMP-EDITOR.FIELDS1.EMAIL' | translate}}*</mat-label>
 			<input matInput type="text" name="email" [formControl]="user.get('email')">
@@ -57,7 +57,7 @@
 			<mat-error *ngIf="user.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-auto mt-3 user-field">
+	<div class="col-12 col-xl mt-3">
 		<mat-form-field class="w-100">
 			<mat-label>{{'DMP-EDITOR.FIELDS1.USER-ROLE' | translate}}</mat-label>
 			<mat-select [formControl]="user.get('role')">
@@ -67,7 +67,7 @@
 			<mat-error *ngIf="user.get('role').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-auto mt-3 user-field" *ngIf="sections">
+	<div class="col-12 col-xl mt-3" *ngIf="sections">
 		<mat-form-field class="w-100">
 			<mat-label>{{'DMP-EDITOR.FIELDS1.SECTION' | translate}}</mat-label>
 			<mat-select [formControl]="user.get('sectionId')">
@@ -79,7 +79,7 @@
 			<mat-error *ngIf="user.get('sectionId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-auto user-field">
+	<div class="col-12 col-xl-auto">
 		<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-USER' | translate}}" (click)="removeUser(userIndex)" [disabled]="form.disabled">
 			<mat-icon>delete</mat-icon>
 		</button>
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
index a4808a077..a47f72664 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
@@ -13,16 +13,3 @@
 	cursor: auto; 
 	color: rgba(0, 0, 0, 0.38);;
 }
-
-
-@media (max-width:1600px) {
-	
-	.user-fields {
-		flex-direction: column;
-	}
-		
-	.user-field {
-		align-self: flex-start;
-		width: 100%;
-	}
-}
\ No newline at end of file