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

Blaine Motsinger blaine at bestpractical.com
Tue Dec 17 13:57:41 EST 2019


The branch, 4.6/fix-menu-overflows has been created
        at  0f164626c3cec36a83edab51523ead5c77d6af06 (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;
 }

commit 657d623152f037c2421802d031bfc10b8f268a91
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Mon Dec 16 16:18:57 2019 -0600

    Re-add collapsing topactions buttons
    
    This commit re-adds the topactions collapsing functionality to
    allow more space for app-nav before it overflows to the "more" menu.
    
    The functionality is slightly different as it doesn't contain the
    dropdown for queue selection, but uses the classes which were
    already in place.

diff --git a/share/html/Elements/CreateTicket b/share/html/Elements/CreateTicket
index aa9ae034cb..22a2e45937 100644
--- a/share/html/Elements/CreateTicket
+++ b/share/html/Elements/CreateTicket
@@ -63,9 +63,15 @@
 <% $queue_selector |n %>
 % }
 % elsif ($ButtonOnly) {
-<div class="create-ticket-button">
+<div class="create-wide">
 <&|/l_unsafe, $button_only_start_modal, $button_end &>[_1]Create new ticket[_2]</&>
 </div>
+<div class="create-medium">
+<&|/l_unsafe, $button_start_modal, $button_end &>[_1]Create[_2]</&>
+</div>
+<div class="create-narrow">
+<&|/l_unsafe, $button_start_modal, $button_end &>[_1]+[_2]</&>
+</div>
 % }
 % else {
 <div class="create-wide">
diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index ed22a2fd04..9319093cb3 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -179,6 +179,7 @@ ul.sf-menu li {
     margin-left: 1em;
     text-align: right;
     margin-top: 0.5em;
+    margin-right: 0.5em;
 }
 
 #topactions form input.btn {
@@ -201,7 +202,6 @@ ul.sf-menu li {
     top: 0;
     right: 18em;
     width: auto;
-    min-width: 20em;
     font-size: 0.9em;
     z-index: 99;
 }
@@ -211,14 +211,21 @@ ul.sf-menu li {
     -webkit-appearance: textfield;
 }
 
+/* search focus in #topactions */
 #topactions input[type="search"]:focus {
-    width: 16em;
+    width: 10em;
     -webkit-transition: width 0.25s ease-in-out;
     -moz-transition: width 0.25s ease-in-out;
     -ms-transition: width 0.25s ease-in-out;
     transition: width 0.25s ease-in-out;
 }
 
+ at media (max-width: 900px) or (max-width: 600px) {
+    #topactions input[type="search"]:focus {
+        width: 4.7em;
+    }
+}
+
 #topactions input[type="search"]::-webkit-search-cancel-button {
     /* hide webkit x button for searches */
     -webkit-appearance: none;
@@ -370,6 +377,10 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
     div#header h1 {
         right: 10em;
     }
+
+    #topactions {
+        right: 18em;
+    }
 }
 
 @media (max-width: 600px) {

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

    Update layout to support wrapping subject

diff --git a/share/static/css/elevator-light/boxes.css b/share/static/css/elevator-light/boxes.css
index 27c070afc0..48f0fe2fd3 100644
--- a/share/static/css/elevator-light/boxes.css
+++ b/share/static/css/elevator-light/boxes.css
@@ -1,6 +1,5 @@
 .titlebox {
-    margin-top: 1em;
-    margin-bottom: 2em;
+    margin-top: 1.5em;
     padding: 5px;
 }
 
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index 6d7f17ab42..75c5b8ea53 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -12,17 +12,17 @@ div#rt-header-container {
 
 div#body {
     padding: 0 2.5em;
-    margin-top: 4em;
+    margin-top: 1.75em;
     margin-right: 0;
     margin-bottom: 0em;
     background: #fff;
     z-index: 1;
+    float: left;
+    clear: both;
+    width: 100%;
 }
 
 @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 +32,7 @@ div#body {
 
 @media (max-width: 700px) {
     div#body {
-        padding: 3em 0;
+        padding: 0 0;
     }
 }
 
@@ -128,31 +128,21 @@ 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;
+    max-width: 60%;
 }
 
 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;
-}
-
- at media (max-width: 1060px) {
-    div#header h1 {
-        right: 13%;
-    }
+    white-space: break-spaces;
+    overflow: visible;
 }
 
 h1 {
diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index 9319093cb3..3734a47031 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -92,8 +92,9 @@ ul.sf-menu li {
 
 #page-navigation {
     position: absolute;
-    top: 3.6em;
+    top: 3.9em;
     right: 2em;
+    float: right;
 }
 
 .page-nav-shadow {
@@ -374,10 +375,6 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
         margin-left: 0;
     }
 
-    div#header h1 {
-        right: 10em;
-    }
-
     #topactions {
         right: 18em;
     }

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


More information about the rt-commit mailing list