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

Blaine Motsinger blaine at bestpractical.com
Fri Dec 20 20:15:59 EST 2019


The branch, 4.6/fix-menu-overflows has been created
        at  d4e443fae47909f1de6b73ad5fc44406fda6e13f (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 4d59a877f8d542956adf948c68c6c1041584b7d6
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Mon Dec 16 16:18:57 2019 -0600

    Add collapse to topactions buttons
    
    This commit makes the topactions buttons collapse for smaller
    window sizes.
    
    The search and create buttons previously collapsed in a similar
    way before removing the queue selection dropdown from topactions.
    This update has slightly different styling and removes the easing
    animation on window sizes smaller than 1300px to save colliding
    with the main-navigation.

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..8b68fd66e5 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,12 +215,37 @@ ul.sf-menu li {
     -webkit-appearance: textfield;
 }
 
-#topactions input[type="search"]:focus {
-    width: 16em;
-    -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;
+/* topactions search box sizes and easing definitions
+
+for browser sizes
+- 1300px or greater, when in focus grow to 16em with easing then shrink back to 10em with easing.
+- smaller than 1300px, don't grow and disable easing, but size remains 10em.
+- 900px or smaller, change size to 4.7em.
+
+*/
+#topactions input,
+#topactions button {
+    width: 10em;
+}
+
+ at media (min-width: 1300px) {
+    #topactions input,
+    #topactions button {
+        -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;
+    }
+
+    #topactions input[type="search"]:focus {
+        width: 16em;
+    }
+}
+
+ at media (max-width: 900px) {
+    #topactions input {
+        width: 4.7em;
+    }
 }
 
 #topactions input[type="search"]::-webkit-search-cancel-button {
@@ -243,12 +268,6 @@ ul.sf-menu li {
     padding-left: 0.5em;
     padding-right: 0.5em;
     vertical-align: middle;
-
-    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;
 }
 
 @-moz-document url-prefix() {
@@ -364,9 +383,6 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
     #topactions .create-medium { display: block; }
     #topactions .create-narrow { display: none; }
 
-    #topactions input[type="search"] {
-        width: 2em;
-    }
     #topactions form {
         margin-left: 0;
     }
@@ -374,6 +390,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 d5fb13834f6cbc482d255e1ec7ed9701b681c0e5
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 8b68fd66e5..a26c755d13 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 {
@@ -387,10 +388,6 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
         margin-left: 0;
     }
 
-    div#header h1 {
-        right: 10em;
-    }
-
     #topactions {
         right: 18em;
     }

commit dbfca8a2c3c0e51903cd553143c7e731442bd015
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Wed Dec 18 12:41:19 2019 -0600

    Fix page-menu display issues
    
    The inner elements of page-menu had an incorrect border-radius,
    alignment, and margin-top being set.  This showed in the superfish
    dropdown center aligning the text and rounded hover on square
    buttons.

diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index a26c755d13..94166bcb1d 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -79,6 +79,8 @@ ul.sf-menu li {
 #main-navigation .sf-menu a:hover {
     padding-top: 0.5em;
     padding-bottom: 0.5em;
+    border-radius: 0;
+    text-align: left;
 }
 
 #main-navigation a {
@@ -113,7 +115,6 @@ ul.sf-menu li {
 }
 
 #page-navigation #page-menu {
-    margin-top: 0.2em;
     float: right;
     width: auto;
 }
@@ -341,6 +342,7 @@ for browser sizes
 #page-menu.sf-menu > li > a {
     padding-top: .3em;
     padding-bottom: .3em;
+    border-radius: 0;
 }
 
 #page-menu.sf-menu li {

commit d4e443fae47909f1de6b73ad5fc44406fda6e13f
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Wed Dec 18 18:20:59 2019 -0600

    Fix centering on topactions, logo, and not-logged-in
    
    This commit fixes the topactions, logo, and not-logged-in elements
    to be correctly vertically centered.

diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index 4561d4e4cb..c3f65e4bdc 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -83,7 +83,7 @@ div#footer p {
 div#logo {
     position: absolute;
     right: 2px;
-    top: 0;
+    top: 0.25em;
     height: 2.8em;
 }
 
diff --git a/share/static/css/elevator-light/login.css b/share/static/css/elevator-light/login.css
index 0440293a87..6a43419b5b 100644
--- a/share/static/css/elevator-light/login.css
+++ b/share/static/css/elevator-light/login.css
@@ -22,7 +22,7 @@
 
 #quick-personal #not-logged-in {
     display: block;
-    padding-top: 0.5em;
+    padding-top: 0.82em;
     padding-left: 1em;
 }
 
diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index 94166bcb1d..fdb689fa62 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -205,7 +205,7 @@ ul.sf-menu li {
 #topactions {
     position: absolute;
     background: transparent;
-    top: 0;
+    top: 0.15em;
     right: 18em;
     width: auto;
     font-size: 0.9em;

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


More information about the rt-commit mailing list