Fix "Prev"/"Next" button position when progress display is disabled.

hakimio · Dec 5, 2023 · 9fe340a · 9fe340a
1 parent 80cdcd9
commit 9fe340a
Show file tree

Hide file tree

Showing 18 changed files with 70 additions and 12 deletions.
diff --git a/projects/ngx-ui-tour-ionic/src/lib/tour-step-template/tour-step-template.component.html b/projects/ngx-ui-tour-ionic/src/lib/tour-step-template/tour-step-template.component.html
@@ -37,7 +37,10 @@
             [innerHTML]="step.content"
         ></ion-card-content>
 
-        <div class="footer">
+        <div
+            class="footer"
+            [class.no-progress]="!step.showProgress"
+        >
             <ion-button
                 fill="clear"
                 [disabled]="!tourService.hasPrev(step)"

diff --git a/projects/ngx-ui-tour-ionic/src/lib/tour-step-template/tour-step-template.component.scss b/projects/ngx-ui-tour-ionic/src/lib/tour-step-template/tour-step-template.component.scss
@@ -51,6 +51,10 @@ ion-button.close {
         white-space: nowrap;
     }
 
+    &.no-progress {
+        grid-template-columns: 1fr 1fr;
+    }
+
     ion-button {
         text-transform: capitalize;
     }

diff --git a/projects/ngx-ui-tour-md-menu/src/lib/tour-step-template/tour-step-template.component.html b/projects/ngx-ui-tour-md-menu/src/lib/tour-step-template/tour-step-template.component.html
@@ -34,7 +34,9 @@
             [innerHTML]="step.content"
         ></mat-card-content>
 
-        <mat-card-actions align="end">
+        <mat-card-actions
+            [class.no-progress]="!step.showProgress"
+        >
             <button
                 mat-button
                 class="prev"

diff --git a/projects/ngx-ui-tour-md-menu/src/lib/tour-step-template/tour-step-template.component.scss b/projects/ngx-ui-tour-md-menu/src/lib/tour-step-template/tour-step-template.component.scss
@@ -165,6 +165,10 @@ mat-card-actions {
         white-space: nowrap;
     }
 
+    &.no-progress {
+        grid-template-columns: 1fr 1fr;
+    }
+
     >* {
         max-width: fit-content;
 

diff --git a/...cts/ngx-ui-tour-ng-bootstrap/src/lib/tour-step-template/tour-step-template.component.html b/...cts/ngx-ui-tour-ng-bootstrap/src/lib/tour-step-template/tour-step-template.component.html
@@ -20,7 +20,10 @@ <h5>{{ step?.title }}</h5>
             class="card-text"
             [innerHTML]="step?.content"
         ></p>
-        <div class="buttons">
+        <div
+            class="buttons"
+            [class.no-progress]="!step.showProgress"
+        >
             <button
                 [disabled]="!tourService.hasPrev(step)"
                 class="btn btn-sm btn-outline-secondary prev"

diff --git a/...cts/ngx-ui-tour-ng-bootstrap/src/lib/tour-step-template/tour-step-template.component.scss b/...cts/ngx-ui-tour-ng-bootstrap/src/lib/tour-step-template/tour-step-template.component.scss
@@ -43,6 +43,10 @@
         white-space: nowrap;
     }
 
+    &.no-progress {
+        grid-template-columns: 1fr 1fr;
+    }
+
     .btn {
         display: flex;
         align-items: center;

diff --git a/...ts/ngx-ui-tour-ngx-bootstrap/src/lib/tour-step-template/tour-step-template.component.html b/...ts/ngx-ui-tour-ngx-bootstrap/src/lib/tour-step-template/tour-step-template.component.html
@@ -20,7 +20,10 @@ <h5>{{ step?.title }}</h5>
             class="card-text"
             [innerHTML]="step?.content"
         ></p>
-        <div class="buttons">
+        <div
+            class="buttons"
+            [class.no-progress]="!step.showProgress"
+        >
             <button
                 [disabled]="!tourService.hasPrev(step)"
                 class="btn btn-sm btn-outline-secondary prev"

diff --git a/...ts/ngx-ui-tour-ngx-bootstrap/src/lib/tour-step-template/tour-step-template.component.scss b/...ts/ngx-ui-tour-ngx-bootstrap/src/lib/tour-step-template/tour-step-template.component.scss
@@ -43,6 +43,10 @@
         white-space: nowrap;
     }
 
+    &.no-progress {
+        grid-template-columns: 1fr 1fr;
+    }
+
     .btn {
         display: flex;
         align-items: center;

diff --git a/...cts/ngx-ui-tour-tui-dropdown/src/lib/tour-step-template/tour-step-template.component.html b/...cts/ngx-ui-tour-tui-dropdown/src/lib/tour-step-template/tour-step-template.component.html
@@ -32,7 +32,10 @@ <h3>{{ step?.title }}</h3>
             class="content"
             [innerHTML]="step?.content"
         ></p>
-        <div class="buttons">
+        <div
+            class="buttons"
+            [class.no-progress]="!step.showProgress"
+        >
             <button
                 tuiButton
                 type="button"

diff --git a/...cts/ngx-ui-tour-tui-dropdown/src/lib/tour-step-template/tour-step-template.component.scss b/...cts/ngx-ui-tour-tui-dropdown/src/lib/tour-step-template/tour-step-template.component.scss
@@ -55,6 +55,10 @@
         white-space: nowrap;
     }
 
+    &.no-progress {
+        grid-template-columns: 1fr 1fr;
+    }
+
     ::ng-deep button.prev .t-wrapper {
         padding-left: 1rem;
     }

diff --git a/projects/ngx-ui-tour-tui-hint/src/lib/tour-step-template/tour-step-template.component.html b/projects/ngx-ui-tour-tui-hint/src/lib/tour-step-template/tour-step-template.component.html
@@ -31,7 +31,10 @@ <h3>{{ step?.title }}</h3>
             class="content"
             [innerHTML]="step?.content"
         ></p>
-        <div class="buttons">
+        <div
+            class="buttons"
+            [class.no-progress]="!step.showProgress"
+        >
             <button
                 tuiButton
                 type="button"

diff --git a/projects/ngx-ui-tour-tui-hint/src/lib/tour-step-template/tour-step-template.component.scss b/projects/ngx-ui-tour-tui-hint/src/lib/tour-step-template/tour-step-template.component.scss
@@ -48,6 +48,10 @@
         white-space: nowrap;
     }
 
+    &.no-progress {
+        grid-template-columns: 1fr 1fr;
+    }
+
     ::ng-deep button.prev .t-wrapper {
         padding-left: 1rem;
     }

diff --git a/src/app/ion-popover/examples/default-template.txt b/src/app/ion-popover/examples/default-template.txt
@@ -17,7 +17,10 @@
                 [innerHTML]="step.content"
             ></ion-card-content>
 
-            <div class="footer">
+            <div
+                class="footer"
+                [class.no-progress]="!step.showProgress"
+            >
                 <ion-button
                     fill="clear"
                     [disabled]="!tourService.hasPrev(step)"

diff --git a/src/app/md-menu/examples/default-template.txt b/src/app/md-menu/examples/default-template.txt
@@ -26,7 +26,9 @@
                 [innerHTML]="step.content"
             ></mat-card-content>
 
-            <mat-card-actions align="end">
+            <mat-card-actions
+                [class.no-progress]="!step.showProgress"
+            >
                 <button
                     mat-button
                     class="prev"

diff --git a/src/app/ng-bootstrap/examples/default-template.txt b/src/app/ng-bootstrap/examples/default-template.txt
@@ -21,7 +21,10 @@
                 class="card-text"
                 [innerHTML]="step?.content"
             ></p>
-            <div class="buttons">
+            <div
+                class="buttons"
+                [class.no-progress]="!step.showProgress"
+            >
                 <button
                     [disabled]="!tourService.hasPrev(step)"
                     class="btn btn-sm btn-outline-secondary prev"

diff --git a/src/app/ngx-bootstrap/examples/default-template.txt b/src/app/ngx-bootstrap/examples/default-template.txt
@@ -21,7 +21,10 @@
                 class="card-text"
                 [innerHTML]="step?.content"
             ></p>
-            <div class="buttons">
+            <div
+                class="buttons"
+                [class.no-progress]="!step.showProgress"
+            >
                 <button
                     [disabled]="!tourService.hasPrev(step)"
                     class="btn btn-sm btn-outline-secondary prev"

diff --git a/src/app/tui-dropdown/examples/default-template.txt b/src/app/tui-dropdown/examples/default-template.txt
@@ -21,7 +21,10 @@
                 class="content"
                 [innerHTML]="step?.content"
             ></p>
-            <div class="buttons">
+            <div
+                class="buttons"
+                [class.no-progress]="!step.showProgress"
+            >
                 <button
                     tuiButton
                     type="button"

diff --git a/src/app/tui-hint/examples/default-template.txt b/src/app/tui-hint/examples/default-template.txt
@@ -20,7 +20,10 @@
                 class="content"
                 [innerHTML]="step?.content"
             ></p>
-            <div class="buttons">
+            <div
+                class="buttons"
+                [class.no-progress]="!step.showProgress"
+            >
                 <button
                     tuiButton
                     type="button"