[Rt-commit] rt branch, 4.6/fix-subject-overflow, created. rt-4.4.4-575-g69c6a51c8c
? sunnavy
sunnavy at bestpractical.com
Mon Dec 30 14:48:06 EST 2019
The branch, 4.6/fix-subject-overflow has been created
at 69c6a51c8c98c52c71db229602f5beb76d74ed4a (commit)
- Log -----------------------------------------------------------------
commit 11e61b058927c866c75fee2d887c2f781873dc13
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 UI is the same as before.
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index f629171c55..905adffe8c 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -4,17 +4,9 @@ html {
font-size: 13px;
}
-div#rt-header-container {
- padding: 5px 5px 5px 5px;
- box-shadow: 0px 3px 6px #70899929;
- height: 3em;
-}
-
div#body {
+ margin-top: 0.3em;
padding: 0 2.5em;
- margin-top: 4em;
- margin-right: 0;
- margin-bottom: 0em;
background: #fff;
z-index: 1;
}
@@ -124,30 +116,22 @@ div#quickbar {
padding-top: 1em;
padding-left: 1em;
padding-bottom: 0.5em;
- height: 1em;
+ height: 3rem;
+ box-shadow: 0px 3px 6px #70899929;
}
div#header {
- position: absolute;
- top: 3.5em;
- left: 0;
- right: 0;
- height: 3.2em;
+ margin-top: 1em;
+ padding-bottom: 0.2em;
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: 0.2rem;
}
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 1d56219a614930a49bfba1bc1f612b957a2c9459
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 69c6a51c8c98c52c71db229602f5beb76d74ed4a
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 905adffe8c..6bfc6370c6 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -132,6 +132,7 @@ div#header h1 {
font-size: 1.4em;
padding-left: 2em;
padding-top: 0.2rem;
+ display: inline-block;
}
h1 {
-----------------------------------------------------------------------
More information about the rt-commit
mailing list