Adjust sidebar panel css

nasa-gibs · Jun 11, 2018 · 06a3d5f · 06a3d5f
1 parent 2b4eab3
commit 06a3d5f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 44 deletions.
diff --git a/web/css/sidebar.css b/web/css/sidebar.css
@@ -82,15 +82,3 @@
 #productsHolder .ps__scrollbar-y {
   background: #ccc;
 }
-
-#productsHolder #products {
-  padding-bottom: 36px;
-}
-
-#productsHolder #wv-events {
-  padding-bottom: 83px;
-}
-
-#productsHolder #wv-data {
-  padding-bottom: 36px;
-}
diff --git a/web/js/data/ui.js b/web/js/data/ui.js
@@ -173,40 +173,44 @@ export function dataUi(models, ui, config) {
   var sizeDownloadTab = function () {
     var $tabPanel = $('#wv-data');
     var $tabFooter = $tabPanel.find('footer');
+    var footerIsVisible = $tabFooter.css('display') === 'block';
     var windowHeight = $(window).outerHeight(true);
     var tabBarHeight = $('ul#productsHolder-tabs').outerHeight(true);
     var footerHeight = $tabFooter.outerHeight(true);
     var distanceFromTop = $('#productsHolder').offset().top;
-    var timelineHeight = $('#timeline').outerHeight(true);
-    var tabPadding = $tabPanel.outerHeight(true) - $tabPanel.height();
 
-    // FIXME: -10 here is the timeline's bottom position from page, fix
-    // after timeline markup is corrected to be loaded first
-    var maxHeight = windowHeight - tabBarHeight - distanceFromTop - tabPadding + footerHeight;
-    var innerMaxHeight = windowHeight - tabBarHeight - distanceFromTop - tabPadding - footerHeight;
+    var maxHeight = windowHeight - tabBarHeight - distanceFromTop;
+    var innerMaxHeight = windowHeight - tabBarHeight - distanceFromTop - footerHeight;
 
-    if (!util.browser.small) {
-      maxHeight = maxHeight - timelineHeight - 10 - 5;
+    if (footerIsVisible) {
+      $tabPanel.css('padding-bottom', footerHeight);
+      innerMaxHeight = innerMaxHeight - footerHeight;
+    } else {
+      $tabPanel.css('padding-bottom', 0);
     }
 
+    if (!util.browser.small) {
+      maxHeight = maxHeight - 10 - 5;
+      innerMaxHeight = innerMaxHeight - footerHeight - 10 - 5;
+    }
     $tabPanel.css('max-height', maxHeight);
 
     var childrenHeight = $('#wv-datacontent').outerHeight(true);
 
-    var isTallerThanContainer = childrenHeight > innerMaxHeight;
-
-    if (isTallerThanContainer) {
+    if ((innerMaxHeight <= childrenHeight)) {
       $('.wv-datalist').css('height', innerMaxHeight).css('padding-right', '10px');
       if (productsIsOverflow) {
         $('.wv-datalist').perfectScrollbar('update');
       } else {
         $('.wv-datalist').perfectScrollbar();
         productsIsOverflow = true;
       }
-    } else if (productsIsOverflow) {
+    } else {
       $('.wv-datalist').css('height', '').css('padding-right', '');
-      $('.wv-datalist').perfectScrollbar('destroy');
-      productsIsOverflow = false;
+      if (productsIsOverflow) {
+        $('.wv-datalist').perfectScrollbar('destroy');
+        productsIsOverflow = false;
+      }
     }
   };
   self.onViewChange = function () {

diff --git a/web/js/layers/active.js b/web/js/layers/active.js
@@ -294,17 +294,20 @@ export function layersActive(models, ui, config) {
   var sizeProductsTab = function () {
     var $tabPanel = $('#products');
     var $tabFooter = $tabPanel.find('footer');
+    var footerIsVisible = $tabFooter.css('display') === 'block';
     var windowHeight = $(window).outerHeight(true);
     var tabBarHeight = $('#productsHolder-tabs').outerHeight(true);
-    var footerHeight = $tabFooter.outerHeight(true);
     var distanceFromTop = $('#productsHolder').offset().top;
     var overlaysHeight = $('#overlays').outerHeight(true);
     var baseLayersHeight = $('#baselayers').outerHeight(true);
     var layerGroupHeight = 26; // Height of layer group titles
     var contentHeight = overlaysHeight + baseLayersHeight + layerGroupHeight;
-    var tabPadding = $tabPanel.outerHeight(true) - $tabPanel.height();
-    var maxHeight = windowHeight - tabBarHeight - distanceFromTop - tabPadding + footerHeight;
-    var innerMaxHeight = windowHeight - tabBarHeight - distanceFromTop - tabPadding - footerHeight;
+    var footerHeight = $tabFooter.outerHeight(true);
+    var tabPadding = 36;
+
+    if (footerIsVisible) { $tabPanel.css('padding-bottom', footerHeight); } else { $tabPanel.css('padding-bottom', 0); }
+    var maxHeight = windowHeight - tabBarHeight - distanceFromTop;
+    var innerMaxHeight = windowHeight - tabBarHeight - distanceFromTop - footerHeight;
 
     // If on a mobile device, use the native scroll bars
     if (!util.browser.small) {
@@ -316,12 +319,10 @@ export function layersActive(models, ui, config) {
       wvui.closeDialog();
     }
 
-    // FIXME: -10 here is the timeline's bottom position from page, fix
-    // after timeline markup is corrected to be loaded first
-    if (util.browser.small) {
-      maxHeight = windowHeight - tabBarHeight - footerHeight - distanceFromTop - 10 - 5;
+    if (!util.browser.small) {
+      maxHeight = maxHeight - 10 - 5;
+      innerMaxHeight = innerMaxHeight - tabPadding - footerHeight - 10 - 5;
     }
-
     $tabPanel.css('max-height', maxHeight);
 
     if ((innerMaxHeight <= contentHeight)) {

diff --git a/web/js/layers/sidebar.js b/web/js/layers/sidebar.js
@@ -105,7 +105,7 @@ export function layersSidebar(models, config) {
     // Resize after browser repaints
     setTimeout(function () {
       self.sizeEventsTab();
-    }, 100);
+    }, 400);
   };
 
   self.expandNow = function () {
@@ -129,17 +129,22 @@ export function layersSidebar(models, config) {
     var windowHeight = $(window).outerHeight(true);
     var tabBarHeight = $('ul#productsHolder-tabs').outerHeight(true);
     var distanceFromTop = $('#productsHolder').offset().top;
-    var timelineHeight = $('#timeline').outerHeight(true);
-    var footerHeight = footerIsVisible ? $tabFooter.outerHeight(true) : 0;
-    var tabPadding = $tabPanel.outerHeight(true) - $tabPanel.height();
+    var footerHeight = $tabFooter.outerHeight(true);
+    var tabPadding = 54;
 
-    // FIXME: -10 here is the timeline's bottom position from page, fix
-    // after timeline markup is corrected to be loaded first
-    var maxHeight = windowHeight - tabBarHeight - distanceFromTop - tabPadding + footerHeight;
-    var innerMaxHeight = windowHeight - tabBarHeight - distanceFromTop - tabPadding - footerHeight;
+    var maxHeight = windowHeight - tabBarHeight - distanceFromTop;
+    var innerMaxHeight = windowHeight - tabBarHeight;
+
+    if (footerIsVisible) {
+      $tabPanel.css('padding-bottom', footerHeight);
+      innerMaxHeight = innerMaxHeight - footerHeight;
+    } else {
+      $tabPanel.css('padding-bottom', 0);
+    }
 
     if (!util.browser.small) {
-      maxHeight = maxHeight - timelineHeight - 10 - 5;
+      maxHeight = maxHeight - 10 - 5;
+      innerMaxHeight = innerMaxHeight - tabPadding - footerHeight - 10 - 5;
     }
     $tabPanel.css('max-height', maxHeight);
     $('.wv-eventslist').css('min-height', 1);