Step 4 continue button impl

3 files changed, 29 insertions, 5 deletions

diff --git a/client/button.js b/client/button.js
index 8dd7db7..84e201b 100644
--- a/client/button.js
+++ b/client/button.js
@@ -68,8 +68,11 @@ function animate() {
 
     $('div.dominants').show();
   }, delay + 2000);
+}
 
-  delay += 2000;
+function animate2() {
+  var delay = 0;
+  var photos = $('div.photo');
 
   _.delay(function() {
     $('li#step4').removeClass('active');
@@ -165,6 +168,10 @@ Template.photos.events({
   },
   'click button.average': function (event) {
     Effects.average();
+  },
+  'click button.continue': function (event) {
+    animate2();
+    return false;
   }
 })
 
@@ -183,7 +190,7 @@ Template.photo.helpers({
     return d.getDate() + '-' + (d.getMonth() + 1) + '-' + d.getFullYear();
   },
   proxy: function (url) {
-    return url.replace('https://scontent.cdninstagram.com', '/imgproxy?url=')
+    return url.replace('https://scontent.cdninstagram.com', '/imgproxy?url=');
   }
 })
 
diff --git a/client/colors.less b/client/colors.less
index 69e0713..6c9c5f1 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -155,6 +155,7 @@ body {
         justify-content: left;
         -webkit-flex-wrap: wrap;
         flex-wrap: wrap;
+        max-width: 700px;
         div.photo {
           margin: 3px 8px;
           width: 54px;
@@ -176,21 +177,36 @@ body {
       }
       div.dominants {
         margin: 0 auto;
-        width: 400px;
+        width: 305px;
         div.dominant {
-          text-align: left;
+          text-align: center;
           flex: 0 0 auto;
+          margin-top: 45px;
           h3 {
             color: #2636F9;
+            font-size: 1.2em;
           }
           div.color {
             background-color: red;
-            height: 72px;
+            height: 50px;
           }
           h5 {
             color: #808080;
           }
         }
+        button.continue {
+          font-size: 1.2em;
+          width: 100%;
+          margin-top: 45px;
+          color: #2636F9;
+          padding: 7px 35px;
+          background-color: white;
+          border: 1px #2636F9 solid;
+          &:hover, &:active {
+            color: white;
+            background-color: #2636F9;
+          }
+        }
       }
       div.final {
         text-align: center;
diff --git a/client/templates/photos.html b/client/templates/photos.html
index ac290b0..a7ab636 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -25,6 +25,7 @@
         <div id="dominant2" class="color"></div>
         <h5>#AABBCC</h5>
       </div>
+      <button class="continue">Continue</button>
     </div>
     <div class="final" style="display: none">
       <canvas id="canvas-final" style="height: 315px; width: 315px;"></canvas>