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

[IMP] website: relative dropdown in offcanvas menu

Browse Source 
Prior to this commit, dropdown menus floated in offcanvas menus. This
can create an UX issue on mobile when you want to click/tap on a
link that is behind the open dropdown menu.

To fix that, this commit removes the floating style and lets the
dropdown menu extend below the parent button.

task-3060986

Part-of: odoo/odoo#119650
This commit is contained in:
Brieuc-brd
2023-10-25 11:37:12 +00:00
committed by qsm-odoo
parent e5380a8e40
commit d8ea618732
2 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/scss/website.scss
+5
View File
@@ -2408,3 +2408,8 @@ input[value*="data-oe-translation-initial-sha"] {
.o_table tr {
border-color: $table-border-color;
}
// Disables the offset on dropdown to match relative position in mobile/offcanvas.
.o_dropdown_without_offset {
transform: none !important;
}
addons/website/views/website_templates.xml
+32 -2
View File
@@ -13,7 +13,7 @@
</a>
</li>
<li t-elif="show_dropdown" t-attf-class="#{item_class or ''} dropdown #{submenu.is_mega_menu and 'position-static'}">
<a t-attf-class="#{link_class or ''} dropdown-toggle #{submenu.is_mega_menu and 'o_mega_menu_toggle'} #{submenu._is_active() and 'active'}"
<a t-attf-class="#{link_class or ''} dropdown-toggle #{submenu.is_mega_menu and 'o_mega_menu_toggle'} #{submenu._is_active() and 'active'} #{dropdown_toggler_classes}"
data-bs-toggle="dropdown" href="#" t-att-data-bs-display="'static' if submenu.is_mega_menu else None">
<span t-field="submenu.name"/>
</a>
@@ -21,7 +21,7 @@
t-attf-class="dropdown-menu o_mega_menu #{submenu.mega_menu_classes}"
data-name="Mega Menu"
t-field="submenu.mega_menu_content"/>
<ul t-else="" class="dropdown-menu" role="menu">
<ul t-else="" t-attf-class="dropdown-menu #{dropdown_menu_classes}" role="menu">
<t t-foreach="submenu.child_id" t-as="submenu">
<t t-call="website.submenu">
<t t-set="item_class" t-value="None"/>
@@ -344,6 +344,8 @@
<t t-call="website.submenu">
<t t-set="item_class" t-valuef="nav-item"/>
<t t-set="link_class" t-valuef="nav-link"/>
<t t-set="dropdown_toggler_classes" t-valuef="d-flex justify-content-between align-items-center"/>
<t t-set="dropdown_menu_classes" t-valuef="position-relative rounded-0 o_dropdown_without_offset"/>
</t>
</t>
</t>
@@ -399,6 +401,12 @@
<xpath expr="//t[@t-call='website.header_social_links_no_color']" position="inside">
<t t-set="_div_class" t-valuef="mt-2 border-top pt-2 text-center o_border_contrast"/>
</xpath>
<xpath expr="//t[@t-set='dropdown_toggler_classes']" position="attributes">
<attribute name="t-valuef"/>
</xpath>
<xpath expr="//t[@t-call='website.submenu']//t[@t-set='dropdown_menu_classes']" position="attributes">
<attribute name="t-valuef" add="text-center" separator=" "/>
</xpath>
</template>
<template id="template_header_mobile_align_right" inherit_id="website.template_header_mobile" active="False">
@@ -411,6 +419,12 @@
<xpath expr="//t[@t-call='website.header_social_links_no_color']" position="inside">
<t t-set="_div_class" t-valuef="mt-2 border-top pt-2 text-end o_border_contrast"/>
</xpath>
<xpath expr="//t[@t-set='dropdown_toggler_classes']" position="attributes">
<attribute name="t-valuef"/>
</xpath>
<xpath expr="//t[@t-call='website.submenu']//t[@t-set='dropdown_menu_classes']" position="attributes">
<attribute name="t-valuef" add="text-end" separator=" "/>
</xpath>
</template>
<!-- "Default" template -->
@@ -540,6 +554,8 @@
<t t-call="website.submenu">
<t t-set="item_class" t-valuef="nav-item"/>
<t t-set="link_class" t-valuef="nav-link"/>
<t t-set="dropdown_toggler_classes" t-valuef="d-flex justify-content-between align-items-center"/>
<t t-set="dropdown_menu_classes" t-valuef="position-relative rounded-0 o_dropdown_without_offset"/>
</t>
</t>
</t>
@@ -1289,6 +1305,8 @@
<t t-call="website.submenu">
<t t-set="item_class" t-valuef="nav-item"/>
<t t-set="link_class" t-valuef="nav-link"/>
<t t-set="dropdown_toggler_classes" t-valuef="d-flex justify-content-between align-items-center"/>
<t t-set="dropdown_menu_classes" t-valuef="position-relative rounded-0 o_dropdown_without_offset"/>
</t>
</t>
</t>
@@ -1351,6 +1369,12 @@
<xpath expr="//t[@t-call='website.header_social_links_no_color']" position="inside">
<t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast text-center"/>
</xpath>
<xpath expr="//t[@t-set='dropdown_toggler_classes']" position="attributes">
<attribute name="t-valuef"/>
</xpath>
<xpath expr="//t[@t-call='website.submenu']//t[@t-set='dropdown_menu_classes']" position="attributes">
<attribute name="t-valuef" add="text-center" separator=" "/>
</xpath>
</template>
<template id="template_header_sidebar_align_right" inherit_id="website.template_header_sidebar" active="False">
@@ -1363,6 +1387,12 @@
<xpath expr="//t[@t-call='website.header_social_links_no_color']" position="inside">
<t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast text-end"/>
</xpath>
<xpath expr="//t[@t-set='dropdown_toggler_classes']" position="attributes">
<attribute name="t-valuef"/>
</xpath>
<xpath expr="//t[@t-call='website.submenu']//t[@t-set='dropdown_menu_classes']" position="attributes">
<attribute name="t-valuef" add="text-end" separator=" "/>
</xpath>
</template>
<!-- "Rounded box" template -->