From 871b89cdf5e0506842236b75947fd2df4747bb2f Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuval@y3xz.com>
Date: Sun, 28 Jun 2015 14:30:22 +0300
Subject: Smaller grid, spinner and final text

---
 client/button.js             |  1 +
 client/colors.less           | 42 ++++++++++++++++++++++++++++++++++--------
 client/effects.js            |  6 +++---
 client/templates/photos.html | 10 ++++++++--
 4 files changed, 46 insertions(+), 13 deletions(-)

(limited to 'client')

diff --git a/client/button.js b/client/button.js
index dd73e04..cdeed52 100644
--- a/client/button.js
+++ b/client/button.js
@@ -114,6 +114,7 @@ function animate2() {
   _.delay(function() {
     $('li#step7').removeClass('active');
     $('li#step8').addClass('active');
+    $('h2.title').html('Done!<div class="sec">This is your icon!</div>');
     $('div.final div.final-dominants').hide();
     $('div.final div.share').show();
   }, delay + 2000);
diff --git a/client/colors.less b/client/colors.less
index db27c37..583ae7b 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -141,14 +141,41 @@ body {
           }
         }
       }
+
       h2 {
         margin-top: 0px;
-        margin-bottom: 90px;
+        margin-bottom: 20px;
         color: #2636F9;
         font-size: 2.3em;
         font-weight: bold;
         text-align: center;
+        div.sec {
+          color: #333;
+        }
+      }
+
+      svg.spinner {
+        display: block;
+        margin: 0 auto;
+        margin-top: 20px;
+      }
+
+      .rect {
+        fill: none;
+        stroke-width: 8px;
+        stroke: #2636F9;
+        stroke-dasharray: 40;
+        stroke-dashoffset: 50%;
+
+        animation: movedash 1.5s forwards 0s infinite;
+      }
+
+      @keyframes movedash {
+        to {
+          stroke-dashoffset: 250%;
+        }
       }
+
       div.photos {
         display: -webkit-flex;
         display: flex;
@@ -160,20 +187,19 @@ body {
         margin: 0 auto;
         div.photo {
           margin: 3px 8px;
-          width: 54px;
-          height: 74px;
+          width: 72px;
+          height: 92px;
           div.title {
             color: #333;
-            font-size: 0.7em;
             text-align: center;
           }
           img {
-            height: 54px;
-            width: 54px;
+            height: 72px;
+            width: 72px;
           }
           canvas {
-            width: 54px;
-            height: 54px;
+            width: 72px;
+            height: 72px;
           }
         }
       }
diff --git a/client/effects.js b/client/effects.js
index 934eb76..ac10eb9 100644
--- a/client/effects.js
+++ b/client/effects.js
@@ -6,7 +6,7 @@ Effects = (function() {
 
     var raster = new paper.Raster('img-' + id);
     raster.visible = false;
-    var gridSize = 6;
+    var gridSize = 8;
     var gridDim = 9;
     var cols = [];
 
@@ -77,7 +77,7 @@ Effects = (function() {
     p.setup(canvas);
 
     // params
-    var gridSize = 6;
+    var gridSize = 8;
     var gridDim = 9;
 
     // fetch the new colors
@@ -150,7 +150,7 @@ Effects = (function() {
     p.setup(canvas);
 
     // params
-    var gridSize = 6;
+    var gridSize = 8;
     var gridDim = 9;
 
     var p1 = new paper.Color(palette[0][0] / 256, palette[0][1] / 256, palette[0][2] / 256);
diff --git a/client/templates/photos.html b/client/templates/photos.html
index e2a8b9e..fae6e20 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -5,7 +5,13 @@
         {{> step}}
       {{/each}}
     </ol>
-    <h2 class="title">Processing...</h2>
+    <h2 class="title">
+      Processing...
+      <svg class="spinner" width="20" height="20" viewbox="0 0 40 40">
+        <!-- <rect width="40" height="40" class="rect" />  <- this looks buggy in retina safari -->
+        <polygon points="0 0 0 40 40 40 40 0" class="rect" />
+      </svg>
+    </h2>
     <!-- <button class="pixelate btn btn-default">Pixelate</button>
     <button class="color btn btn-default">Color</button>
     <button class="average btn btn-default">Average</button> -->
@@ -36,7 +42,7 @@
         <h5>#AABBCC</h5>
       </div>
       <div class="share" style="display: none;">
-        <p>This is your icon! Now what...?</p>
+        <p>Now what...?</p>
         <button class="share-instagram">Share on Instagram</button>
         <button class="share-facebook">Share on Facebook</button>
         <button class="share-save">Save to gallery</button>
-- 
cgit v1.3.1