[Rt-commit] rt branch, 4.6/add-collapse-to-topactions-buttons, created. rt-4.4.4-569-g723b2a4778

[Blaine Motsinger]

The branch, 4.6/add-collapse-to-topactions-buttons has been created
        at  723b2a477899b26ee8807f8d0b6200317a5e8f0e (commit)

- Log -----------------------------------------------------------------
commit 200b3966c4d22753bb5d177487ed607e019a2913
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Thu Dec 26 13:38:26 2019 -0600

    Add collapse to topactions inputs
    
    This commit makes the topactions inputs collapse for smaller
    window sizes.
    
    The search and create inputs previously collapsed before the
    queue selection dropdown was removed from topactions.  This update
    has slightly different styling but emulates the general idea
    previously implemented in the collapse.

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..6f1ab6c235 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -205,7 +205,6 @@ ul.sf-menu li {
     top: 0;
     right: 18em;
     width: auto;
-    min-width: 20em;
     font-size: 0.9em;
     z-index: 99;
 }
@@ -215,6 +214,10 @@ ul.sf-menu li {
     -webkit-appearance: textfield;
 }
 
+#topactions input {
+    width: 10em;
+}
+
 #topactions input[type="search"]:focus {
     width: 16em;
     -webkit-transition: width 0.25s ease-in-out;
@@ -223,6 +226,16 @@ ul.sf-menu li {
     transition: width 0.25s ease-in-out;
 }
 
+ at media (max-width: 900px) {
+    #topactions input {
+        width: 4.7em;
+    }
+
+    #topactions input[type="search"]:focus {
+        width: 10em;
+    }
+}
+
 #topactions input[type="search"]::-webkit-search-cancel-button {
     /* hide webkit x button for searches */
     -webkit-appearance: none;
@@ -244,7 +257,6 @@ ul.sf-menu li {
     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;
@@ -364,11 +376,8 @@ 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;
+        margin-left: 0.5em;
     }
 
     div#header h1 {

commit 723b2a477899b26ee8807f8d0b6200317a5e8f0e
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Thu Dec 26 14:10:45 2019 -0600

    Fix topactions input animation overlap
    
    This commit fixes the topactions input animation overlap by only
    easing if there is enough space available.  The easing definitions
    in the CSS are now bound to the "expand" class, which is added and
    removed by the JS in BeforeNav after calculation.

diff --git a/share/html/NoAuth/css/elevator-light/BeforeNav b/share/html/NoAuth/css/elevator-light/BeforeNav
index d5ba87531e..de88edfe20 100644
--- a/share/html/NoAuth/css/elevator-light/BeforeNav
+++ b/share/html/NoAuth/css/elevator-light/BeforeNav
@@ -67,6 +67,10 @@ var rebalanceOverflowMenu = function (menuId, overflowId, withLogo) {
     if (withLogo) {
         availableWidth -= jQuery('#logo').width();
     }
+
+    if ( menuId === '#app-nav' ) {
+        availableWidth -= jQuery('#topactions').width();
+    }
     availableWidth -= rebalanceOverflowBuffer;
 
     // if the menu is too wide for the viewport, move overflow items into
@@ -125,6 +129,15 @@ var rebalanceOverflowMenu = function (menuId, overflowId, withLogo) {
             overflowMenu.removeClass('has-overflow');
         }
     }
+
+    if ( menuId === '#app-nav' ) {
+        if ( jQuery(window).width() - jQuery('#topactions').width() - toplevelMenu.width() - jQuery('#logo').width() > 80 ) {
+            jQuery('#topactions input[type=search]:not(.expand)').addClass('expand');
+        }
+        else {
+            jQuery('#topactions input[type=search].expand').removeClass('expand');
+        }
+    }
 };
 
 jQuery(function() {
diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index 6f1ab6c235..abf6b798d8 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -214,24 +214,28 @@ ul.sf-menu li {
     -webkit-appearance: textfield;
 }
 
+/* topactions search box sizes and easing definitions */
 #topactions input {
     width: 10em;
 }
 
-#topactions input[type="search"]:focus {
-    width: 16em;
+#topactions input[type="search"].expand {
     -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"].expand:focus {
+    width: 16em;
+}
+
 @media (max-width: 900px) {
     #topactions input {
         width: 4.7em;
     }
 
-    #topactions input[type="search"]:focus {
+    #topactions input[type="search"].expand:focus {
         width: 10em;
     }
 }
@@ -256,11 +260,6 @@ ul.sf-menu li {
     padding-left: 0.5em;
     padding-right: 0.5em;
     vertical-align: middle;
-
-    -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() {

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