From c2d6e7b61bcad47863adbf98f8ec8552d51b37d5 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 16 Apr 2024 13:29:34 +0300
Subject: [PATCH] dmp-overview ui fix

---
 .../dmp-deposit-dropdown.component.html       | 14 +++--
 .../dmp/overview/dmp-overview.component.html  | 62 ++++++++++++-------
 2 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dropdown/dmp-deposit-dropdown.component.html b/dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dropdown/dmp-deposit-dropdown.component.html
index 08206f330..40209200a 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dropdown/dmp-deposit-dropdown.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dropdown/dmp-deposit-dropdown.component.html
@@ -1,8 +1,12 @@
-<div [matMenuTriggerFor]="depositMenu" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
-	<button mat-mini-fab class="frame-btn">
-		<mat-icon class="mat-mini-fab-icon">archive</mat-icon>
-	</button>
-	<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p>
+<div [matMenuTriggerFor]="depositMenu" class="row pb-3 align-items-center">
+	<div class="col-auto pr-0">
+		<button mat-mini-fab class="frame-btn">
+			<mat-icon class="mat-mini-fab-icon">archive</mat-icon>
+		</button>
+	</div>
+	<div class="col-auto pl-0">
+		<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p>
+	</div>
 </div>
 <mat-menu #depositMenu="matMenu">
 	<button mat-menu-item *ngFor="let repo of inputRepos" (click)="deposit(repo)">
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 e0779fe4a..8a2517c23 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
@@ -166,50 +166,66 @@
 						<div class="row">
 							<div class="col-12">
 								<div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
-									<div class="row">
-										<ng-container *ngIf="isDraftDmp() && canFinalizeDmp() && !isLocked">
-											<div class="col-12 d-flex align-items-center" (click)="finalize(dmp)">
+									<ng-container *ngIf="isDraftDmp() && canFinalizeDmp() && !isLocked">
+										<div class="row align-items-center" (click)="finalize(dmp)">
+											<div class="col-auto pr-0">
 												<button mat-mini-fab class="finalize-btn">
 													<mat-icon class="mat-mini-fab-icon">check</mat-icon>
 												</button>
+											</div>
+											<div class="col-auto pl-0">
 												<p class="mb-0 pl-2 finalize-txt">{{ 'DMP-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
 											</div>
-											<div class="col-12 d-flex align-items-center">
+										</div>
+										<div class="row align-items-center">
+											<div class="col-12">
 												<hr class="hr-line">
 											</div>
-										</ng-container>
-										<app-dmp-deposit-dropdown *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && canDepositDmp(dmp) && inputRepos.length > 0" [inputRepos]="inputRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown>
-										<ng-container *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDmp(dmp) && canFinalizeDmp(dmp)" (click)="reverseFinalization()">
-											<div class="col-12 mb-1 d-flex align-items-center">
+										</div>
+									</ng-container>
+									<app-dmp-deposit-dropdown *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && canDepositDmp(dmp) && inputRepos.length > 0" [inputRepos]="inputRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown>
+									<ng-container *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDmp(dmp) && canFinalizeDmp(dmp)">
+										<div (click)="reverseFinalization()" class="row mb-3 align-items-center">
+											<div class="col-auto pr-0">
 												<button mat-mini-fab class="frame-btn">
 													<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
 												</button>
+											</div>
+											<div class="col-auto pl-0">
 												<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
 											</div>
-										</ng-container>
-										<ng-container *ngIf="canExportDmp() && fileTransformerService.availableFormats.length > 0">
-											<div class="col-12  mb-1 d-flex align-items-center">
+										</div>
+									</ng-container>
+									<ng-container *ngIf="canExportDmp() && fileTransformerService.availableFormats.length > 0">
+										<div class="row mb-3 align-items-center">
+											<div class="col-auto pr-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">{{ 'DMP-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
 											</div>
-										</ng-container>
-										<ng-container *ngIf="canCreateNewVersion()">
-											<div class="col-12 d-flex align-items-center" (click)="newVersionClicked()">
+											<div class="col-auto pl-0">
+												<p class="mb-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DMP-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
+											</div>
+										</div>
+									</ng-container>
+									<ng-container *ngIf="canCreateNewVersion()">
+										<div class="row mb-3 align-items-center" (click)="newVersionClicked()">
+											<div class="col-auto pr-0">
 												<button mat-mini-fab class="frame-btn">
 													<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
 												</button>
+											</div>
+											<div class="col-auto pl-0">
 												<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.NEW-VERSION' | translate }}</p>
 											</div>
-										</ng-container>
-										<mat-menu #exportMenu="matMenu" xPosition="before">
-											<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.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>
+									</ng-container>
+									<mat-menu #exportMenu="matMenu" xPosition="before">
+										<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.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>
 						</div>