From 34f471fb3049e425aac18b0d9a3a117e7cf2b004 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Thu, 23 May 2024 10:52:13 +0300
Subject: [PATCH] styling fixes

---
 .../editor/description-editor.component.html  | 61 ++++++++++---------
 .../form-progress-indication.component.scss   | 23 +++----
 .../dmp-editor.component.html                 | 39 ++++++------
 ...mp-form-progress-indication.component.scss | 23 +++----
 4 files changed, 69 insertions(+), 77 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 38a05e43c..afa30d265 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
@@ -77,7 +77,7 @@
 				</div>
 			</div>
 			<div class="row editor-content">
-				<div class="col-12 col-md-3 pr-md-0">
+				<div style="width: 22em;" class="d-flex flex-column">
 					<div class="stepper-back row">
 						<div class="col-auto d-flex align-items-center back-to-dmp" (click)="backToDmp(this.formGroup.get('dmpId').value)">
 							<mat-icon class="back-icon pointer">chevron_left</mat-icon>
@@ -106,35 +106,40 @@
 							</div>
 						</div>
 					</div>
-					<div class="row mt-3 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" 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" 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>
-					</div>
-					<div class="row">
+					<div class="row mb-4">
 						<div class="col-12">
-							<app-form-progress-indication class="mt-2" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [checkVisibility]="true"></app-form-progress-indication>
+							<div class="row mt-3 stepper-actions justify-content-center">
+								<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" 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" 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>
+							</div>
+							<div class="row mb-4 mt-4">
+								<div class="col-12">
+									<app-form-progress-indication class="mt-2" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [checkVisibility]="true"></app-form-progress-indication>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss b/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
index fc7497a0f..ef44b4af5 100644
--- a/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
+++ b/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
@@ -1,23 +1,14 @@
-// .percentage {
-// 	color: #212121;
-// 	opacity: 0.7;
-// 	font-weight: 400;
-// 	font-size: 0.875rem;
-// }
-
-// .progress-bar {
-// 	border-radius: 20px;
-// 	height: 11px;
-
-// }
-
-// ::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
-// 	border-radius: 20px !important;
-// }
+.percentage {
+	color: #212121;
+	opacity: 0.7;
+	font-weight: 400;
+	font-size: 0.875rem;
+}
 
 // Bar container
 .progress-bar {
 	--mdc-linear-progress-active-indicator-height: 11px !important;
+	height: 11px;
 	border-radius: 20px;
 }
 
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 e0e4f293c..6da89be36 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
@@ -79,7 +79,7 @@
 
 			<div class="row">
 				<!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> -->
-				<div class="col-12 col-md-3 pr-md-0" *ngIf="this.step != 0">
+				<div *ngIf="this.step != 0" style="width: 22em;" class="d-flex flex-column justify-content-center">
 					<div class="row stepper-title">
 						<div class="col-12 pl-0 mb-1">
 							<span class="font-weight-bold">{{'DMP-EDITOR.TITLE' | translate}}</span>
@@ -120,23 +120,28 @@
 							</ol>
 						</div>
 					</div>
-					<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()">
-								<span class="material-icons">chevron_left</span>
-								<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
-							</div>
-						</div>
-						<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
-							<div mat-raised-button type="button" class="stepper-btn" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
-								<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
-								<span class="material-icons">chevron_right</span>
-							</div>
-						</div>
-					</div>
-					<div class="row"  *ngIf="this.step !== 0">
+
+					<div class="row mt-auto">
 						<div class="col-12">
-							<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
+							<div class="row justify-content-center" *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()">
+										<span class="material-icons">chevron_left</span>
+										<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
+									</div>
+								</div>
+								<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
+									<div mat-raised-button type="button" class="stepper-btn" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
+										<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
+										<span class="material-icons">chevron_right</span>
+									</div>
+								</div>
+							</div>
+							<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>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/form-progress-indication/dmp-form-progress-indication.component.scss b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/form-progress-indication/dmp-form-progress-indication.component.scss
index fafe43a95..2a203a6dd 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/form-progress-indication/dmp-form-progress-indication.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/form-progress-indication/dmp-form-progress-indication.component.scss
@@ -1,24 +1,15 @@
-// .percentage {
-// 	color: #212121;
-// 	opacity: 0.7;
-// 	font-weight: 400;
-// 	font-size: 0.875rem;
-// }
-
-// .progress-bar {
-// 	border-radius: 20px;
-// 	height: 11px;
-
-// }
-
-// ::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
-// 	border-radius: 20px !important;
-// }
+.percentage {
+	color: #212121;
+	opacity: 0.7;
+	font-weight: 400;
+	font-size: 0.875rem;
+}
 
 
 // Bar container
 .progress-bar {
 	--mdc-linear-progress-active-indicator-height: 11px !important;
+	height: 11px;
 	border-radius: 20px;
 }