UX: moves wizard's "Finish" button to the left of back and next (#7027)

UX: moves wizard’s “Finish” button to the left of back and next (#7027)

This was done to avoid clicking finish when clicking fast on next.

diff --git a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
index 9e066f9..beb8219 100644
--- a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
+++ b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
@@ -32,6 +32,12 @@
       <a href {{action "quit"}} class='action-link quit' tabindex="11">{{i18n "wizard.quit"}}</a>
     {{/if}}
 
+    {{#if showFinishButton}}
+      <button class='wizard-btn finish' {{action "exitEarly"}} disabled={{saving}} tabindex="10">
+        {{i18n "wizard.finish"}}
+      </button>
+    {{/if}}
+
     {{#if showBackButton}}
       <a href {{action "backStep"}} class='action-link back' tabindex="11">{{i18n "wizard.back"}}</a>
     {{/if}}
@@ -43,12 +49,6 @@
       </button>
     {{/if}}
 
-    {{#if showFinishButton}}
-      <button class='wizard-btn finish' {{action "exitEarly"}} disabled={{saving}} tabindex="10">
-        {{i18n "wizard.finish"}}
-      </button>
-    {{/if}}
-
     {{#if showDoneButton}}
       <button class='wizard-btn done' {{action "quit"}} disabled={{saving}} tabindex="10">
         {{i18n "wizard.done"}}
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index d503285..6496345 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -113,6 +113,7 @@ body.wizard {
 }
 
 .wizard-step-colors {
+  max-height: 465px;
   margin-bottom: 20px;
   overflow-y: auto;
   .grid {
@@ -171,7 +172,7 @@ body.wizard {
   border: 1px solid #ccc;
 
   .wizard-step-contents {
-    min-height: 510px;
+    height: 550px;
   }
 
   .wizard-column-contents {
@@ -544,7 +545,7 @@ body.wizard {
     max-height: none;
   }
   .wizard-step-contents {
-    min-height: auto !important;
+    height: auto !important;
   }
   .wizard-step-banner {
     width: 100% !important;

GitHub sha: 0616837a

1 Like

This commit has been mentioned on Discourse Meta. There might be relevant details there: