From 2e767ffefaa975c31b8f225b1750f6d414ac1ecd Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 5 Oct 2020 14:53:46 +0000 Subject: [PATCH] [FIX] website: improve menu loading effect Long story short: that menu loading effect was introduced with version 12.0 for a technical reason: allow menu items to collapse into a dropdown when there are too many. For that, during loading their height is forced to 0 and they are hidden so that they do not make the header grow when going on multiple lines. Since 13.0, the lazy loading made this effect to be too delayed... but fixing that would make another flickering appear due to the logo image loading. This thus cannot be fixed at the moment. However, since 14.0 there are several menu templates and some make the effect look really ugly. Like the vertical header which has a tiny empty header which then grow with the menu items on loading. To mitigate the effect, this commit replaces the "height: 0" trick by forcing the menu items on one line during loading. They however still stay hidden during this time to avoid the logo menu flickering, for now. Part of https://github.com/odoo/odoo/pull/59136 closes odoo/odoo#59148 X-original-commit: 1edf40e76be4a4595849c4c9dab692984e372c46 Signed-off-by: Quentin Smetz (qsm) --- addons/website/static/src/scss/website.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index 7dc452e6a07..75ad08b89fb 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -186,6 +186,9 @@ $-seen-urls: (); font-family: $o-theme-navbar-font; } + .navbar-collapse { + min-width: 0; // Allows it to shrink during loading + } .nav-item { transition: opacity 1000ms ease 0s; } @@ -195,10 +198,13 @@ $-seen-urls: (); // the header does not flicker during loading. white-space: nowrap; } - .o_menu_loading .nav-item { - height: 0 !important; + .o_menu_loading { + flex-wrap: nowrap !important; overflow: hidden !important; - opacity: 0 !important; + + .nav-item { + opacity: 0 !important; + } } }