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

[Blaine Motsinger]

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

- Log -----------------------------------------------------------------
commit 2653ebec9d287ad1d9a1f997f5cd69001d9000ce
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Tue Dec 24 17:55:15 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..b774fb224f 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;
     }

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