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

[Blaine Motsinger]

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

- Log -----------------------------------------------------------------
commit f3bc81d61b9d53973508038009d8e70115edc9b2
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..a565e67f51 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;

commit f9faba7c151071c2a8231156bf4ca35d7cc7af48
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Tue Dec 17 10:25:29 2019 -0600

    Update layout to support wrapping subject
    
    This commit makes changes to the positions, floats, padding, and
    margins to allow the header h1 subject line to wrap.  The other
    elements in the theme need to respond relative to the size of the
    subject, so needed to be adjusted for position, padding, and margin
    to compensate for the positioning change.

diff --git a/share/static/css/elevator-light/boxes.css b/share/static/css/elevator-light/boxes.css
index 27c070afc0..171ace85f5 100644
--- a/share/static/css/elevator-light/boxes.css
+++ b/share/static/css/elevator-light/boxes.css
@@ -1,6 +1,6 @@
 .titlebox {
-    margin-top: 1em;
-    margin-bottom: 2em;
+    margin-top: 1.2em;
+    margin-bottom: 1em;
     padding: 5px;
 }
 
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index a565e67f51..4561d4e4cb 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -12,17 +12,20 @@ div#rt-header-container {
 
 div#body {
     padding: 0 2.5em;
-    margin-top: 4em;
+    margin-top: 3em;
     margin-right: 0;
     margin-bottom: 0em;
     background: #fff;
     z-index: 1;
+    float: left;
+    clear: both;
+    width: 100%;
+    border-top-color: #547CCC;
+    border-top-width: 2px;
+    border-top-style: solid;
 }
 
 @media (max-width: 800px) {
-    div#body {
-        padding: 3em 4.875%; /* 3em at 13px font size => 39px => 39/800 => .04875 */
-    }
     /* at narrow widths we'll have broken into a single column, so the default
        padding-right just causes the layout to degrade */
     .boxcontainer {
@@ -32,7 +35,7 @@ div#body {
 
 @media (max-width: 700px) {
     div#body {
-        padding: 3em 0;
+        padding: 0 0;
     }
 }
 
@@ -128,25 +131,28 @@ div#quickbar {
 }
 
 div#header {
-    position: absolute;
-    top: 3.5em;
+    position: relative;
+    top: 2.4em;
     left: 0;
     right: 0;
-    height: 3.2em;
-    border-bottom-color: #547CCC;
-    border-bottom-width: 2px;
-    border-bottom-style: solid;
+    float: left;
+    width: 100%;
 }
 
 div#header h1 {
-    position: absolute;
+    position: relative;
     left: 2em;
-    top: 0.5em;
-    height: 1.4em;
+    display: inline-block;
     font-size: 1.4em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: break-spaces;
+    overflow: visible;
+    max-width: 60%;
+}
+
+ at media (max-width: 600px) { /* less than 600 */
+    div#header h1 {
+        max-width: 70%;
+    }
 }
 
 h1 {
diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index 30ba4b78ed..dbc8fa5e75 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -96,8 +96,9 @@ ul.sf-menu li {
 
 #page-navigation {
     position: absolute;
-    top: 3.6em;
+    top: 3.9em;
     right: 2em;
+    float: right;
 }
 
 .page-nav-shadow {

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