Add steps breadcrumbs

3 files changed, 37 insertions, 10 deletions

diff --git a/client/button.js b/client/button.js
index 4a9906a..5e1020f 100644
--- a/client/button.js
+++ b/client/button.js
@@ -2,6 +2,7 @@ function animate() {
   var delay = 0;
 
   // load
+  $('li#step1').addClass('active');
   var photos = $('div.photo');
   photos.each(function(i) {
     var self = this;
@@ -14,7 +15,8 @@ function animate() {
 
   // pixelate
   _.delay(function () {
-    $('h4.step').text('(Step 2)');
+    $('li#step1').removeClass('active');
+    $('li#step2').addClass('active');
     _.each(Session.get('photos'), function(x, i) {
       _.delay(function() {
         $('#img-'+x.id).hide()
@@ -29,7 +31,8 @@ function animate() {
 
   // colorize
   _.delay(function() {
-    $('h4.step').text('(Step 3)');
+    $('li#step2').removeClass('active');
+    $('li#step3').addClass('active');
     _.each(Session.get('photos'), function(x, i) {
       _.delay(function () {
         $('#img-'+x.id).hide()
@@ -43,7 +46,8 @@ function animate() {
   delay += 2000;
 
   _.delay(function() {
-    $('h4.step').text('(Step 4)');
+    $('li#step3').removeClass('active');
+    $('li#step4').addClass('active');
     $('div.photos').hide();
 
     var palette = Effects.average();
@@ -81,7 +85,8 @@ function animate() {
   delay += 2000;
 
   _.delay(function() {
-    $('h4.step').text('(Step 5)');
+    $('li#step4').removeClass('active');
+    $('li#step5').addClass('active');
     $('div.photos').hide();
     $('div.final').show()
 
@@ -162,6 +167,9 @@ Template.photos.events({
 })
 
 Template.photos.helpers({
+  steps: function () {
+    return _.range(1,9);
+  },
   photos: function () {
     return Session.get('photos');
   }
diff --git a/client/colors.less b/client/colors.less
index 4cc07cf..b78dba8 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -124,11 +124,22 @@ body {
       }
     }
     div.photos-wrapper {
-      h4 {
-        color: #2636F9;
-        font-size: 1em;
-        text-align: center;
-        margin-bottom: 0px;
+      ol.steps {
+        display: flex;
+        justify-content: center;
+        list-style: none;
+        padding-left: 0px;
+        margin-top: 25px;
+        margin-bottom: 45px;
+        li.step {
+          flex: 0 0 auto;
+          display: inline;
+          padding-right: 40px;
+          color: #999;
+          &.active {
+            color: #333;
+          }
+        }
       }
       h2 {
         margin-top: 0px;
diff --git a/client/templates/photos.html b/client/templates/photos.html
index d5a1286..ac290b0 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -1,6 +1,10 @@
 <template name="photos">
   <div class="photos-wrapper">
-    <h4 class="step">(Step 1)</h4>
+    <ol class="steps">
+      {{#each steps}}
+        {{> step}}
+      {{/each}}
+    </ol>
     <h2 class="title">Processing...</h2>
     <!-- <button class="pixelate btn btn-default">Pixelate</button>
     <button class="color btn btn-default">Color</button>
@@ -29,6 +33,10 @@
   </div>
 </template>
 
+<template name="step">
+  <li id="step{{this}}" class="step">Step {{this}}</li>
+</template>
+
 <template name="photo">
   <div class="photo" style="display: none;">
     <div class="title">{{date}}</div>