From f4f1569e0c88a2c8be4027c6f79b49af0307b8f4 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 20 Sep 2016 14:04:18 -0400
Subject: [PATCH] Move step text into progress bar

---
 .../wizard/components/wizard-step.js.es6      |  9 ++--
 .../templates/components/wizard-step.hbs      |  9 ++--
 app/assets/stylesheets/wizard.scss            | 52 +++++++++++++------
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/wizard/components/wizard-step.js.es6 b/app/assets/javascripts/wizard/components/wizard-step.js.es6
index 5930ffe6a77..d49a69c5f8f 100644
--- a/app/assets/javascripts/wizard/components/wizard-step.js.es6
+++ b/app/assets/javascripts/wizard/components/wizard-step.js.es6
@@ -52,10 +52,13 @@ export default Ember.Component.extend({
     }
   },
 
-  @computed('step.displayIndex', 'wizard.totalSteps')
+  @computed('step.index', 'wizard.totalSteps')
   barStyle(displayIndex, totalSteps) {
-    const ratio = parseFloat(displayIndex) / parseFloat(totalSteps) * 100;
-    return Ember.String.htmlSafe(`width: ${ratio}%`);
+    let ratio = parseFloat(displayIndex) / parseFloat(totalSteps - 1);
+    if (ratio < 0) { ratio = 0; }
+    if (ratio > 1) { ratio = 1; }
+
+    return Ember.String.htmlSafe(`width: ${ratio * 200}px`);
   },
 
   autoFocus() {
diff --git a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
index ada0018f0b1..0395db92680 100644
--- a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
+++ b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
@@ -20,11 +20,12 @@
 </div>
 
 <div class='wizard-step-footer'>
+
   <div class='wizard-progress'>
-    <div class='text'>{{bound-i18n "wizard.step" current=step.displayIndex total=wizard.totalSteps}}</div>
-    <div class='bar-container'>
-      <div class='bar-contents' style={{barStyle}}></div>
-    </div>
+    <div class='white'></div>
+    <div class='black' style={{barStyle}}></div>
+    <div class='screen'></div>
+    <span>{{bound-i18n "wizard.step" current=step.displayIndex total=wizard.totalSteps}}</span>
   </div>
 
   <div class='wizard-buttons'>
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 37c882dd15f..ad00a37d630 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -62,7 +62,7 @@ body.wizard {
   border: 1px solid #ccc;
 
   .wizard-step-contents {
-    min-height: 480px;
+    min-height: 510px;
   }
 
   .wizard-column-contents {
@@ -90,21 +90,43 @@ body.wizard {
   }
 
   .wizard-progress {
-    .text {
-      font-size: 0.8em;
-    }
-    .bar-container {
-      border: 1px solid #ff6600;
-      border-radius: 3px;
-      height: 0.5em;
-      width: 15em;
+    border: 1px solid #ff6600;
+    border-radius: 3px;
+    width: 200px;
+    height: 1.4em;
 
-      .bar-contents {
-        background-color: #ff6600;
-        width: 0;
-        height: 0.5em;
-        transition: width .3s;
-      }
+    div {
+      position: absolute;
+      height: 1.4em;
+    }
+
+    .white {
+      background: white;
+      width: 200px;
+      z-index: 11;
+    }
+
+    .black {
+      background: black;
+      transition: width .3s;
+      z-index: 12;
+    }
+
+    span {
+      position: absolute;
+      font-size: 15px;
+      mix-blend-mode: difference;
+      color: white;
+      z-index: 13;
+      font-size: 0.8em;
+      left: 2em;
+    }
+
+    .screen {
+      background-color: #ff6600;
+      mix-blend-mode: screen;
+      width: 200px;
+      z-index: 14;
     }
   }