Skip to content

Commit

Permalink
Fixes the bug: Onboarding content is not visible on small height screens
Browse files Browse the repository at this point in the history
  • Loading branch information
Nicola Lanzilotto committed Nov 15, 2024
1 parent 10fbce0 commit 470e472
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 26 deletions.
4 changes: 2 additions & 2 deletions ...p/create-new-project/cnp-select-templates-or-kb/cnp-select-templates-or-kb.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()">
Expand All @@ -214,6 +214,6 @@ <h4 class="select-templates-or-kb-description" [ngClass]="{'onboarding-templt-p
</button>
</div>
</div>
</div> -->
</div>
</div>
8 changes: 2 additions & 6 deletions src/app/create-new-project/cnp-templates/cnp-templates.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; ">
Expand All @@ -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> -->
30 changes: 27 additions & 3 deletions src/app/create-new-project/onboarding-content/onboarding-content.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand All @@ -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}">
Expand Down Expand Up @@ -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}"
Expand All @@ -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 -->
Expand Down Expand Up @@ -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>
Expand Down
42 changes: 27 additions & 15 deletions src/app/create-new-project/onboarding-content/onboarding-content.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -263,24 +262,32 @@ $color-pro-plan: #3ea9f5;
// min-height: calc(100% - 60px);
opacity: 1;



&.hidden {
opacity: 0;
}
}

/** 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;
Expand All @@ -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;
Expand All @@ -324,6 +331,11 @@ $color-pro-plan: #3ea9f5;
}
}

.onbording-btn-back-text {
margin-left: 6px !important;
font-weight: 400;
}

.hide-prev-btn {
display: none;
}
Expand Down

0 comments on commit 470e472

Please sign in to comment.