From 9d5d8917017e7753c610c958fcc9cce7989a93c2 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 2 Apr 2024 14:02:54 +0300
Subject: [PATCH] styling changes

*description-overview
---
 .../description-overview.component.html       | 206 ++++++++++--------
 1 file changed, 118 insertions(+), 88 deletions(-)

diff --git a/dmp-frontend/src/app/ui/description/overview/description-overview.component.html b/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
index 5fcbd7c2f..5265c37b8 100644
--- a/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
+++ b/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
@@ -6,67 +6,81 @@
 				<p class="label-txt pointer">{{'DESCRIPTION-OVERVIEW.ACTIONS.BACK' | translate}}</p>
 			</a>
 			<div class="row">
-				<div class="col-md-8 col-lg-8 pl-4">
+				<div class="col-12 col-lg-8 pl-2">
 					<div class="row">
-						<span class="col-auto description-logo">{{ 'DESCRIPTION-OVERVIEW.TITLE' | translate }}</span>
-						<p class="col description-label p-0 ml-3 mb-0">{{ description.label }}</p>
+						<div class="col-auto"><span class="description-logo">{{ 'DESCRIPTION-OVERVIEW.TITLE' | translate }}</span></div>
+						<div class="col-auto d-flex"><span class="description-label">{{ description.label }}</span></div>
 					</div>
 					<div class="row d-flex align-items-center mt-3 mb-4 label-txt">
-						<div *ngIf="!isPublicView" class="d-flex">
-							<p class="ml-0 mb-0 label2-txt">
-								{{ enumUtils.toDmpUserRolesString(dmpService.getCurrentUserRolesInDmp(description?.dmp?.dmpUsers)) }}
-							</p>
+						<div *ngIf="!isPublicView" class="col-auto d-flex">
+							<p class="ml-0 mb-0 label2-txt">{{ enumUtils.toDmpUserRolesString(dmpService.getCurrentUserRolesInDmp(description?.dmp?.dmpUsers)) }}</p>
 						</div>
-						<span *ngIf="canEdit" class="ml-2 mr-2">.</span>
-						<div *ngIf="description.status === descriptionStatusEnum.Finalized && description.dmp.accessType === dmpAccessTypeEnum.Public" class="d-flex flex-row">
+						<div *ngIf="canEdit" class="col-auto"><span>.</span></div>
+						<div *ngIf="description.status === descriptionStatusEnum.Finalized && description.dmp.accessType === dmpAccessTypeEnum.Public" class="col-auto d-flex">
 							<mat-icon class="status-icon">public</mat-icon>
 							{{'DESCRIPTION-OVERVIEW.PUBLIC' | translate}}
 						</div>
-						<span *ngIf="description.status === descriptionStatusEnum.Finalized && description.dmp.accessType === dmpAccessTypeEnum.Public" class="ml-2 mr-2">.</span>
-						<div *ngIf="isLocked" class="d-flex flex-row">
+						<div *ngIf="description.status === descriptionStatusEnum.Finalized && description.dmp.accessType === dmpAccessTypeEnum.Public" class="col-auto d-flex"><span>.</span></div>
+						<div *ngIf="isLocked" class="col-auto d-flex flex-row">
 							<mat-icon class="status-icon">lock_outline</mat-icon>
 							{{'DESCRIPTION-OVERVIEW.LOCKED' | translate}}
 						</div>
-						<span *ngIf="isLocked" class="ml-2 mr-2">.</span>
-						<div class="d-flex mr-2">{{'DESCRIPTION-OVERVIEW.EDITED' | translate}} :
+						<div *ngIf="isLocked" class="col-auto"><span>.</span></div>
+						<div class="col-auto d-flex mr-2">{{'DESCRIPTION-OVERVIEW.EDITED' | translate}} :
 							{{description.updatedAt | dateTimeCultureFormatter: "d MMMM y"}}
 						</div>
-						<div class="d-flex ml-2 mr-4">
-							<div *ngIf="description.status === descriptionStatusEnum.Finalized" class="d-flex flex-row uppercase">
+						<div *ngIf="description.status === descriptionStatusEnum.Finalized" class="col-auto d-flex">
+							<div class="d-flex flex-row uppercase">
 								<mat-icon class="status-icon check-icon">check</mat-icon>
 								{{'DESCRIPTION-OVERVIEW.FINALISED' | translate}}
 							</div>
 						</div>
 					</div>
 					<div class="row mb-4 pb-3">
-						<button *ngIf="canEdit && isDraftDescription(description) && !isLocked" (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
+            <div *ngIf="canEdit && isDraftDescription(description) && !isLocked" class="col-auto">
+            	<button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
 							<mat-icon class="mat-mini-fab-icon">create</mat-icon>
-						</button>
-						<button *ngIf="canEdit" (click)="openCopyToDmpDialog()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
-							<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
-						</button>
-						<button *ngIf="canDelete && !isLocked" (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
-							<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
-						</button>
+						  </button>
+            </div>
+						<div *ngIf="canEdit" class="col-auto">
+							<button (click)="openCopyToDmpDialog()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
+								<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
+							</button>
+						</div>
+						<div *ngIf="canDelete && !isLocked" class="col-auto">
+							<button (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
+								<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
+							</button>
+						</div>
 					</div>
-					<div class="row header">{{'DESCRIPTION-OVERVIEW.PART-OF' | translate}}</div>
-					<div class="row ">
-						<button class="dmp-btn" (click)="dmpClicked(description.dmp)">
-							<div class="dmp-btn-label">
-								{{ this.description.dmp.label }}
-							</div>
-							<mat-icon>launch</mat-icon>
-						</button>
+					<div class="row header">
+						<div class="col-auto">{{'DESCRIPTION-OVERVIEW.PART-OF' | translate}}</div>
 					</div>
-
-					<div *ngIf="referenceService.hasRerefenceOfTypes(description?.dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])">
-						<div class="row header">{{'DESCRIPTION-OVERVIEW.GRANT' | translate}}</div>
-						<div class="row description-label">{{referenceService.getReferencesForTypesFirstSafe(description?.dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])?.reference?.label}}</div>
-					</div>
-
-					<div class="row header">{{'DESCRIPTION-OVERVIEW.RESEARCHERS' | translate}}</div>
 					<div class="row">
-						<div *ngFor="let dmpReference of researchers let last = last">
+						<div class="col-12 col-lg-7">
+							<button class="w-100 dmp-btn p-1" (click)="dmpClicked(description.dmp)">
+								<div class="w-100 dmp-btn-label">
+									{{ this.description.dmp.label }}
+								</div>
+								<div class="w-auto">
+									<mat-icon>launch</mat-icon>
+								</div>
+							</button>
+						</div>
+					</div>
+					<ng-container *ngIf="referenceService.hasRerefenceOfTypes(description?.dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])">
+						<div class="row header">
+							<div class="col-auto">{{'DESCRIPTION-OVERVIEW.GRANT' | translate}}</div>
+						</div>
+						<div class="row description-label">
+							<div class="col-auto">{{referenceService.getReferencesForTypesFirstSafe(description?.dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])?.reference?.label}}</div>
+						</div>
+					</ng-container>
+					<div class="row header">
+						<div class="col-auto">{{'DESCRIPTION-OVERVIEW.RESEARCHERS' | translate}}</div>
+					</div>
+					<div class="row">
+						<div class="col-12" *ngFor="let dmpReference of researchers let last = last">
 							<span *ngIf="isOrcid(dmpReference.reference)">
 								<a href="{{ getOrcidPathForResearcher(dmpReference.reference?.reference) }}" target="blank" class="researcher">
 									<div class="id-btn">&nbsp;</div>
@@ -79,72 +93,88 @@
 								<div *ngIf="last">{{ dmpReference.reference?.label }}</div>
 							</span>
 						</div>
-						<span *ngIf="!researchers || researchers.length === 0" class="material-icons">horizontal_rule</span>
 					</div>
-
-					<div class="row header">{{'DESCRIPTION-OVERVIEW.DESCRIPTION' | translate}}</div>
+					<div class="row">
+						<div class="col-12">
+							<span *ngIf="!researchers || researchers.length === 0" class="material-icons">horizontal_rule</span>
+						</div>
+					</div>
+					<div class="row header">
+						<div class="col-auto">{{'DESCRIPTION-OVERVIEW.DESCRIPTION' | translate}}</div>
+					</div>
 					<div class="row" *ngIf="description.description">
-						<p class="desc-txt" [innerHTML]="description.description"></p>
+						<div class="col-12">
+							<p [innerHTML]="description.description"></p>
+						</div>
 					</div>
 					<div class="row" *ngIf="!description.description">
-						<span class="material-icons">horizontal_rule</span>
+						<div class="col-12">
+							<span class="material-icons">horizontal_rule</span>
+						</div>    
 					</div>
 				</div>
-				<div class="col-md-4 col-lg-4 p-0">
-					<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1" *ngIf="isAuthenticated()">
-						<div *ngIf="canFinalize && isDraftDescription(description) && !isLocked">
-							<div class="row ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(description)">
-								<button mat-mini-fab class="finalize-btn">
-									<mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon>
-								</button>
-								<p class="mb-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
-							</div>
-							<div class="row ml-0 mr-0 pl-4 d-flex align-items-center">
-								<hr class="hr-line">
-							</div>
+				<div class="col-12 col-lg-4">
+					<ng-container *ngIf="isAuthenticated()">
+						<div class="row frame mb-3 pt-4 pl-3 pr-5 pb-3">
+							<ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked">
+								<div class="col-12 ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(description)">
+									<button mat-mini-fab class="finalize-btn">
+											<mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon>
+									</button>
+									<p class="mb-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
+								</div>
+								<div class="row ml-0 mr-0 pl-4 d-flex align-items-center">
+									<hr class="hr-line">
+								</div>
+							</ng-container>
+							<ng-container *ngIf="hasReversableStatus(description)">
+								<div class="col-12 ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="reverseFinalization(description)">
+									<button mat-mini-fab class="frame-btn">
+										<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
+									</button>
+									<p class="mb-0 mr-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
+								</div>
+							</ng-container>
+							<ng-container *ngIf="fileTransformerService.availableFormats.length > 0">
+								<div class="col-12 d-flex align-items-center">
+									<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
+										<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
+									</button>
+									<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
+								</div>
+							</ng-container>
+							<mat-menu #exportMenu="matMenu" xPosition="before">
+									<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.repositoryId, fileTransformer.format)">
+											<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
+											<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
+									</button>
+							</mat-menu>
 						</div>
-						<div *ngIf="hasReversableStatus(description)" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="reverseFinalization(description)">
-							<button mat-mini-fab class="frame-btn">
-								<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
-							</button>
-							<p class="mb-0 mr-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
-						</div>
-						<div class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" *ngIf="fileTransformerService.availableFormats.length > 0">
-							<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
-								<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
-							</button>
-							<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">
-								{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
-						</div>
-						<mat-menu #exportMenu="matMenu" xPosition="before">
-							<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.repositoryId, fileTransformer.format)">
-								<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
-								<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
-							</button>
-						</mat-menu>
-					</div>
-					<div class="frame mb-3 pt-4 pl-3 pr-3 pb-1">
-						<div class="row ml-0 mr-0 pl-4 pb-3">
+					</ng-container>
+					<div class="row frame mb-3 pt-4 pl-3 pr-3 pb-3">
+						<div class="col-12">
 							<p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p>
 						</div>
-						<div class="row ml-0 mr-0 pl-4 ml-2 pb-3 d-flex align-items-center">
+						<div class="col-12 d-flex align-items-center">
 							<div *ngFor="let dmpUser of description.dmp?.dmpUsers" class="row authors">
-								<div class="d-flex flex-row">
+								<div class="col-12 d-flex flex-row">
 									<button class="account_btn mr-3 pl-0">
-										<mat-icon class="account-icon">account_circle</mat-icon>
+											<mat-icon class="account-icon">account_circle</mat-icon>
 									</button>
 									<div>
-										<p class="authors-label">{{ dmpUser.user?.name }}
-											<span *ngIf="isUserAuthor(dmpUser.user?.id)">
-												({{ 'DESCRIPTION-OVERVIEW.YOU' | translate }})</span>
-										</p>
+										<p class="authors-label">{{ dmpUser.user?.name }}</p>
+										<p *ngIf="isUserAuthor(dmpUser.user?.id)">({{ 'DESCRIPTION-OVERVIEW.YOU' | translate }})</p>
 										<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
 									</div>
 								</div>
-								<button *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
+								<div class="col-12 authors"  *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" >
+									<div class="d-flex flex-row">
+											<button (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
+									</div>
+								</div>
 							</div>
 						</div>
-						<div *ngIf="canInviteDmpUsers" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
+						<div *ngIf="canInviteDmpUsers" class="col-12 d-flex justify-content-center mt-2">
 							<button mat-raised-button class="invite-btn" (click)="openShareDialog()">
 								<mat-icon>group_add</mat-icon>
 								{{'DESCRIPTION-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
@@ -155,4 +185,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>
\ No newline at end of file