[Rt-commit] rt branch, 4.6/fix-menu-overflows, created. rt-4.4.4-567-g6395fa6b93
Blaine Motsinger
blaine at bestpractical.com
Thu Dec 26 11:34:17 EST 2019
The branch, 4.6/fix-menu-overflows has been created
at 6395fa6b93e847f134a971f83d3bf23f9ac7760c (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 6395fa6b93e847f134a971f83d3bf23f9ac7760c
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/html/NoAuth/css/elevator-light/BeforeNav b/share/html/NoAuth/css/elevator-light/BeforeNav
index 2f7959f3d0..23ce4a4df0 100644
--- a/share/html/NoAuth/css/elevator-light/BeforeNav
+++ b/share/html/NoAuth/css/elevator-light/BeforeNav
@@ -74,7 +74,7 @@ var rebalanceOverflowMenu = function (menuId, overflowId, withLogo) {
// adjustments specific to page-navigation
if (menuId === '#page-menu') {
- availableWidth -= jQuery('#header h1').width() + rebalanceOverflowBuffer;
+ availableWidth -= jQuery('#header h1').width() + jQuery('#header h1').offset().left;
}
availableWidth -= rebalanceOverflowBuffer;
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 30ba4b78ed..e069c16897 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 {
@@ -370,10 +371,6 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
#topactions form {
margin-left: 0;
}
-
- div#header h1 {
- right: 10em;
- }
}
@media (max-width: 600px) {
@@ -384,8 +381,4 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
#topactions input[type="submit"], #topactions input.button {
min-width: 2em;
}
-
- div#header h1 {
- right: 5em;
- }
}
-----------------------------------------------------------------------
More information about the rt-commit
mailing list