[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) <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
@@ -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 ""
|
||||
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1257,7 +1257,7 @@
|
||||
<template id="template_header_magazine_oe_structure_header_magazine_1" inherit_id="website.template_header_magazine" name="Template Header Magazine (oe_structure_header_magazine_1)">
|
||||
<xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_magazine_1']" position="replace">
|
||||
<div class="oe_structure oe_structure_solo" id="oe_structure_header_magazine_1">
|
||||
<section class="s_text_block" data-snippet="s_text_block" data-name="Text">
|
||||
<section class="s_text_block o_cc o_cc1" data-snippet="s_text_block" data-name="Text">
|
||||
<div class="container">
|
||||
<div class="row align-items-center text-center text-md-start">
|
||||
<div class="col-lg-8 pt16">
|
||||
|
||||
Reference in New Issue
Block a user