[Rt-commit] rt branch, 4.6/fix-menu-overflows, created. rt-4.4.4-572-g116d2df1a7
Blaine Motsinger
blaine at bestpractical.com
Thu Dec 19 16:51:54 EST 2019
The branch, 4.6/fix-menu-overflows has been created
at 116d2df1a724997ff1ea0c08bffeac7ca0f620d1 (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 df61ca1a72f6869ee855e5e60dea7f96ba7773c8
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Mon Dec 16 16:18:57 2019 -0600
Re-add collapsing topactions buttons
This commit re-adds the topactions collapsing functionality to
allow more space for app-nav before it overflows to the "more" menu.
The functionality is slightly different as it doesn't contain the
dropdown for queue selection, but uses the classes which were
already in place.
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..9522c45249 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,14 +215,21 @@ ul.sf-menu li {
-webkit-appearance: textfield;
}
+/* search focus in #topactions */
#topactions input[type="search"]:focus {
- width: 16em;
+ 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;
}
+ at media (max-width: 900px) or (max-width: 600px) {
+ #topactions input[type="search"]:focus {
+ width: 4.7em;
+ }
+}
+
#topactions input[type="search"]::-webkit-search-cancel-button {
/* hide webkit x button for searches */
-webkit-appearance: none;
@@ -374,6 +381,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 c8225d8b06f5c3bec8af9f6a39465901fda7d251
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Tue Dec 17 10:25:29 2019 -0600
Update layout to support wrapping subject
diff --git a/share/static/css/elevator-light/boxes.css b/share/static/css/elevator-light/boxes.css
index 27c070afc0..48f0fe2fd3 100644
--- a/share/static/css/elevator-light/boxes.css
+++ b/share/static/css/elevator-light/boxes.css
@@ -1,6 +1,5 @@
.titlebox {
- margin-top: 1em;
- margin-bottom: 2em;
+ margin-top: 1.5em;
padding: 5px;
}
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index a565e67f51..5ee37cb5e2 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: 1.5em;
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 9522c45249..8e713f313e 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 {
@@ -378,10 +379,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 4300557abe941d08c2c9964826984049892cd8e1
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Dec 18 12:41:19 2019 -0600
Fix page-menu display issues
diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index 8e713f313e..9dc407710c 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;
}
@@ -329,6 +330,7 @@ ul.sf-menu li {
#page-menu.sf-menu > li > a {
padding-top: .3em;
padding-bottom: .3em;
+ border-radius: 0;
}
#page-menu.sf-menu li {
commit 8901c9f387a6a7e2318167642e8e6e04c58a252b
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Dec 18 18:20:59 2019 -0600
Fix margin on topaction and logo
diff --git a/share/static/css/elevator-light/boxes.css b/share/static/css/elevator-light/boxes.css
index 48f0fe2fd3..4b7c27eebb 100644
--- a/share/static/css/elevator-light/boxes.css
+++ b/share/static/css/elevator-light/boxes.css
@@ -1,5 +1,6 @@
.titlebox {
margin-top: 1.5em;
+ margin-bottom: 1.25em;
padding: 5px;
}
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index 5ee37cb5e2..c3f65e4bdc 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -12,7 +12,7 @@ div#rt-header-container {
div#body {
padding: 0 2.5em;
- margin-top: 1.5em;
+ margin-top: 3em;
margin-right: 0;
margin-bottom: 0em;
background: #fff;
@@ -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/nav.css b/share/static/css/elevator-light/nav.css
index 9dc407710c..6cfa7539ea 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;
@@ -218,17 +218,9 @@ ul.sf-menu li {
}
/* search focus in #topactions */
-#topactions input[type="search"]:focus {
- 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;
-}
-
@media (max-width: 900px) or (max-width: 600px) {
#topactions input[type="search"]:focus {
- width: 4.7em;
+ width: 5em;
}
}
@@ -375,7 +367,7 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
#topactions .create-narrow { display: none; }
#topactions input[type="search"] {
- width: 2em;
+ width: 4.5em;
}
#topactions form {
margin-left: 0;
@@ -392,7 +384,7 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
#topactions .create-narrow { display: block; }
#topactions input[type="submit"], #topactions input.button {
- min-width: 2em;
+ min-width: 1.5em;
}
div#header h1 {
commit 4613a87ceaa7e0011a88bd5f29146e883c92212a
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Thu Dec 19 13:24:14 2019 -0600
Fix padding-top on not-logged-in message
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;
}
commit 116d2df1a724997ff1ea0c08bffeac7ca0f620d1
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Thu Dec 19 15:25:49 2019 -0600
Set max-width for subject line only when needed
For very large browser windows, statically setting max-width makes
the subject wrap when there is still sufficient space left. This
commit sets max-width for the subject line only once available
space including the #page-menu is <= 60% of the total browser
window.
diff --git a/share/html/NoAuth/css/elevator-light/BeforeNav b/share/html/NoAuth/css/elevator-light/BeforeNav
index 2f7959f3d0..a2ec3e6fb6 100644
--- a/share/html/NoAuth/css/elevator-light/BeforeNav
+++ b/share/html/NoAuth/css/elevator-light/BeforeNav
@@ -135,6 +135,26 @@ var rebalanceOverflowMenu = function (menuId, overflowId, withLogo) {
overflowMenu.removeClass('has-overflow');
}
}
+
+ // we need to be able to set the max-width for the ticket subject
+ // but only if the available space is less than 60%.
+ // for very large screens setting max-width to a static value is problematic
+ // since the subject will end up overflowing when it doesn't need to.
+ // since we're building the page-menu with superfish based on the size of the
+ // subject, we have to calculate available space here to set max-width.
+ var pageMenuWidth = jQuery('#page-menu').width() + rebalanceOverflowBuffer;
+ var windowWidth = jQuery(window).width();
+ var availablePercentage = 100 - (( pageMenuWidth / windowWidth ) * 100);
+
+ if (availablePercentage <= 60) {
+ if (windowWidth > 600) {
+ jQuery('div#header h1').css('max-width', '60%');
+ }
+ else {
+ // squeeze the space down a little more for windows smaller than 600.
+ jQuery('div#header h1').css('max-width', '70%');
+ }
+ }
};
jQuery(function() {
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index c3f65e4bdc..4e07949db6 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -146,13 +146,6 @@ div#header h1 {
font-size: 1.4em;
white-space: break-spaces;
overflow: visible;
- max-width: 60%;
-}
-
- at media (max-width: 600px) { /* less than 600 */
- div#header h1 {
- max-width: 70%;
- }
}
h1 {
-----------------------------------------------------------------------
More information about the rt-commit
mailing list