From 1b0f165a2f979174ec0c9a71afa7751f1ef07aa6 Mon Sep 17 00:00:00 2001 From: Romeo Fragomeli Date: Mon, 27 Sep 2021 13:28:01 +0000 Subject: [PATCH] [FIX] mail: restore the scroll behaviour of control panel on Mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Given that we have a viewport of 320px and, to simplify the explanation, we discard the height of the
(aka. the top navbar). Since the refactoring of Discuss [1], a global rule was added to the '.o_action_manager' to allow the flex to shrink the discussion's list in Discuss on Mobile. But this rule change the box sizing of '.o_action_manager' as now it takes the minimum size (e.g. before 3000px became now 320px +/- the height of the viewport). Therefore a limit for the sticky-scroll behaviour of control panel is set at the end of the height of the element. Then when the viewport goes outside this limit the sticky doesn't work anymore until the viewport returns before this limit. (e.g. <= 320px ok, > 320px ko). The fix is to change the flex basis of the '.o_Discuss_notificationList' to be 0 which avoids to alter the global '.o_action_manager' and scopes rules to Discuss' specific classes. DOM before this commit: ┌───────────────────────────────────────────────────────┐ │ '.o_action_manager' ▲ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ELEMENT HEIGHT │ │ │ = 'VIEWPORT' │ │ │ 320px │ │ │ ┌────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ Control Panel │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────┘ ▼ │ │ - - - - - - - - LIMIT OF STICKY ELEMENT - - - - - - - │ <- 320px │ ▲ │ │ │ │ │ OVERFLOW │ │ │ VISIBLE │ │ │ │ │ │ ▼ │ └───────────────────────────────────────────────────────┘ DOM after this commit: ┌───────────────────────────────────────────────────────┐ │ '.o_action_manager' ▲ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ELEMENT HEIGHT │ │ <- 320px │ >= 'VIEWPORT' │ │ │ 3000px │ │ │ ┌────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ Control Panel │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────┘ ▼ │ └───────────────────────────────────────────────────────┘ Steps to reproduce: * Open Odoo on Mobile * Go to a Kanban view with list height at least twice the screen height * Scroll to the end of the page (the control panel is hidden) * Scroll a bit upper => BUG the control panel is not visible until we scroll in the 'box' of the '.o_action_manager' Note this behaviour is maybe related to an issue from CSS3 [2] from MDN [3] Ref: [1] odoo/odoo@3fea5b2136627c1d7e83b2a5e111952fe3eb10a1 [2] Issue 865 on https://github.com/w3c/csswg-drafts [3] https://developer.mozilla.org/en-US/docs/Web/CSS/position closes odoo/odoo#77660 X-original-commit: fdcfaa7b72a4af0d0c3e308e299638fc8fa19bdb Signed-off-by: Adrien Dieudonné (adr) Signed-off-by: Pierre Paridans Signed-off-by: rfr-odoo --- addons/mail/static/src/components/discuss/discuss.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/addons/mail/static/src/components/discuss/discuss.scss b/addons/mail/static/src/components/discuss/discuss.scss index d57bf71ecda..ba4286c3a6d 100644 --- a/addons/mail/static/src/components/discuss/discuss.scss +++ b/addons/mail/static/src/components/discuss/discuss.scss @@ -2,11 +2,6 @@ // Layout // ------------------------------------------------------------------ -.o_action_manager { - // bug with scrollable inside discuss mobile without this... - min-height: 0; -} - .o-autogrow { flex: 1 1 auto; } @@ -87,7 +82,7 @@ } .o_Discuss_thread { - flex: 1 1 auto; + flex: 1 1 0; min-width: 0; &.o-mobile { @@ -97,7 +92,7 @@ .o_Discuss_notificationList { width: map-get($sizes, 100); - flex: 1 1 auto; + flex: 1 1 0; } // ------------------------------------------------------------------