pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website: fix language switcher in off-canvas menu

Browse Source 
Since this commit [1], the header language switcher has been moved out
of the header navbar. This created a bug, when the off-canvas option of
the navbar is activated, the language switcher is no longer accessible
on mobile.

As this commit is in stable version, the fix is only in Javascript. It
puts the language switcher back in the navbar when the off-canvas menu
is opened.

A specific case with the "hamburger full" header template, where there
is the same bug with the "call to action" button, is also fixed by this
commit.

This commit also fixes display issues in the off-canvas menu.

[1]: https://github.com/odoo/odoo/commit/2a000e33c5a44ddf0a777b43d8266cc413d8e4e2

opw-2964824

closes odoo/odoo#105504

X-original-commit: b89dbb2e18c4ccebcd72e87758b5d3363ed875b3
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
2022-11-15 18:25:24 +01:00
committed by qsm-odoo
parent 4edbe54456
commit 48ae46cb22
3 changed files with 57 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/content/menu.js
+1
View File
@@ -635,6 +635,7 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({
publicWidget.registry.HeaderMainCollapse = publicWidget.Widget.extend({
selector: 'header#top',
disabledInEditableMode: false,
events: {
'show.bs.collapse #top_menu_collapse': '_onCollapseShow',
'hidden.bs.collapse #top_menu_collapse': '_onCollapseHidden',
addons/website/static/src/scss/website.scss
+11
View File
@@ -973,6 +973,12 @@ header {
} @else {
max-width: 560px;
text-align: left !important;
// Prevent #top_menu from overflowing the page below the
// maximum width. (e.g. if contains an inline language
// switcher with many elements.)
@media (max-width: 560px) {
max-width: 100%;
}
}
min-width: 250px;
margin: 0 !important;
@@ -1023,6 +1029,11 @@ header {
padding-left: .5em;
padding-right: .5em;
}
.js_language_selector .dropdown-toggle {
// Hide the language switcher button because it does not
// make sense to show it if the dropdown is always open.
display: none;
}
}
}
&.collapsing #top_menu {
addons/website/views/website_templates.xml
+45 -42
View File
@@ -298,11 +298,10 @@
<t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-auto"/>
<t t-set="_link_class" t-valuef="nav-link fw-bold"/>
</t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="my-auto ms-lg-2"/>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="nav-item my-auto ms-lg-2"/>
</t>
</t>
</div>
<!-- Call To Action -->
@@ -389,10 +388,10 @@
<t t-set="_link_class" t-valuef="nav-link"/>
<t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-start"/>
</t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="d-block d-sm-none"/>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="nav-item d-block d-sm-none"/>
</t>
</t>
<div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_3"/>
</div>
@@ -529,11 +528,11 @@
<t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-3"/>
<t t-set="_link_class" t-valuef="nav-link fw-bold"/>
</t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="d-block d-lg-none mb-2"/>
<t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="nav-item d-block d-lg-none mb-2"/>
<t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
</t>
</t>
<!-- Call To Action -->
<t t-call="website.placeholder_header_call_to_action">
@@ -760,11 +759,11 @@
<t t-set="link_class" t-valuef="nav-link"/>
</t>
</t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="mb-4 mb-lg-0 align-self-lg-center ms-lg-auto"/>
<t t-set="_dropdown_menu_class" t-valuef="float-lg-end"/>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="nav-item mb-4 mb-lg-0 align-self-lg-center ms-lg-auto"/>
<t t-set="_dropdown_menu_class" t-valuef="float-lg-end"/>
</t>
</t>
</div>
</div>
@@ -844,10 +843,10 @@
<t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-auto"/>
<t t-set="_link_class" t-valuef="nav-link"/>
</t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="my-auto ms-lg-2 align-self-lg-center"/>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="nav-item my-auto ms-lg-2 align-self-lg-center"/>
</t>
</t>
<!-- Call To Action -->
<t t-call="website.placeholder_header_call_to_action">
@@ -944,15 +943,19 @@
<t t-set="link_class" t-valuef="nav-link"/>
</t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="nav-item d-block d-sm-none mb-2"/>
<t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
</t>
<!-- Call To Action (mobile) -->
<t t-call="website.placeholder_header_call_to_action">
<t t-set="_div_classes" t-valuef="nav-item d-block d-lg-none"/>
</t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="d-block d-sm-none mb-2"/>
<t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
</t>
<!-- Call To Action -->
<!-- Call To Action (desktop) -->
<t t-call="website.placeholder_header_call_to_action">
<t t-set="_div_classes" t-valuef="ms-lg-3"/>
<t t-set="_div_classes" t-valuef="ms-3 d-none d-lg-block"/>
</t>
</div>
</t>
@@ -1023,10 +1026,10 @@
<t t-set="link_class" t-valuef="nav-link"/>
</t>
</t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="ms-lg-1 mb-2 mb-lg-0 align-self-lg-center"/>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="nav-item ms-lg-1 mb-2 mb-lg-0 align-self-lg-center"/>
</t>
</t>
</div>
</div>
@@ -1071,10 +1074,10 @@
<t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-auto"/>
<t t-set="_link_class" t-valuef="nav-link"/>
</t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="ms-lg-2"/>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="nav-item ms-lg-2 align-self-lg-center"/>
</t>
</t>
<!-- Call To Action -->
<t t-call="website.placeholder_header_call_to_action">
@@ -1140,10 +1143,10 @@
<t t-set="_item_class" t-valuef="nav-item dropdown"/>
<t t-set="_link_class" t-valuef="nav-link fw-bold ms-lg-3"/>
</t>
</t>
<!-- Call To Action -->
<t t-call="website.placeholder_header_call_to_action">
<t t-set="_div_classes" t-valuef="mx-auto mt-4"/>
<!-- Call To Action -->
<t t-call="website.placeholder_header_call_to_action">
<t t-set="_div_classes" t-valuef="nav-item mt-3 mt-lg-0 ms-lg-3"/>
</t>
</t>
<!-- Social Icons -->
<div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_hamburger_full_1"/>