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

Blaine Motsinger blaine at bestpractical.com
Tue Dec 17 14:50:36 EST 2019


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

- Log -----------------------------------------------------------------
commit 7802d79e7aaea1d213e861b7a9138c097d502c39
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 b758bf3bf541106913d1b08c4d1c74d2f05a0a15
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 30ba4b78ed..9522c45249 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -183,6 +183,7 @@ ul.sf-menu li {
     margin-left: 1em;
     text-align: right;
     margin-top: 0.5em;
+    margin-right: 0.5em;
 }
 
 #topactions form input.btn {
@@ -205,7 +206,6 @@ ul.sf-menu li {
     top: 0;
     right: 18em;
     width: auto;
-    min-width: 20em;
     font-size: 0.9em;
     z-index: 99;
 }
@@ -215,14 +215,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;
@@ -374,6 +381,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 7e9a2b6fb8ebfdaf3d12228729f88244649fc4c8
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 9522c45249..8e713f313e 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 {
@@ -378,10 +379,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