[Rt-commit] rt branch, 4.6/fix-menu-overflows, created. rt-4.4.4-570-gd5c3a9bc25
Blaine Motsinger
blaine at bestpractical.com
Thu Dec 19 12:07:02 EST 2019
The branch, 4.6/fix-menu-overflows has been created
at d5c3a9bc256123bf2688f6ad009b6f127a7fb927 (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 dfaec645a4a886205294e5d7db6be649eafce5de
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..0c040e5f8d 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,27 @@ 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;
}
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 9d63a7d2dbe2d1ceaad353e2f7a1ec38b122c4dc
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 d5c3a9bc256123bf2688f6ad009b6f127a7fb927
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 0c040e5f8d..7d275fe798 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 {
-----------------------------------------------------------------------
More information about the rt-commit
mailing list