[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