From ac14d77fdb071828806bebf1920e1b150f3c6359 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 30 Mar 2016 13:31:21 -0400 Subject: heights --- public/assets/js/app.js | 15 +++++++++++++-- public/assets/js/lib/ProjectView.js | 14 +++++++++----- public/assets/ok.css | 8 +++----- templates/index.liquid | 2 +- 4 files changed, 26 insertions(+), 13 deletions(-) diff --git a/public/assets/js/app.js b/public/assets/js/app.js index eff6dab..c21ed73 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) @@ -70,7 +70,11 @@ var app = (function() { setTimeout(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, .cell, .top, .flickity-viewport", this).css({ 'height': height }) + $(".bottom", this).css({ 'top': height }) }) app.view.$el.removeClass("hidden") // $('.top').flickity('resize') @@ -84,8 +88,12 @@ var app = (function() { })() $(".item").each(function(i){ - var height = window.innerHeight - $(this).find(".bottom").height() + var height = window.innerHeight - ($(this).find(".bottom").height() + 10) + if (is_desktop) { + height -= $("nav").height() // account for top bar + } $(".cell, .top", this).css({ 'height': height }) + $(".bottom", this).css({ 'top': height + 20 }) }) $('.top').each(function(){ @@ -99,6 +107,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( $("
").addClass("page-up") ) - this.$(".top").append( $("
").addClass("page-down") ) - } - else { + if ($viewport.length) { $("
").addClass("page-up").insertAfter( $viewport ) $("
").addClass("page-down").insertAfter( $viewport ) } + else if (this.$('.top').length) { + this.$(".top").append( $("
").addClass("page-up") ) + this.$(".top").append( $("
").addClass("page-down") ) + } + else { + this.$el.append( $("
").addClass("page-up") ) + this.$el.append( $("
").addClass("page-down") ) + } }, show: function(){ diff --git a/public/assets/ok.css b/public/assets/ok.css index 3670770..321344f 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; } @@ -354,10 +353,10 @@ nav span div:last-child { } .top { + position: relative; background: #f7f7f7; width: 100%; /*height: 80vh;*/ - flex: 1 auto; margin-top: 20px; float: none; } @@ -371,7 +370,7 @@ nav b { .bottom { float: none; position: absolute; - bottom: 0; + top: 0; width: 100%; left: 0; background: white; @@ -491,7 +490,6 @@ button.previous { .bottom { /*height: 20vh;*/ - flex: 0 auto; overflow: hidden; padding: 5px 0; cursor: url(img/d.png)32 64, pointer; diff --git a/templates/index.liquid b/templates/index.liquid index dc3b426..5c76a11 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -68,7 +68,7 @@ 2010 - 2016 -
+
© 2016 OKFocus LLC.
-- cgit v1.2.3-70-g09d2