diff options
| author | Yuval Adam <yuval@y3xz.com> | 2015-06-12 00:14:38 +0300 |
|---|---|---|
| committer | Yuval Adam <yuval@y3xz.com> | 2015-06-12 00:14:38 +0300 |
| commit | be4103f6cdebfb7b7b04270c20d6c91eeb61a4f3 (patch) | |
| tree | 0eb816f7d48f1155a5fb5eb09c2095541e713282 | |
| parent | 9738ebafd811c77d20a0e3f0f7b6f1876ed53532 (diff) | |
Photos page design
| -rw-r--r-- | client/button.js | 7 | ||||
| -rw-r--r-- | client/colors.less | 35 | ||||
| -rw-r--r-- | 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> |