[Rt-commit] rt branch, 4.6/fix-menu-overflows, created. rt-4.4.4-533-gaffff47bda

Blaine Motsinger blaine at bestpractical.com
Wed Dec 4 19:10:29 EST 2019


The branch, 4.6/fix-menu-overflows has been created
        at  affff47bdafd02d68d72b1f4cc71321daaab5947 (commit)

- Log -----------------------------------------------------------------
commit affff47bdafd02d68d72b1f4cc71321daaab5947
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Wed Dec 4 18:07:50 2019 -0600

    Fix overflow for main and page navigation
    
    The overflow and superfish control for the main and page navigation
    menus was not correctly calculating the available size.  This
    commit updates the available size to consider the other elements
    sharing the space.

diff --git a/share/html/NoAuth/css/elevator-light/BeforeNav b/share/html/NoAuth/css/elevator-light/BeforeNav
index d5ba87531e..2f7959f3d0 100644
--- a/share/html/NoAuth/css/elevator-light/BeforeNav
+++ b/share/html/NoAuth/css/elevator-light/BeforeNav
@@ -62,11 +62,21 @@ var rebalanceOverflowBuffer = 30;
 var rebalanceOverflowMenu = function (menuId, overflowId, withLogo) {
     var toplevelMenu = jQuery(menuId);
     var overflowMenu = jQuery(overflowId);
-
     var availableWidth = jQuery(window).width();
-    if (withLogo) {
-        availableWidth -= jQuery('#logo').width();
+
+    // adjustments specific to main-navigation
+    if (menuId === '#app-nav') {
+        if (withLogo) {
+            availableWidth -= jQuery('#logo').width();
+        }
+        availableWidth -= jQuery('#topactions').width();
     }
+
+    // adjustments specific to page-navigation
+    if (menuId === '#page-menu') {
+        availableWidth -= jQuery('#header h1').width() + rebalanceOverflowBuffer;
+    }
+
     availableWidth -= rebalanceOverflowBuffer;
 
     // if the menu is too wide for the viewport, move overflow items into
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index f629171c55..6d7f17ab42 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -141,7 +141,6 @@ div#header {
 div#header h1 {
     position: absolute;
     left: 2em;
-    right: 20em;
     top: 0.5em;
     height: 1.4em;
     font-size: 1.4em;
@@ -150,6 +149,12 @@ div#header h1 {
     text-overflow: ellipsis;
 }
 
+ at media (max-width: 1060px) {
+    div#header h1 {
+        right: 13%;
+    }
+}
+
 h1 {
   color: #31363E;
 }

-----------------------------------------------------------------------


More information about the rt-commit mailing list