fix problems with absolute positioning

3 files changed, 25 insertions, 11 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index bfd317b..504375b 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -68,9 +68,12 @@ var app = (function() {
     debounce(function() {
       $(".item").addClass("hidden")
       setTimeout(function(){
-        $(".cell, .next, .previous").css({ 'height': ($(".top").height() + 'px'), 'display': 'inline-block' })
+        $(".item").each(function(i){
+          var height = window.innerHeight - $(this).find(".bottom").height()
+          $(".previous, .next, .cell, .top, .flickity-viewport", this).css({ 'height': height })
+        })
         app.view.$el.removeClass("hidden")
-        $('.top').flickity('resize')
+        // $('.top').flickity('resize')
         $('body').removeClass('resizing')
       }, 20)
     }, 400)
@@ -81,10 +84,10 @@ var app = (function() {
 })()
 
 var heights = []
-$(".top").each(function(i){
-  var height = $(this).height()
-  heights[i] = height
-  $(".cell", this).css({ 'height': (height + 'px') })
+$(".item").each(function(i){
+  var height = window.innerHeight - $(this).find(".bottom").height()
+  console.log(height)
+  $(".cell, .top", this).css({ 'height': height })
 })
 
 $('.top').flickity(app.flickity_options).on( 'cellSelect', function(e) {
@@ -92,9 +95,9 @@ $('.top').flickity(app.flickity_options).on( 'cellSelect', function(e) {
   app.header.updateSlideNumber( gallery.selectedIndex )
 })
 
-$(".top").each(function(i){
-  var height = heights[i]
-  $(".previous, .next", this).css({ 'height': (height + 'px') })
+$(".item").each(function(i){
+  var height = window.innerHeight - $(this).find(".bottom").height()
+  $(".previous, .next, .flickity-viewport", this).css({ 'height': height })
 })
 
 $(".item").addClass("hidden")
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index 1528f10..107c3d5 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -12,7 +12,7 @@ var ProjectView = View.extend({
     this.project_id = this.$el.data("id")
     this.page_number = opt.page_number
     console.log("INIT", this.project_id)
-    $("<div>").addClass("page-up").insertBefore( this.$(".flickity-viewport") )
+    $("<div>").addClass("page-up").insertAfter( this.$(".flickity-viewport") )
     $("<div>").addClass("page-down").insertAfter( this.$(".flickity-viewport") )
   },
   
diff --git a/public/assets/ok.css b/public/assets/ok.css
index f762d89..c6d48da 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -36,11 +36,14 @@ body {
     overflow: hidden;
 }
 
+/* 
 .hidden {
     display: none!important;
 }
+ */
 .item.hidden {
-    display: block;
+    display: -webkit-flex;
+    display: flex;
     opacity: 0;
     pointer-events: none;
 }
@@ -367,6 +370,11 @@ nav b {
 
 .bottom {
   float: none;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  background: white;
 }
 .bottom * {
     transform:translateY(0px);
@@ -400,6 +408,8 @@ nav b {
     height: 20vw;
     width: 60vw;
     position: absolute;
+    top: 0;
+    left: 0;
     z-index: 3;
     margin-left: 20vw;
     cursor: url(img/u.png) 32 0, pointer;
@@ -467,6 +477,7 @@ button.previous {
 
 .cell {
     width: 100vw;
+    height: 100%;
     /*THIS SHOULD BE DYNAMIC*/
     background-position: center;
     background-size: cover;