[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