diff options
| -rw-r--r-- | client/button.js | 16 | ||||
| -rw-r--r-- | client/colors.less | 21 | ||||
| -rw-r--r-- | client/templates/photos.html | 10 |
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> |