From 72538b5f9f6f1be0ba421a76c2a24da4dd23db0e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 24 Jul 2017 16:14:29 +0100
Subject: [PATCH] improvements to positioning of the dropdown

---
 app/assets/javascripts/fly_out_nav.js   | 10 ++++++++--
 app/assets/stylesheets/new_sidebar.scss | 11 ++++++++++-
 spec/javascripts/fly_out_nav_spec.js    |  6 ++++--
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index 1ae2e72410f..f2151396d43 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
@@ -2,7 +2,8 @@ export const calculateTop = (boundingRect, outerHeight) => {
   const windowHeight = window.innerHeight;
   const bottomOverflow = windowHeight - (boundingRect.top + outerHeight);
 
-  return bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top;
+  return bottomOverflow < 0 ? (boundingRect.top - outerHeight) + boundingRect.height :
+    boundingRect.top;
 };
 
 export default () => {
@@ -13,10 +14,15 @@ export default () => {
     if ($subitems.length) {
       const boundingRect = $this.getBoundingClientRect();
       const top = calculateTop(boundingRect, $subitems.outerHeight());
+      const isAbove = top < boundingRect.top;
 
       $subitems.css({
         transform: `translate3d(0, ${top}px, 0)`,
       });
+
+      if (isAbove) {
+        $subitems.addClass('is-above');
+      }
     }
-  }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide());
+  }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide().removeClass('is-above'));
 };
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 78f278c1669..cd6c7914142 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -215,9 +215,18 @@ $new-sidebar-width: 220px;
             position: absolute;
             top: 44px;
             left: -30px;
-            right: 0;
             bottom: 0;
+            height: 100%;
+            max-height: 150px;
+            width: 300px;
             z-index: -1;
+            transform: skew(33deg);
+          }
+
+          &.is-above::after {
+            top: auto;
+            bottom: 44px;
+            transform: skew(-30deg);
           }
 
           a {
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js
index 0e71e2a87e5..d3c6dafe460 100644
--- a/spec/javascripts/fly_out_nav_spec.js
+++ b/spec/javascripts/fly_out_nav_spec.js
@@ -5,6 +5,7 @@ describe('Fly out sidebar navigation', () => {
     it('returns boundingRect top', () => {
       const boundingRect = {
         top: 100,
+        height: 100,
       };
 
       expect(
@@ -14,12 +15,13 @@ describe('Fly out sidebar navigation', () => {
 
     it('returns boundingRect - bottomOverflow', () => {
       const boundingRect = {
-        top: window.innerHeight,
+        top: window.innerHeight - 50,
+        height: 100,
       };
 
       expect(
         calculateTop(boundingRect, 100),
-      ).toBe(window.innerHeight - 100);
+      ).toBe(window.innerHeight - 50);
     });
   });
 });