From 0cd393f310b4090a95de642fe2dcf9a95e8931c1 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 2 Sep 2015 16:46:25 -0400
Subject: [PATCH] Experiment with variable heights for slide-in menus

---
 .../discourse/components/menu-panel.js.es6    | 21 +++++++++++++------
 .../stylesheets/common/base/menu-panel.scss   |  2 +-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/menu-panel.js.es6 b/app/assets/javascripts/discourse/components/menu-panel.js.es6
index e92e855798a..8b5767137a2 100644
--- a/app/assets/javascripts/discourse/components/menu-panel.js.es6
+++ b/app/assets/javascripts/discourse/components/menu-panel.js.es6
@@ -22,32 +22,41 @@ export default Ember.Component.extend({
 
     const viewMode = this.get('viewMode');
     const $panelBody = this.$('.panel-body');
+    let contentHeight = parseInt(this.$('.panel-body-contents').height());
 
     if (viewMode === 'drop-down') {
       const $buttonPanel = $('header ul.icons');
       if ($buttonPanel.length === 0) { return; }
 
       const buttonPanelPos = $buttonPanel.offset();
-
       const posTop = parseInt(buttonPanelPos.top + $buttonPanel.height() - $('header.d-header').offset().top);
       const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - width);
 
-      this.$().css({ left: posLeft + "px", top: posTop + "px" });
+      this.$().css({ left: posLeft + "px", top: posTop + "px", height: 'auto' });
 
       // adjust panel height
-      let contentHeight = parseInt(this.$('.panel-body-contents').height());
       const fullHeight = parseInt($window.height());
-
       const offsetTop = this.$().offset().top;
       const scrollTop = $window.scrollTop();
+
       if (contentHeight + (offsetTop - scrollTop) + PANEL_BODY_MARGIN > fullHeight) {
         contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN;
       }
       $panelBody.height(contentHeight);
       $('body').addClass('drop-down-visible');
     } else {
-      $panelBody.height('auto');
-      this.$().css({ left: "auto", top: headerHeight() + "px" });
+
+      const menuTop = headerHeight();
+
+      let height;
+      if ((menuTop + contentHeight) < ($(window).height() - 20)) {
+        height = contentHeight + "px";
+      } else {
+        height = $(window).height() - menuTop;
+      }
+
+      $panelBody.height('100%');
+      this.$().css({ left: "auto", top: (menuTop - 2) + "px", height });
       $('body').removeClass('drop-down-visible');
     }
 
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 4151fdab160..8a599647f18 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -2,7 +2,7 @@
   position: fixed;
   right: 0;
   top: 0;
-  height: 100%;
+
   .panel-body {
     position: absolute;
     top: 3px;