[Rt-commit] rt branch, 4.6/fix-subject-overflow, created. rt-4.4.4-701-g778e489fe2
? sunnavy
sunnavy at bestpractical.com
Tue Jan 14 09:30:02 EST 2020
The branch, 4.6/fix-subject-overflow has been created
at 778e489fe2f5f167162841c9c74dc25bc7c4cd63 (commit)
- Log -----------------------------------------------------------------
commit cfcf5c30422074c40f9d069066d8e6ae1e7be4b9
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..32fdc20671 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -4,15 +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 {
padding: 0 2.5em;
- margin-top: 4em;
+ margin-top: 0.3em;
margin-right: 0;
margin-bottom: 0em;
background: #fff;
@@ -124,30 +118,21 @@ 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: 1.2em;
+ 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;
}
h1 {
diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index 9cf4bf4e54..523d8c98c6 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -383,10 +383,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) {
@@ -397,8 +393,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 4724dc8ba6da4dbcb57e625de256b611d346bb79
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/AfterMenus b/share/html/NoAuth/css/elevator-light/AfterMenus
index bae2c52c2f..fec221b478 100644
--- a/share/html/NoAuth/css/elevator-light/AfterMenus
+++ b/share/html/NoAuth/css/elevator-light/AfterMenus
@@ -61,8 +61,8 @@ var initMenus = function() {
jQuery('#li-overflow-will_be_deleted').remove();
jQuery('#li-page-overflow-will_be_deleted').remove();
- rebalanceOverflowMenu('#app-nav', '#li-overflow', true);
- rebalanceOverflowMenu('#page-menu', '#li-page-overflow', false);
+ rebalanceOverflowMenu('#app-nav', '#li-overflow');
+ rebalanceOverflowMenu('#page-menu', '#li-page-overflow');
};
// If everything is loaded, init NOW. Otherwise, defer to DOM ready.
diff --git a/share/html/NoAuth/css/elevator-light/BeforeNav b/share/html/NoAuth/css/elevator-light/BeforeNav
index b22dea7391..429a33bdbf 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;
@@ -142,13 +139,13 @@ var rebalanceOverflowMenu = function (menuId, overflowId, withLogo) {
jQuery(function() {
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 5e2c5b4874f7f2d4a11f9ac9f1c1a555d44a13e7
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 429a33bdbf..c63a38516c 100644
--- a/share/html/NoAuth/css/elevator-light/BeforeNav
+++ b/share/html/NoAuth/css/elevator-light/BeforeNav
@@ -68,6 +68,23 @@ var rebalanceOverflowMenu = function (menuId, overflowId) {
if ( menuId === '#app-nav' ) {
availableWidth -= jQuery('#topactions').width() + jQuery('#logo').width();;
}
+ else if ( menuId === '#page-menu' ) {
+ availableWidth -= parseFloat(jQuery('#header h1').css('padding-left'));
+ availableWidth -= parseFloat(jQuery('#page-navigation').css('right'));
+ 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 32fdc20671..99cb804853 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -133,6 +133,7 @@ div#header {
div#header h1 {
font-size: 1.4em;
padding-left: 2em;
+ display: inline-block;
}
h1 {
commit 778e489fe2f5f167162841c9c74dc25bc7c4cd63
Author: sunnavy <sunnavy at bestpractical.com>
Date: Sat Jan 11 06:22:32 2020 +0800
Reduce rebalanceOverflowBuffer as we have more accurate available width now
diff --git a/share/html/NoAuth/css/elevator-light/BeforeNav b/share/html/NoAuth/css/elevator-light/BeforeNav
index c63a38516c..b0465b4c26 100644
--- a/share/html/NoAuth/css/elevator-light/BeforeNav
+++ b/share/html/NoAuth/css/elevator-light/BeforeNav
@@ -57,7 +57,7 @@ my $page_overflow = PageMenu->child( overflow => title => loc('More'), sort_orde
$page_overflow->child(will_be_deleted => raw_html => '');
</%INIT>
<script type="text/javascript">
-var rebalanceOverflowBuffer = 30;
+var rebalanceOverflowBuffer = 10;
var rebalanceOverflowMenu = function (menuId, overflowId) {
var toplevelMenu = jQuery(menuId);
-----------------------------------------------------------------------
More information about the rt-commit
mailing list