[Rt-commit] rt branch, 4.6/add-collapse-to-topactions-buttons, created. rt-4.4.4-569-g42690edfd6
Blaine Motsinger
blaine at bestpractical.com
Thu Dec 26 16:43:32 EST 2019
The branch, 4.6/add-collapse-to-topactions-buttons has been created
at 42690edfd6907f9854fa558763ffd75cd2244d0c (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 42690edfd6907f9854fa558763ffd75cd2244d0c
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Thu Dec 26 14:10:45 2019 -0600
Fix topactions menu overlap
This commit fixes the topactions menu overlap by calculating the
available space for app-nav based on the width of topactions.
This commit also fixes the topactions input animation 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.
The calculation for the animation space takes into account the
topactions width, topLevelMenu width, logo width, and 80px (the max
difference being 6em plus a little extra).
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() {
-----------------------------------------------------------------------
More information about the rt-commit
mailing list