From be4103f6cdebfb7b7b04270c20d6c91eeb61a4f3 Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuval@y3xz.com>
Date: Fri, 12 Jun 2015 00:14:38 +0300
Subject: Photos page design

---
 client/button.js             |  7 +++++++
 client/colors.less           | 35 +++++++++++++++++++++++++++++++++++
 client/templates/photos.html | 29 +++++++++++++++++++++++------
 3 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/client/button.js b/client/button.js
index 293c715..0d72f7a 100644
--- a/client/button.js
+++ b/client/button.js
@@ -54,6 +54,13 @@ Template.photos.helpers({
   }
 })
 
+Template.photo.helpers({
+  date: function () {
+    var d = new Date(parseInt(this.created_time) * 1000);
+    return d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear();
+  }
+})
+
 Accounts.onLogin(function() {
   Router.go('dates');
 });
diff --git a/client/colors.less b/client/colors.less
index 39a95eb..eb77db9 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -87,5 +87,40 @@ body {
         }
       }
     }
+    div.photos-wrapper {
+      h4 {
+        color: #2636F9;
+        font-size: 1em;
+        text-align: center;
+        margin-bottom: 0px;
+      }
+      h2 {
+        margin-top: 0px;
+        color: #2636F9;
+        font-size: 2.3em;
+        font-weight: bold;
+        text-align: center;
+      }
+      div.photos {
+        display: -webkit-flex;
+        display: flex;
+        -webkit-justify-content: center;
+        justify-content: center;
+        -webkit-flex-wrap: wrap;
+        flex-wrap: wrap;
+        div.photo {
+          margin: 3px 8px;
+          div.title {
+            color: #333;
+            font-size: 0.7em;
+            text-align: center;
+          }
+          img {
+            height: 50px;
+            width: 50px;
+          }
+        }
+      }
+    }
   }
 }
diff --git a/client/templates/photos.html b/client/templates/photos.html
index 866ae9f..3a4866c 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -1,11 +1,28 @@
 <template name="photos">
-  {{#each photos}}
-    {{> photo}}
-  {{/each}}
-  <button class="pixelate btn btn-default">Pixelate</button>
+  <div class="photos-wrapper">
+    <h4>(Step 1)</h4>
+    <h2>Processing...</h2>
+    <div class="photos">
+      {{#each photos}}
+        {{> photo}}
+        {{> photo}}
+        {{> photo}}
+        {{> photo}}
+        {{> photo}}
+        {{> photo}}
+        {{> photo}}
+        {{> photo}}
+        {{> photo}}
+      {{/each}}
+    </div>
+  </div>
+  <!-- <button class="pixelate btn btn-default">Pixelate</button> -->
 </template>
 
 <template name="photo">
-  <img id="img-{{id}}" src="{{images.thumbnail.url}}" crossorigin="anonymous">
-  <canvas id="canvas-{{id}}" resize="true" style="width: 180px; height: 230px;"></canvas>
+  <div class="photo">
+    <div class="title">{{date}}</div>
+    <img id="img-{{id}}" src="{{images.thumbnail.url}}" crossorigin="anonymous">
+    <!-- <canvas id="canvas-{{id}}" resize="true" style="width: 180px; height: 230px;"></canvas> -->
+  </div>
 </template>
-- 
cgit v1.3.1