[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:
Brieuc-brd
2023-06-23 16:35:25 +02:00
parent 4ae28ba747
commit 0fba13ed0f
3 changed files with 11 additions and 11 deletions
@@ -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)"