From 7d2d6e2bf26f31bec53b627a401a181052c55dd8 Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Thu, 24 Nov 2022 13:04:59 +0000 Subject: [PATCH] [FIX] website: fix navbar position and alignment options This commit fixes several bugs with the navbar and the header templates: - The "right" alignment options didn't work with most headers. This was due to a missing CSS rule. - The "right/left" alignment option was reversed with the "vertical" header template. - The navbar collapse style was broken with the "Hamburger Full" header template. - This commit hides the alignment options in cases where they have no effect ("Hamburger Full" or "Magazine" header template + not "off-canvas"). It also changes the options label to "Mobile Alignment" when the alignment only impacts the mobile view (since this commit => [1], the "alignment" option no longer only impacts the mobile view, depending on the templates, it can also impact the "desktop" view). - The text section of the "Magazine" header template had no background color (It was transparent after scrolling the page). - The "off-canvas" navbar was not positioned correctly with several header templates (e.g. "Boxed" header template). [1]: https://github.com/odoo/odoo/commit/2a1aa808e939eeaa3caec6a1a82e19f023f1d010 opw-2951315 closes odoo/odoo#117237 X-original-commit: ca621a292c659f60dd8fdf19a7e77a52f05742c0 Signed-off-by: Quentin Smetz (qsm) --- addons/website/i18n/website.pot | 7 +++++ .../static/src/js/editor/snippets.options.js | 26 +++++++++++++++++++ addons/website/static/src/scss/website.scss | 24 +++++++++++------ addons/website/views/website_templates.xml | 2 +- 4 files changed, 50 insertions(+), 9 deletions(-) diff --git a/addons/website/i18n/website.pot b/addons/website/i18n/website.pot index 20d7991f896..d20061741b9 100644 --- a/addons/website/i18n/website.pot +++ b/addons/website/i18n/website.pot @@ -6104,6 +6104,13 @@ msgstr "" #. odoo-javascript #: code:addons/website/static/src/js/editor/snippets.options.js:0 #, python-format +msgid "Mobile Alignment" +msgstr "" + +#. module: website +#. openerp-web +#: code:addons/website/static/src/js/editor/snippets.options.js:0 +#, python-format msgid "Mobile menu" msgstr "" diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 8df8c26b71c..61cb0b83315 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -2226,6 +2226,24 @@ options.registry.HeaderNavbar = options.Class.extend({ : _t("Mobile menu"); }, + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @private + */ + async updateUI() { + await this._super(...arguments); + // For all header templates except those in the following array, change + // the label of the option to "Mobile Alignment" (instead of + // "Alignment") because it only impacts the mobile view. + if (!["'default'", "'hamburger'", "'sidebar'"].includes(weUtils.getCSSVariableValue('header-template'))) { + const alignmentOptionTitleEl = this.el.querySelector('[data-name="header_alignment_opt"] we-title'); + alignmentOptionTitleEl.textContent = _t("Mobile Alignment"); + } + }, + //-------------------------------------------------------------------------- // Private //-------------------------------------------------------------------------- @@ -2246,6 +2264,14 @@ options.registry.HeaderNavbar = options.Class.extend({ return !weUtils.getCSSVariableValue('header-template').includes('hamburger'); } } + if (widgetName === 'header_alignment_opt') { + if (!this.$target[0].querySelector('.o_offcanvas_menu_toggler')) { + // If mobile menu is "Default", hides the alignment option for + // "hamburger full" and "magazine" header templates. + return !["'hamburger-full'", "'magazine'"].includes(weUtils.getCSSVariableValue('header-template')); + } + return true; + } return this._super(...arguments); }, }); diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index 62ec3397f5c..e214486920a 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -915,14 +915,17 @@ header { #top_menu_container { flex-direction: inherit; } - @if $-hamburger-center { - .collapsing, .show { - #top_menu { - @if not $-off-canvas-hamburger { + + .collapsing, .show { + #top_menu { + @if $-hamburger-center { + @if not $-off-canvas-hamburger and not o-website-value('header-template') == 'magazine' { padding-top: 15vh; padding-bottom: 15vh; } text-align: center !important; + } @else if $-hamburger-right { + text-align: right; } } } @@ -949,11 +952,8 @@ header { #top_menu_collapse { &.collapsing, &.show { - // Note: position relatively to the header instead of the viewport - // because fixed position cannot work inside an element whose CSS - // transform is different to none, which the header element is - // because of header effects. @include o-position-absolute(0, 0, 0, 0); + position: fixed; z-index: $zindex-sticky; height: 100vh; max-height: 100vh; @@ -996,6 +996,7 @@ header { @if $-hamburger-center { width: 100%; max-width: none; + text-align: center !important; } @else { max-width: 560px; text-align: left !important; @@ -1061,6 +1062,13 @@ header { display: none; } } + @if o-website-value('header-template') == 'vertical' { + .oe_structure_solo { + // Hide the "oe_structure_solo" because it is outside the + // menu when the off-canvas menu is open. + display: none; + } + } } &.collapsing #top_menu { @if $-hamburger-center { diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml index 3c973c0a758..4aaaebb54a8 100644 --- a/addons/website/views/website_templates.xml +++ b/addons/website/views/website_templates.xml @@ -1257,7 +1257,7 @@