Merge branch 'master' of https://github.com/okfocus/portfolio

3 files changed, 40 insertions, 19 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index eff6dab..fa5dafe 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -27,7 +27,7 @@ var app = (function() {
       document.addEventListener('touchmove', function(e) {
         e.preventDefault()
       })
-      // FastClick.attach(document.body)
+      FastClick.attach(document.body)
     }
     
     $(window).resize(app.resize)
@@ -68,25 +68,40 @@ var app = (function() {
     debounce(function() {
       $(".active.item").addClass("hidden")
       setTimeout(function(){
-        $(".item").each(function(i){
-          var height = window.innerHeight - $(this).find(".bottom").height()
-          $(".previous, .next, .cell, .top, .flickity-viewport", this).css({ 'height': height })
-        })
+        app.resizeItems()
         app.view.$el.removeClass("hidden")
         // $('.top').flickity('resize')
         $('body').removeClass('resizing')
       }, 400)
     }, 400)
   }
+  
+  app.resizeItems = function(){
+    $(".item").each(function(i){
+      var height = window.innerHeight - ($(this).find(".bottom").height() + 10)
+      if (is_desktop) {
+        height -= $("nav").height() // account for top bar
+      }
+      $(".cell, .top, .previous, .next, .flickity-viewport", this).css({ 'height': height })
+      var cellCount = $(this).find(".cell").length
+      if (cellCount == 0) {
+        console.log($(this).data("id"), "NONE")
+        $(".bottom", this).css({ 'top': height + 17 })
+      }
+      else if (cellCount == 1) {
+        $(".bottom", this).css({ 'top': height + 13 })
+      }
+      else {
+        $(".bottom", this).css({ 'top': height + 19 })
+      }
+    })
+  }
 
   return app
 
 })()
 
-$(".item").each(function(i){
-  var height = window.innerHeight - $(this).find(".bottom").height()
-  $(".cell, .top", this).css({ 'height': height })
-})
+app.resizeItems()
 
 $('.top').each(function(){
   if ($(this).find(".cell").length > 1) {
@@ -99,6 +114,9 @@ $('.top').each(function(){
 
 $(".item").each(function(i){
   var height = window.innerHeight - $(this).find(".bottom").height()
+  if (is_desktop) {
+    height -= $("nav").height() // account for top bar
+  }
   $(".previous, .next, .flickity-viewport", this).css({ 'height': height })
 })
 
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index 575174b..061dcee 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -17,14 +17,18 @@ var ProjectView = View.extend({
     if (! $viewport.length) {
       $viewport = this.$(".cell")
     }
-    if (! $viewport.length) {
-      this.$(".top").append( $("<div>").addClass("page-up") )
-      this.$(".top").append( $("<div>").addClass("page-down") )
-    }
-    else {
+    if ($viewport.length) {
       $("<div>").addClass("page-up").insertAfter( $viewport )
       $("<div>").addClass("page-down").insertAfter( $viewport )
     }
+    else if (this.$('.top').length) {
+      this.$(".top").append( $("<figure>").addClass("page-up") )
+      this.$(".top").append( $("<figure>").addClass("page-down") )
+    }
+    else {
+      this.$el.append( $("<figure>").addClass("page-up") )
+      this.$el.append( $("<figure>").addClass("page-down") )
+    }
   },
   
   show: function(){
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 082f27a..51c9241 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -42,8 +42,7 @@ body {
 }
  */
 .item.hidden {
-    display: -webkit-flex;
-    display: flex;
+    display: block;
     opacity: 0;
     pointer-events: none;
 }
@@ -359,12 +358,13 @@ nav span div:last-child {
 }
 
 .top {
+    position: relative;
     background: #f9f9f9;
     width: 100%;
     /*height: 80vh;*/
-    flex: 1 auto;
     margin-top: 20px;
     float: none;
+    display: block;
 }
 
 nav b {
@@ -377,7 +377,7 @@ nav b {
 .bottom {
   float: none;
   position: absolute;
-  bottom: 0;
+  top: 0;
   width: 100%;
   left: 0;
   background: white;
@@ -505,7 +505,6 @@ button.previous {
 
 .bottom {
     /*height: 20vh;*/
-    flex: 0 auto;
     overflow: hidden;
     padding: 5px 0;
     cursor: url(img/d.png)32 64, pointer;