[FIX] web: search panel: long filter on mobile
Prior to this commit, when a filter or a dropdown item had a long name, the layout was broken on mobile, the item went out of the viewport and wasn't readable. This commit fixes this issue. task-3378207 Part of task-3326263 closes odoo/odoo#126071 X-original-commit: 96d1edcdba78af3572c3395867e561c0eb3d5054 Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="web.CustomFavoriteItem" owl="1" >
|
||||
<AccordionItem class="'o_add_favorite'" description="'Save current search'">
|
||||
<AccordionItem class="'o_add_favorite text-truncate'" description="'Save current search'">
|
||||
<div class="px-3 py-2">
|
||||
<input type="text"
|
||||
class="o_input"
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="web.CustomGroupByItem" owl="1">
|
||||
<AccordionItem class="'o_add_custom_group_menu'" description="'Add Custom Group'">
|
||||
<AccordionItem class="'o_add_custom_group_menu text-truncate'" description="'Add Custom Group'">
|
||||
<div class="px-3 py-2">
|
||||
<select class="o_input" t-model="state.fieldName">
|
||||
<select class="pe-3 text-truncate o_input" t-model="state.fieldName">
|
||||
<option t-foreach="props.fields" t-as="field" t-key="field.name"
|
||||
t-att-value="field.name"
|
||||
t-esc="field.string"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<t t-name="web.SearchBarMenu" owl="1">
|
||||
<Dropdown togglerClass="'o_searchview_dropdown_toggler d-print-none btn btn-outline-secondary o-no-caret rounded-start-0 h-100'"
|
||||
menuClass="'o_search_bar_menu d-flex flex-wrap flex-lg-nowrap mt-2 py-3'"
|
||||
menuClass="'o_search_bar_menu d-flex flex-wrap flex-lg-nowrap w-100 w-md-auto mx-n3 mx-md-auto mt-2 py-3'"
|
||||
position="'bottom-end'"
|
||||
t-if="this.env.searchModel.searchMenuTypes.size">
|
||||
<t t-set-slot="toggler" t-slot-scope="scope">
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="dropdown-divider" role="separator"/>
|
||||
</t>
|
||||
<t t-if="item.options">
|
||||
<AccordionItem description="item.description" selected="item.isActive">
|
||||
<AccordionItem class="'text-truncate'" description="item.description" selected="item.isActive">
|
||||
<t t-set="subGroup" t-value="null"/>
|
||||
<t t-foreach="item.options" t-as="option" t-key="option.id">
|
||||
<t t-if="subGroup !== null and subGroup !== option.groupNumber">
|
||||
@@ -39,7 +39,7 @@
|
||||
</AccordionItem>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
|
||||
<SearchDropdownItem class="{ 'o_menu_item text-truncate': true, selected: item.isActive }"
|
||||
checked="item.isActive"
|
||||
parentClosingMode="'none'"
|
||||
t-esc="item.description"
|
||||
@@ -67,7 +67,7 @@
|
||||
<div class="dropdown-divider" role="separator"/>
|
||||
</t>
|
||||
<t t-if="item.options">
|
||||
<AccordionItem description="item.description" selected="item.isActive">
|
||||
<AccordionItem class="'text-truncate'" description="item.description" selected="item.isActive">
|
||||
<t t-set="subGroup" t-value="null"/>
|
||||
<t t-foreach="item.options" t-as="option" t-key="option.id">
|
||||
<t t-if="subGroup !== null and subGroup !== option.groupNumber">
|
||||
@@ -84,7 +84,7 @@
|
||||
</AccordionItem>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
|
||||
<SearchDropdownItem class="{ 'o_menu_item text-truncate': true, selected: item.isActive }"
|
||||
checked="item.isActive"
|
||||
parentClosingMode="'none'"
|
||||
t-esc="item.description"
|
||||
@@ -107,7 +107,7 @@
|
||||
<h5 class="o_dropdown_title d-inline">Comparison</h5>
|
||||
</div>
|
||||
<t t-foreach="comparisonItems" t-as="item" t-key="item.id">
|
||||
<SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
|
||||
<SearchDropdownItem class="{ 'o_menu_item text-truncate': true, selected: item.isActive }"
|
||||
checked="item.isActive"
|
||||
parentClosingMode="'none'"
|
||||
t-esc="item.description"
|
||||
@@ -129,13 +129,13 @@
|
||||
<div role="separator" class="dropdown-divider"/>
|
||||
</t>
|
||||
<t t-if="item.type ==='favorite'">
|
||||
<SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
|
||||
<SearchDropdownItem class="{ 'o_menu_item text-truncate': true, selected: item.isActive }"
|
||||
checked="item.isActive"
|
||||
parentClosingMode="'none'"
|
||||
onSelected="() => this.onFavoriteSelected(item.id)"
|
||||
>
|
||||
<span class="d-flex p-0 align-items-center justify-content-between">
|
||||
<t t-esc="item.description"/>
|
||||
<span t-out="item.description" class="text-truncate"/>
|
||||
<i class="ms-1 o_icon_right fa fa-trash-o"
|
||||
title="Delete item"
|
||||
t-on-click.stop="() => this.openConfirmationDialog(item.id)"
|
||||
|
||||
Reference in New Issue
Block a user