From 470e472820a5ef662528511a5c0952927e4ae2c1 Mon Sep 17 00:00:00 2001
From: Nicola Lanzilotto <nicola@tiledesk.com>
Date: Fri, 15 Nov 2024 12:29:51 +0100
Subject: [PATCH] Fixes the bug: Onboarding content is not visible on small
 height screens

---
 .../cnp-select-templates-or-kb.component.html |  4 +-
 .../cnp-templates.component.html              |  8 +---
 .../onboarding-content.component.html         | 30 +++++++++++--
 .../onboarding-content.component.scss         | 42 ++++++++++++-------
 4 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/src/app/create-new-project/cnp-select-templates-or-kb/cnp-select-templates-or-kb.component.html b/src/app/create-new-project/cnp-select-templates-or-kb/cnp-select-templates-or-kb.component.html
index ed0d894ceaa4..003bcecd23c6 100644
--- a/src/app/create-new-project/cnp-select-templates-or-kb/cnp-select-templates-or-kb.component.html
+++ b/src/app/create-new-project/cnp-select-templates-or-kb/cnp-select-templates-or-kb.component.html
@@ -199,7 +199,7 @@ <h4 class="select-templates-or-kb-description"  [ngClass]="{'onboarding-templt-p
 
 
 
-        <div class="row--navigation" style="padding-bottom: 20px;">
+        <!-- <div class="row--navigation" style="padding-bottom: 20px;">
             <div class="navigation--btn">
 
                 <button type="button" class="btn-back" (click)="goToPrevPage()">
@@ -214,6 +214,6 @@ <h4 class="select-templates-or-kb-description"  [ngClass]="{'onboarding-templt-p
                 </button>
 
             </div>
-        </div>
+        </div> -->
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/create-new-project/cnp-templates/cnp-templates.component.html b/src/app/create-new-project/cnp-templates/cnp-templates.component.html
index 1494c2e120d8..ce3c3d6d8468 100644
--- a/src/app/create-new-project/cnp-templates/cnp-templates.component.html
+++ b/src/app/create-new-project/cnp-templates/cnp-templates.component.html
@@ -216,7 +216,7 @@ <h2 class="onboarding-templt-page-title" [ngClass]="{'onboarding-templt-page-tit
 </div>
 
 
-<div class="row--navigation" style="padding-bottom: 61px;">
+<!-- <div class="row--navigation" style="padding-bottom: 61px;">
     <div class="navigation--btn">
 
         <button type="button" class="btn-back" (click)="goToPrevPage()" style="width: unset; max-width: unset; ">
@@ -230,9 +230,5 @@ <h2 class="onboarding-templt-page-title" [ngClass]="{'onboarding-templt-page-tit
             </span>
         </button>
 
-        <!-- <button class="btn btn-lg btn-primary" (click)="goToNextPage()">
-            {{'OnboardPage.Next' | translate}}
-        </button> -->
-
     </div>
-</div>
+</div> -->
diff --git a/src/app/create-new-project/onboarding-content/onboarding-content.component.html b/src/app/create-new-project/onboarding-content/onboarding-content.component.html
index 12d1cc5c2a66..0c061f818dc6 100644
--- a/src/app/create-new-project/onboarding-content/onboarding-content.component.html
+++ b/src/app/create-new-project/onboarding-content/onboarding-content.component.html
@@ -25,7 +25,7 @@
         </div>
         <!-- STEP NUMBER  arrayOfSteps.length >= activeTypeStepNumber ||  -->
 
-        <div *ngIf="arrayOfSteps.length>0 && arrayOfSteps.length>activeTypeStepNumber" class="box-steps">
+        <div *ngIf="arrayOfSteps.length>1 && arrayOfSteps.length>activeTypeStepNumber" class="box-steps">
             <div class="step-number">
                 <span class="number-label">
                     {{ "OnboardPage.Pass" | translate }}
@@ -48,6 +48,7 @@
    
     <!-- <div *ngIf="!showSpinner" class="col-left" [ngClass]="{'col-left-full-width': arrayOfSteps[activeTypeStepNumber] === typeStep.TEMPLATES_INSTALLATION}"> -->
     <div *ngIf="!showSpinner" class="col-left" [ngClass]="{'col-left-full-width': arrayOfSteps[activeTypeStepNumber] === typeStep.SELECT_TEMPLATE_OR_KB || arrayOfSteps[activeTypeStepNumber] === typeStep.TEMPLATES_INSTALLATION}">
+        <!-- arrayOfSteps {{ arrayOfSteps }} arrayOfSteps length {{ arrayOfSteps.length}} -->
         <div *ngFor="let nameStep of arrayOfSteps; index as i" 
             class="step-page"
             [ngClass]="{'hidden': DISPLAY_SPINNER_SECTION}">
@@ -108,7 +109,7 @@
                 <!-- </div> -->
 
                 <!-- BUTTONS -->
-                <div class="row-navigation">
+                <!-- <div class="row-navigation">
                     <div class="navigation-btn">
                         <button type="button" class="btn-back" 
                             [ngClass]="{'hide-prev-btn': DISABLED_PREV_BUTTON}"
@@ -122,8 +123,29 @@
                             {{'OnboardPage.Next' | translate}}
                         </button>
                     </div>
-                </div>
+                </div> -->
+
+            </div>
 
+            <!-- BUTTONS -->
+            <div class="row-navigation" *ngIf="nameStep !== typeStep.NAME_PROJECT"
+            [ngClass]="{'row-navigation-full-width': arrayOfSteps[activeTypeStepNumber] === typeStep.SELECT_TEMPLATE_OR_KB || arrayOfSteps[activeTypeStepNumber] === typeStep.TEMPLATES_INSTALLATION}">
+                <div class="navigation-btn">
+                    <button type="button" class="btn-back" 
+                        [ngClass]="{'hide-prev-btn': DISABLED_PREV_BUTTON}"
+                        [disabled]="DISABLED_PREV_BUTTON"
+                        (click)="goToPrevCustomStep()">
+                        <em class="material-icons">arrow_back</em>
+                        <span class="onbording-btn-back-text"> 
+                            {{'Back' | translate }}
+                        </span>
+                    </button>
+                    <button class="btn btn-lg btn-primary" *ngIf="arrayOfSteps[activeTypeStepNumber]!==typeStep.TEMPLATES_INSTALLATION"
+                        [disabled]="DISABLED_NEXT_BUTTON"
+                        (click)="goToNextCustomStep()">
+                        {{'OnboardPage.Next' | translate}}
+                    </button>
+                </div>
             </div>
 
             <!-- SELECT TEMPLATES / KB -->
@@ -220,6 +242,8 @@
     </div>
 
 
+
+
     <!-- <div class="col-right" *ngIf="arrayOfSteps[activeTypeStepNumber]!==typeStep.TEMPLATES_INSTALLATION"> -->
     <div class="col-right" *ngIf="arrayOfSteps[activeTypeStepNumber]!==typeStep.SELECT_TEMPLATE_OR_KB && arrayOfSteps[activeTypeStepNumber]!==typeStep.TEMPLATES_INSTALLATION">
         <appdashboard-sidebar-claims></appdashboard-sidebar-claims>
diff --git a/src/app/create-new-project/onboarding-content/onboarding-content.component.scss b/src/app/create-new-project/onboarding-content/onboarding-content.component.scss
index a27d8f4f3dba..492c0128c9ef 100644
--- a/src/app/create-new-project/onboarding-content/onboarding-content.component.scss
+++ b/src/app/create-new-project/onboarding-content/onboarding-content.component.scss
@@ -46,7 +46,7 @@ $color-pro-plan: #3ea9f5;
     display: none;
 
     &.active {
-        min-height: calc(100vh - 150px);
+        // min-height: calc(100vh - 150px); // nk commented
         display: block;
     }
 
@@ -111,19 +111,18 @@ $color-pro-plan: #3ea9f5;
 
 
 .col-left {
-    min-height: 100vh;
-    // max-height: 100vh;
-    height: auto;
+    // min-height: 100vh; // nk commented
+    // height: auto; // nk commented
     background: white;
     width: calc(100% - var(--width-col-rigth));
     position: relative;
     float: left;
-    padding: 100px 40px 40px;
+    // padding: 100px 40px 40px; // nk commented
+    padding: 95px 46px 75px;
     z-index: 20;
-    // width: 100%;
-    // max-height: calc(100vh - 1px);
-    // overflow: initial;
-    // background: bisque;
+    height: calc(100vh - 75px); // nk
+    overflow-y: auto; // nk
+   
 }
 
 .on-bording-spinner {
@@ -263,6 +262,8 @@ $color-pro-plan: #3ea9f5;
     // min-height: calc(100% - 60px);
     opacity: 1;
 
+  
+
     &.hidden {
         opacity: 0;
     }
@@ -270,17 +271,23 @@ $color-pro-plan: #3ea9f5;
 
 /** NAVIGATION **/
 .row-navigation {
-    // position: relative;
-    position: absolute;
+    // position: absolute; // nk commented
+    position: fixed; // nk
+    width: calc(100% - var(--width-col-rigth)); // nk
     bottom: 0;
     left: 0;
-    width: 100%;
-    z-index: 0;
+    // width: 100%; // nk commented
+    // z-index: 0; // nk commented
+    z-index: 1;
     bottom: 0;
     padding: 0px;
     background-color: #fff;
 }
 
+.row-navigation-full-width {
+    width: 100%;
+}
+
 .navigation-btn {
     display: flex;
     flex-direction: row;
@@ -301,8 +308,8 @@ $color-pro-plan: #3ea9f5;
     justify-content: center;
     vertical-align: middle;
     height: auto;
-    width: 50px;
-    max-width: 50px;
+    // width: 50px;
+    // max-width: 50px;
     font-size: 20px;
     line-height: 1.2;
     border-color: $color-light-gray;
@@ -324,6 +331,11 @@ $color-pro-plan: #3ea9f5;
     }
 }
 
+.onbording-btn-back-text {
+    margin-left: 6px !important;
+    font-weight: 400;
+}
+
 .hide-prev-btn {
     display: none;
 }