From 7fe36b150564a445307c19010785c1e42b1a8271 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 2 Apr 2024 19:08:46 +0300
Subject: [PATCH] styling changes in progress

*dmp overview
---
 .../description-overview.component.html       |   2 +-
 .../description-overview.component.scss       |   4 -
 .../dmp/overview/dmp-overview.component.html  | 155 ++++++++++--------
 .../dmp/overview/dmp-overview.component.scss  |  35 ++--
 4 files changed, 113 insertions(+), 83 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 4cdac134a..ccffd6d76 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
@@ -1,4 +1,4 @@
-<div class="main-content description-overview pl-5 pr-5">
+<div class="main-content pl-5 pr-5">
 	<div class="container-fluid pl-0 pr-0">
 		<div *ngIf="description">
 			<a class="row mb-2 pl-1" (click)="goBack()" role="button">
diff --git a/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss b/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
index 044796c0b..570988e99 100644
--- a/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
+++ b/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
@@ -3,10 +3,6 @@
   padding: 2em;
 }
 
-.description-overview {
- // margin-top: 5rem;
-}
-
 // ********ICONS********
 
 .back-icon {
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
index e61144992..2181194dc 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
@@ -6,36 +6,37 @@
 				<p class="label-txt pointer">{{'DMP-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="dmp-logo">{{ 'DMP-OVERVIEW.TITLE' | translate }}</span>
-						<p class="dmp-label ml-3 mb-0">{{ dmp.label }}</p>
+						<div class="col-auto"><span class="dmp-logo">{{ 'DMP-OVERVIEW.TITLE' | translate }}</span></div>
+						<div class="col-auto d-flex"><span class="dmp-label">{{ dmp.label }}</span></div>
 					</div>
-					<div class="row d-flex align-items-center mt-3 mb-4 label-txt">
-						<div *ngIf="isUserDmpRelated()" class="d-flex">
-							<p class="ml-0 mb-0 label2-txt">
-								{{ enumUtils.toDmpUserRolesString(dmpService.getCurrentUserRolesInDmp(dmp?.dmpUsers)) }}
+					<div class="row align-items-center mt-3 mb-4 label-txt">
+						<div *ngIf="isUserDmpRelated()" class="col-auto d-flex">
+							<p class="ml-0 mb-0 label2-txt">{{ enumUtils.toDmpUserRolesString(dmpService.getCurrentUserRolesInDmp(dmp?.dmpUsers)) }}
 						</div>
-						<span *ngIf="isUserDmpRelated() && (isPublishedDmp() || isLocked)" class="ml-2 mr-2">.</span>
-						<div *ngIf="isPublishedDmp()" class="d-flex flex-row">
+						<div *ngIf="isUserDmpRelated() && (isPublishedDmp() || isLocked)" class="col-auto"><span>.</span></div>
+						<div *ngIf="isPublishedDmp()" class="col-auto d-flex flex-row">
 							<mat-icon class="status-icon">public</mat-icon>
 							{{'DMP-OVERVIEW.PUBLIC' | translate}}
 						</div>
-						<span *ngIf="isPublishedDmp() && isLocked" class="ml-2 mr-2">.</span>
-						<div *ngIf="isLocked" class="d-flex flex-row">
+						<div *ngIf="isPublishedDmp() && isLocked" class="col-auto"><span>.</span></div>
+						<div *ngIf="isLocked" class="col-auto d-flex flex-row">
 							<mat-icon class="status-icon">lock_outline</mat-icon>
 							{{'DMP-OVERVIEW.LOCKED' | translate}}
 						</div>
-						<mat-form-field appearance="outline" subscriptSizing="dynamic" class="dense-3 versions-select ml-3 mr-3">
-							<mat-select placeholder="{{'DMP-OVERVIEW.VERSION' | translate}} {{dmp.version}}" [(ngModel)]="version" (ngModelChange)="versionChanged(version.id)">
-								<mat-option *ngFor="let version of pastVersions" [value]="version">
-									{{'DMP-OVERVIEW.VERSION' | translate}} {{version.version}}</mat-option>
-							</mat-select>
-						</mat-form-field>
-						<div class="d-flex mr-4">{{'DMP-OVERVIEW.EDITED' | translate}} :
+						<div class="col-auto">
+							<mat-form-field appearance="outline" subscriptSizing="dynamic" class="dense-3 versions-select">
+								<mat-select placeholder="{{'DMP-OVERVIEW.VERSION' | translate}} {{dmp.version}}" [(ngModel)]="version" (ngModelChange)="versionChanged(version.id)">
+									<mat-option *ngFor="let version of pastVersions" [value]="version">
+										{{'DMP-OVERVIEW.VERSION' | translate}} {{version.version}}</mat-option>
+								</mat-select>
+							</mat-form-field>
+						</div>
+						<div class="col-auto d-flex">{{'DMP-OVERVIEW.EDITED' | translate}} :
 							{{dmp.updatedAt | dateTimeCultureFormatter: "d MMMM y"}}
 						</div>
-						<div class="d-flex mr-4">
+						<div class="col-auto d-flex">
 							<div *ngIf="dmp.status== dmpStatusEnum.Finalized" class="d-flex flex-row uppercase">
 								<mat-icon class="status-icon">check</mat-icon>
 								{{'DMP-OVERVIEW.FINALISED' | translate}}
@@ -44,68 +45,86 @@
 					</div>
 					<div class="row">
 						<!-- <button *ngIf="isDraftDmp(dmp) && isDmpOwner(dmp) && !isLocked" (click)="editClicked(dmp)" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> -->
-						<button *ngIf="canEditDmp() && !isLocked" (click)="editClicked()" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
-							<mat-icon class="mat-mini-fab-icon">create</mat-icon>
-						</button>
-						<button *ngIf="canCloneDmp()" (click)="cloneClicked()" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
-							<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
-						</button>
-						<button *ngIf="canDeleteDmp() && !isLocked" (click)="deleteClicked()" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
-							<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
-						</button>
-					</div>
-					<div *ngIf="referenceService.hasRerefenceOfTypes(dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])">
-						<div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
-						<div class="row dmp-label">{{referenceService.getReferencesForTypesFirstSafe(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">
-							<span *ngIf="isOrcid(dmpReference.reference)">
-								<a href="{{ getOrcidPathForResearcher(dmpReference.reference?.reference) }}" target="blank" class="researcher">
-									<div class="id-btn">&nbsp;</div>
-									<div *ngIf="!last">{{ dmpReference.reference?.label }}, </div>
-									<div *ngIf="last">{{ dmpReference.reference?.label }}</div>
-								</a>
-							</span>
-							<span *ngIf="!isOrcid(dmpReference.reference)">
-								<div *ngIf="!last">{{ dmpReference.reference?.label }}, </div>
-								<div *ngIf="last">{{ dmpReference.reference?.label }}</div>
-							</span>
+						<div *ngIf="canEditDmp() && !isLocked" class="col-auto pr-0">
+							<button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
+								<mat-icon class="mat-mini-fab-icon">create</mat-icon>
+							</button>
+						</div>
+						<div *ngIf="canCloneDmp()" class="col-auto pr-0">
+							<button (click)="cloneClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
+								<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
+							</button>
+						</div>
+						<div *ngIf="canDeleteDmp() && !isLocked" class="col-auto pr-0">
+							<button (click)="deleteClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
+								<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
+							</button>
 						</div>
-						<span *ngIf="!researchers || researchers.length === 0" class="material-icons">horizontal_rule</span>
 					</div>
-					<div class="row header">{{'DMP-OVERVIEW.DESCRIPTION' | translate}}</div>
+					<ng-container *ngIf="referenceService.hasRerefenceOfTypes(dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])">
+						<div class="row header"><div class="col-auto">{{'DMP-OVERVIEW.GRANT' | translate}}</div></div>
+						<div class="row dmp-label"><div class="col-auto">{{referenceService.getReferencesForTypesFirstSafe(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">
+							<ng-container *ngFor="let dmpReference of researchers let last = last">
+								<ng-container *ngIf="isOrcid(dmpReference.reference)">
+									<div class="d-inline-block">
+										<a href="{{ getOrcidPathForResearcher(dmpReference.reference?.reference) }}" target="blank" class="researcher">
+											<span class="id-btn">&nbsp;</span>
+											<span *ngIf="!last">{{ dmpReference.reference?.label }},</span><span>&nbsp;</span>
+											<span *ngIf="last">{{ dmpReference.reference?.label }}</span>
+										</a>
+									</div>
+								</ng-container>
+								<ng-container *ngIf="!isOrcid(dmpReference.reference)" class="col-auto pr-0">
+									<div class="d-inline-block">
+										<span *ngIf="!last">{{ dmpReference.reference?.label }},</span><span>&nbsp;</span>
+										<span *ngIf="last">{{ dmpReference.reference?.label }}</span>
+									</div>
+								</ng-container>
+							</ng-container>
+						</div>
+						<div *ngIf="!researchers || researchers.length === 0" class="col-12"><span class="material-icons">horizontal_rule</span></div>
+					</div>
+					<div class="row header"><div class="col-12">{{'DMP-OVERVIEW.DESCRIPTION' | translate}}</div></div>
 					<div class="row" *ngIf="dmp.description">
-						<p class="desc-txt" [innerHTML]="dmp.description"></p>
+						<div class="col-12">
+							<p class="desc-txt" [innerHTML]="dmp.description"></p>
+						</div>
 					</div>
 					<div class="row" *ngIf="!dmp.description">
-						<span class="material-icons">horizontal_rule</span>
-					</div>
-					<div class="row header">{{'DMP-OVERVIEW.DESCRIPTIONS' | translate}}</div>
-					<div class="d-flex flex-column">
-						<div *ngFor="let description of dmp.descriptions">
-							<a class="row description" [routerLink]="isPublicView ? ['/descriptions/overview/public/' + description.id] : ['/descriptions/overview/' + description.id]" target="_blank">
-								<button mat-raised-button class="mb-2 mr-2 pl-0 pr-0 h-100">
-									<div matTooltip="{{ description.label }}" class="col-auto" [ngClass]="{'description-btn': description.status === descriptionStatusEnum.Draft, 'description-finalized-btn': description.status === descriptionStatusEnum.Finalized}">
-										<div class="description-btn-label">{{ description.label }}</div>
-										<mat-icon>launch</mat-icon>
-									</div>
-								</button>
-							</a>
-						</div>
-						<div class="row" *ngIf="!dmp.descriptions || dmp.descriptions.length === 0">
+						<div class="col-12">
 							<span class="material-icons">horizontal_rule</span>
 						</div>
 					</div>
-					<div class="row mt-2 add-description-txt" *ngIf="!isLocked">
+					<div class="row header"><div class="col-12">{{'DMP-OVERVIEW.DESCRIPTIONS' | translate}}</div></div>
+					<div class="row">
+						<ng-container *ngFor="let description of dmp.descriptions">
+							<div class="col-12 col-lg-7 mt-1">
+								<a class="w-100 description" [routerLink]="isPublicView ? ['/descriptions/overview/public/' + description.id] : ['/descriptions/overview/' + description.id]" target="_blank">
+									<button class="w-100" [ngClass]="{'dmp-btn': description.status === descriptionStatusEnum.Draft, 'dmp-finalized-btn': description.status === descriptionStatusEnum.Finalized}">
+										<div matTooltip="{{ description.label }}" class="d-flex align-items-center justify-content-between">
+											<div class="description-btn-label">{{ description.label }}</div>
+											<mat-icon>launch</mat-icon>
+										</div>
+									</button>
+								</a>
+							</div>
+						</ng-container>
+						<div class="col-12" *ngIf="!dmp.descriptions || dmp.descriptions.length === 0">
+							<span class="material-icons">horizontal_rule</span>
+						</div>
+					</div>
+					<!-- <div class="row mt-2 add-description-txt" *ngIf="!isLocked">
 						<a class="add-description-btn" *ngIf="canEditDmp()" [routerLink]="['/plans/edit/' + dmp.id]" target="_blank">
 							<mat-icon>add</mat-icon>
 							{{'DMP-OVERVIEW.ACTIONS.ADD-DESCRIPTION' | translate}}
 						</a>
-					</div>
+					</div> -->
 				</div>
-				<div class="col-md-4 col-lg-4 p-0">
+				<div class="col-12 col-lg-4">
 					<ng-container *ngIf="!hasDoi(dmp)">
 						<div class="row ml-0 mr-0 mb-3">
 							<span class="col-auto pl-0">{{'DMP-OVERVIEW.DOI-PROVIDED' | translate}}: </span>
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
index 42b921790..06a8a13f3 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
@@ -5,10 +5,6 @@
 	padding: 2em;
 }
 
-.dmp-overview {
-	//margin-top: 5rem;
-}
-
 // ********ICONS********
 
 .back-icon {
@@ -47,7 +43,7 @@
 }
 
 .description-btn {
-	width: 36.1em;
+	// width: 36.1em;
 	padding: 0 1.1em;
 	background-color: var(--secondary-color);
 	border-radius: 4px;
@@ -57,7 +53,7 @@
 }
 
 .description-finalized-btn {
-	width: 36.1em;
+	// width: 36.1em;
 	padding: 0 1.1em;
 	background-color: #b2f772;
 	border-radius: 4px;
@@ -178,19 +174,20 @@
 }
 
 .desc-txt {
-	width: 48.25em;
+	// width: 48.25em;
 	font-size: 1em;
 	color: #212121;
 	margin-bottom: 1.875em;
 }
 
-.description {
-	width: fit-content;
-}
+// .description {
+// 	width: fit-content;
+// }
 
 .description-btn-label {
 	margin-right: 1em;
 	overflow: hidden;
+	white-space: nowrap;
 	text-overflow: ellipsis;
 	letter-spacing: 0px;
 	color: #212121;
@@ -331,3 +328,21 @@
 .select-repo {
 	border-bottom: 1px solid #212121;
 }
+
+.dmp-btn {
+  min-height: 2.3em;
+  background-color: var(--secondary-color);
+  border-radius: 4px;
+  flex-direction: row;
+  justify-content: space-between;
+  border: none;
+}
+
+.dmp-finalized-btn {
+  min-height: 2.3em;
+  background-color: #b2f772;
+  border-radius: 4px;
+  flex-direction: row;
+  justify-content: space-between;
+  border: none;
+}