[Rt-commit] rt branch, 4.6/fix-subject-overflow, created. rt-4.4.4-575-gcfdff464bf
? sunnavy
sunnavy at bestpractical.com
Thu Dec 26 19:19:02 EST 2019
The branch, 4.6/fix-subject-overflow has been created
at cfdff464bf19532008a722d3ec060cc0b22f28ec (commit)
- Log -----------------------------------------------------------------
commit c3e6e39cef2dd3cc3e85326e6f99b11b3267776f
Author: sunnavy <sunnavy at bestpractical.com>
Date: Thu Dec 26 08:52:33 2019 +0800
Support arbitrary height of #header to show long wrapped subject
This commit doesn't fix the possible text overlap of subject and page
menu, it mainly supplies a good base for it.
To not hardcode height of "#header", we couldn't hardcode its parent
"#rt-header-container" either, to keep the box shadow effect of the
first row("#app-nav", "#topactions", etc.), corresponding setting is
moved to "#quickbar".
For short subjects, the only visible change is the whole header part of
the page is a tiny bit denser vertically(about 8px), which is an extra
small tweak.
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index f629171c55..21142d12c4 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -4,17 +4,8 @@ html {
font-size: 13px;
}
-div#rt-header-container {
- padding: 5px 5px 5px 5px;
- box-shadow: 0px 3px 6px #70899929;
- height: 3em;
-}
-
div#body {
padding: 0 2.5em;
- margin-top: 4em;
- margin-right: 0;
- margin-bottom: 0em;
background: #fff;
z-index: 1;
}
@@ -124,30 +115,21 @@ div#quickbar {
padding-top: 1em;
padding-left: 1em;
padding-bottom: 0.5em;
- height: 1em;
+ height: 3em;
+ box-shadow: 0px 3px 6px #70899929;
}
div#header {
- position: absolute;
- top: 3.5em;
- left: 0;
- right: 0;
- height: 3.2em;
+ margin-top: 1em;
border-bottom-color: #547CCC;
border-bottom-width: 2px;
border-bottom-style: solid;
}
div#header h1 {
- position: absolute;
- left: 2em;
- right: 20em;
- top: 0.5em;
- height: 1.4em;
font-size: 1.4em;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ padding-left: 2em;
+ padding-top: 5px;
}
h1 {
diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index abf6b798d8..8277ea1f4d 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -378,10 +378,6 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
#topactions form {
margin-left: 0.5em;
}
-
- div#header h1 {
- right: 10em;
- }
}
@media (max-width: 600px) {
@@ -392,8 +388,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;
- }
}
commit 27f39dc6d3b61c78776a4f04415572c078bbe8e8
Author: sunnavy <sunnavy at bestpractical.com>
Date: Thu Dec 26 05:57:39 2019 +0800
Drop withLogo arg from rebalanceOverflowMenu
Logo is always in #app-nav, it's unnecessary to use an extra arg for it.
diff --git a/share/html/NoAuth/css/elevator-light/BeforeNav b/share/html/NoAuth/css/elevator-light/BeforeNav
index de88edfe20..862341eb0d 100644
--- a/share/html/NoAuth/css/elevator-light/BeforeNav
+++ b/share/html/NoAuth/css/elevator-light/BeforeNav
@@ -59,17 +59,14 @@ $page_overflow->child(will_be_deleted => raw_html => '');
<script type="text/javascript">
var rebalanceOverflowBuffer = 30;
-var rebalanceOverflowMenu = function (menuId, overflowId, withLogo) {
+var rebalanceOverflowMenu = function (menuId, overflowId) {
var toplevelMenu = jQuery(menuId);
var overflowMenu = jQuery(overflowId);
var availableWidth = jQuery(window).width();
- if (withLogo) {
- availableWidth -= jQuery('#logo').width();
- }
if ( menuId === '#app-nav' ) {
- availableWidth -= jQuery('#topactions').width();
+ availableWidth -= jQuery('#topactions').width() + jQuery('#logo').width();;
}
availableWidth -= rebalanceOverflowBuffer;
@@ -146,17 +143,17 @@ jQuery(function() {
jQuery('#li-overflow').children('ul').css('width', '12em');
jQuery('#li-page-overflow').children('ul').css('width', '12em');
- rebalanceOverflowMenu('#app-nav', '#li-overflow', true);
- rebalanceOverflowMenu('#page-menu', '#li-page-overflow', false);
+ rebalanceOverflowMenu('#app-nav', '#li-overflow');
+ rebalanceOverflowMenu('#page-menu', '#li-page-overflow');
jQuery(window).resize(function () {
- rebalanceOverflowMenu('#app-nav', '#li-overflow', true);
- rebalanceOverflowMenu('#page-menu', '#li-page-overflow', false);
+ rebalanceOverflowMenu('#app-nav', '#li-overflow');
+ rebalanceOverflowMenu('#page-menu', '#li-page-overflow');
});
});
jQuery('#logo img').on('load', function () {
- rebalanceOverflowMenu('#app-nav', '#li-overflow', true);
+ rebalanceOverflowMenu('#app-nav', '#li-overflow');
});
</script>
commit cfdff464bf19532008a722d3ec060cc0b22f28ec
Author: sunnavy <sunnavy at bestpractical.com>
Date: Thu Dec 26 05:45:17 2019 +0800
Dynamically adjust width for subject and page menu
The goal is to use available space as much as we can. The tricky thing
is both subject and page menu could be too wide. To handle cases like
that, first we let subject take up space it needs, and then let menu
take up left space. If the left space is too small, force subject/menu
width to 0.6/0.4 layout.
Note that we need subject to be "inline-block" so .width() could return
the real space it takes.
diff --git a/share/html/NoAuth/css/elevator-light/BeforeNav b/share/html/NoAuth/css/elevator-light/BeforeNav
index 862341eb0d..a4b88b0a3d 100644
--- a/share/html/NoAuth/css/elevator-light/BeforeNav
+++ b/share/html/NoAuth/css/elevator-light/BeforeNav
@@ -68,6 +68,21 @@ var rebalanceOverflowMenu = function (menuId, overflowId) {
if ( menuId === '#app-nav' ) {
availableWidth -= jQuery('#topactions').width() + jQuery('#logo').width();;
}
+ else if ( menuId === '#page-menu' ) {
+ var fullWidth = availableWidth;
+
+ jQuery('#header h1').css('width', 'auto');
+ var subjectWidth = jQuery('#header h1').width();
+ availableWidth -= subjectWidth;
+
+ // in case subject is too long, set page-menu width to 40%
+ if (availableWidth < fullWidth * 0.4) {
+ availableWidth = fullWidth * 0.4;
+ subjectWidth = fullWidth * 0.6;
+ jQuery('#header h1').css('width', subjectWidth);
+ }
+ }
+
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 21142d12c4..bd25fb273c 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -130,6 +130,7 @@ div#header h1 {
font-size: 1.4em;
padding-left: 2em;
padding-top: 5px;
+ display: inline-block;
}
h1 {
-----------------------------------------------------------------------
More information about the rt-commit
mailing list