From 64f163256a55a6444f0c3d8313998ec3fa34a8a0 Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuval@y3xz.com>
Date: Wed, 15 Jul 2015 23:09:35 +0300
Subject: Final Flickering Fix™
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/button.js             |  7 ++++---
 client/colors.less           | 12 ++++++++----
 client/effects.js            |  2 --
 client/templates/photos.html |  2 +-
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/client/button.js b/client/button.js
index 62f2a91..9bcc542 100644
--- a/client/button.js
+++ b/client/button.js
@@ -63,9 +63,11 @@ function animate() {
     $('li#step2').addClass('active');
     _.each(Session.get('photos'), function(x, i) {
       _.delay(function() {
-        Effects.pixelate(x.id);
-        $('#img-'+x.id).hide();
         $('#canvas-'+x.id).show();
+        Effects.pixelate(x.id);
+        _.delay(function () {
+          $('#img-'+x.id).hide();
+        }, 100);
       }, 400 * i);
     });
   }, delay + 2000);
@@ -80,7 +82,6 @@ function animate() {
     _.each(Session.get('photos'), function(x, i) {
       _.delay(function () {
         Effects.colorize(x.id);
-        $('#img-'+x.id).hide();
         $('#canvas-'+x.id).show();
       }, 400 * i);
     });
diff --git a/client/colors.less b/client/colors.less
index 2c70c28..4256865 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -209,15 +209,19 @@ body {
           margin: 3px 8px;
           width: 153px;
           height: 173px;
-          img {
-            height: 153px;
-            width: 153px;
-          }
           canvas {
+            position: absolute;
             width: 153px;
             height: 153px;
           }
+          img {
+            position: absolute;
+            height: 153px;
+            width: 153px;
+          }
           div.title {
+            position: relative;
+            margin-top: 153px;
             color: #999;
             text-align: center;
             font-family: 'Cutive Mono', serif;
diff --git a/client/effects.js b/client/effects.js
index afa744f..7b5f9a5 100644
--- a/client/effects.js
+++ b/client/effects.js
@@ -84,8 +84,6 @@ Effects = (function() {
       Session.set(id + ':colors', cols);
       Session.set(id + ':palette', valued_centroids);
       Session.set(id + ':newcolors', newcols);
-
-      canvas.style.position = 'static';
     });
   }
 
diff --git a/client/templates/photos.html b/client/templates/photos.html
index 1031464..fa11543 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -65,8 +65,8 @@
 
 <template name="photo">
   <div class="photo" style="display: none;">
+    <canvas id="canvas-{{id}}" style="position: absolute; height: 153px; width: 153px;"></canvas>
     <img id="img-{{id}}" class="instagram-photo" src="{{proxy images.thumbnail.url}}" crossorigin="anonymous">
-    <canvas id="canvas-{{id}}" style="position: absolute; left: -9999px; height: 150px; width: 150px;"></canvas>
     <div class="title">{{date}}</div>
   </div>
 </template>
-- 
cgit v1.3.1