From 279ae95b5ab4c55813009b2ada17ff2fc5c263f7 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Thu, 25 Apr 2024 14:07:58 +0300
Subject: [PATCH] description editor ui fixes

---
 .../editor/description-editor.component.html  | 68 ++++++++++++-------
 .../editor/description-editor.component.scss  |  4 +-
 .../table-of-contents.component.scss          |  8 +--
 .../dmp-editor.component.html                 |  2 -
 4 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html
index 7c59fea12..8d2a40aa1 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html
+++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html
@@ -78,48 +78,64 @@
 				</div>
 			</div>
 			<div class="row editor-content">
-				<div class="col-auto description-stepper">
-					<div class="stepper-back d-flex flex-direction-row">
-						<div class="d-flex align-items-center pr-2 back-to-dmp" (click)="backToDmp()">
+				<div class="col-12 col-md-3 pr-md-0">
+					<div class="stepper-back row">
+						<div class="col-auto d-flex align-items-center back-to-dmp" (click)="backToDmp()">
 							<mat-icon class="back-icon pointer">chevron_left</mat-icon>
 							<span class="pointer">{{'DESCRIPTION-EDITOR.ACTIONS.BACK-TO' | translate}}</span>
 						</div>
-						<div class="col-auto dmp-label ml-3">{{'DESCRIPTION-EDITOR.DMP' | translate}}</div>
+						<div class="col-auto dmp-label ml-1">{{'DESCRIPTION-EDITOR.DMP' | translate}}</div>
 					</div>
-					<div class="stepper-title">{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</div>
-					<div class="stepper-options" id="stepper-options">
-						<div class="col stepper-list">
-							<div (click)="table0fContents.onToCentrySelected()" *ngIf="!descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
-							<div (click)="table0fContents.onToCentrySelected()" *ngIf="descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
+					<div class="row stepper-title"> <div class="col-auto"><span>{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</span></div></div>
+					<div class="row stepper-options" id="stepper-options">
+						<div class="col-12 stepper-list">
+							<div class="row" *ngIf="!descriptionInfoValid()">
+								<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
+							</div>
+							<div class="row" *ngIf="descriptionInfoValid()">
+								<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
+							</div>
 							<div class="row toc-pane-container" #boundary>
 								<div #spacer></div>
-								<app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
+								<div class="col-12">
+									<app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
+								</div>
 							</div>
 						</div>
 					</div>
-					<div class="stepper-actions">
-						<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
-							<span class="material-icons">chevron_left</span>
-							<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
+					<div class="row mt-2 stepper-actions justify-content-around">
+						<div class="col-auto mb-1">
+							<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
+								<span class="material-icons">chevron_left</span>
+								<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
+							</div>
 						</div>
 
-						<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn description-next ml-auto" (click)="nextStep()">
-							<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
-							<span class="material-icons">chevron_right</span>
+						<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
+							<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
+								<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
+								<span class="material-icons">chevron_right</span>
+							</div>
 						</div>
-						<div *ngIf="!formGroup.get('descriptionTemplateId').value" mat-raised-button type="button" class="col-auto stepper-btn description-next next-disabled ml-auto">
-							<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
-							<span class="material-icons">chevron_right</span>
+						<div *ngIf="!formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
+							<div mat-raised-button type="button" class="stepper-btn description-next next-disabled ml-auto">
+								<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
+								<span class="material-icons">chevron_right</span>
+							</div>
+						</div>
+						<div  *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
+							<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
+								{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
+							</button>
 						</div>
-						<button [disabled]="saving" (click)="saveAndClose()" *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
-							{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
-						</button>
 					</div>
-					<div class="col-auto pr-0">
-						<app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDescriptionEditor]="true"></app-form-progress-indication>
+					<div class="row">
+						<div class="col-12">
+							<app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDescriptionEditor]="true"></app-form-progress-indication>
+						</div>
 					</div>
 				</div>
-				<div class="col-auto form" id="description-editor-form">
+				<div class="col-12 col-md form" id="description-editor-form">
 					<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
 					<app-description-form
 					*ngIf="formGroup && formGroup.get('properties')"
diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss b/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss
index 2391b8b1a..b08935d10 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss
+++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss
@@ -280,7 +280,7 @@
 	height: calc(100vh - 600px);
     overflow-y: auto;
     .main-info {
-      padding-left: .2rem;
+      // padding-left: .2rem;
       color: #21212194;
       font-weight: 400;
       cursor: pointer;
@@ -381,7 +381,7 @@
       // width: calc(100% - 366px);
 
       position: relative;
-      left: 362px;
+      // left: 362px;
       width: calc(100% - 366px);
       overflow-y: auto;
       height: calc(100vh - 218px);
diff --git a/dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss b/dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss
index 7dbc877af..8d6ea8a14 100644
--- a/dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss
+++ b/dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss
@@ -74,7 +74,7 @@ span {
 //   width: 100%;
 // }
 
-.internal-table{
-  max-width: 320px;
-  min-width: 320px;
-}
\ No newline at end of file
+// .internal-table{
+//   max-width: 320px;
+//   min-width: 320px;
+// }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
index 6dfbdd2c7..42c8a4757 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
@@ -114,7 +114,6 @@
 							</ol>
 						</div>
 					</div>
-					<!-- TODO -->
 					<div class="row justify-content-around" *ngIf="this.step !== 0">
 						<div class="col-auto mb-1">
 							<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
@@ -129,7 +128,6 @@
 							</div>
 						</div>
 					</div>
-					<!-- TODO -->
 					<div class="row"  *ngIf="this.step !== 0">
 						<div class="col-12">
 							<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>