[Rt-commit] rt branch, 4.6/fix-subject-overflow, created. rt-4.4.4-575-gd39b960629
? sunnavy
sunnavy at bestpractical.com
Fri Jan 10 16:07:16 EST 2020
The branch, 4.6/fix-subject-overflow has been created
at d39b960629065c6835e257c0cc208a4acd138c60 (commit)
- Log -----------------------------------------------------------------
commit ab28c6be5641584421930f3a4033c11a1f2284df
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 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 d86ebed0b97f0317a4a8be45689667e39cc81ad6
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 db37a13bd2..fc660c3924 100644
--- a/share/html/NoAuth/css/elevator-light/AfterMenus
+++ b/share/html/NoAuth/css/elevator-light/AfterMenus
@@ -66,8 +66,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 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 d39b960629065c6835e257c0cc208a4acd138c60
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..4ff96c72b6 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 {
-----------------------------------------------------------------------
More information about the rt-commit
mailing list