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

[FIX] website_event: tweak mobile filter design

Browse Source 
Prior to this commit, the design of all the `off-canvas filters` was wrong.
It was `list-group` with a `dropdown-item` class on the elements inside.
Also there was a wrong `border-top` class on the `accordion button`,
causing display issues on `hover.

`Aria-control` was also missing from the `categories filters`.

Checkboxes and radio buttons are also added to increases the usability.

task-3626957

Part-of: odoo/odoo#145064
This commit is contained in:
Morgane (morm)
2024-01-25 13:42:40 +00:00
parent b2195a11e9
commit 0efa5bc697
1 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_event/views/event_templates_list.xml
+28 -15
View File
@@ -88,22 +88,26 @@
<t t-foreach="categories" t-as="category">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button border-top collapsed"
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
t-attf-aria-controls="o_wevent_offcanvas_cat_#{category.name}"
t-att-data-bs-target="'.o_wevent_offcanvas_cat_%s' % category.name"
aria-expanded="false">
<t t-out="category.name"/>
</button>
</h2>
<div t-attf-class="o_wevent_offcanvas_cat_#{category.name} accordion-collapse collapse">
<div t-attf-id="o_wevent_offcanvas_cat_#{category.name}" t-attf-class="o_wevent_offcanvas_cat_#{category.name} accordion-collapse collapse">
<div class="accordion-body pt-0">
<ul class="list-group list-group-flush">
<t t-if="category.is_published and category.tag_ids and any(tag.color for tag in category.tag_ids)" t-foreach="category.tag_ids" t-as="tag">
<li t-if="tag.color" class="list-group-item border-0 px-0">
<a t-att-href="'/event?%s' % keep_query('*', tags=str((search_tags - tag).ids if tag in search_tags else (tag | search_tags).ids))"
t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{'active' if tag in search_tags else ''}">
<t t-out="tag.name"/>
class="text-reset">
<div class="form-check">
<input class="form-check-input pe-none" type="checkbox" t-attf-name="#{tag.color}" t-att-checked="tag in search_tags"/>
<label class="form-check-label" t-attf-for="#{tag.color}" t-out="tag.name"/>
</div>
</a>
</li>
</t>
@@ -155,7 +159,7 @@
<xpath expr="//span[hasclass('o_wevent_offcanvas_date')]" position="replace">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button border-top collapsed"
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target=".o_wevent_offcanvas_date"
@@ -170,9 +174,12 @@
<t t-foreach="dates" t-as="date">
<li t-if="date[3] or (date[0] in ('old','upcoming','all'))" class="list-group-item px-0 border-0">
<t t-set="is_active" t-value="searches.get('date') == date[0]"/>
<a t-att-href="keep('/event', date=date[0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{is_active and 'active'}">
<t t-out="date[1]"/>
<span t-if="date[3]" t-out="date[3]" t-attf-class="badge rounded-pill #{is_active and 'text-bg-light' or 'text-bg-primary'}"/>
<a t-att-href="keep('/event', date=date[0])" class="d-flex align-items-center justify-content-between text-reset text-decoration-none">
<div class="form-check flex-basis-100">
<input class="form-check-input pe-none" type="radio" t-attf-name="#{date[1]}" t-att-checked="is_active"/>
<label class="form-check-label" t-attf-for="#{date[1]}" t-out="date[1]"/>
</div>
<span t-if="date[3]" t-out="date[3]" class="badge rounded-pill text-bg-light"/>
</a>
</li>
</t>
@@ -214,7 +221,7 @@
<xpath expr="//span[hasclass('o_wevent_offcanvas_country')]" position="replace">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button border-top collapsed"
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target=".o_wevent_offcanvas_country"
@@ -229,16 +236,22 @@
<li t-foreach="countries" t-as="country" class="list-group-item px-0 border-0">
<t t-if="country['country_id']">
<t t-set="is_active" t-value="searches.get('country') == str(country['country_id'] and country['country_id'][0])"/>
<a t-att-href="keep('/event', country=country['country_id'][0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{is_active and 'active'}">
<t t-out="country['country_id'][1]"/>
<span t-out="country['country_id_count']" t-attf-class="badge rounded-pill ms-auto #{is_active and 'text-bg-light' or 'text-bg-primary'}"/>
<a t-att-href="keep('/event', country=country['country_id'][0])" class="d-flex align-items-center justify-content-between text-reset text-decoration-none">
<div class="form-check flex-basis-100">
<input class="form-check-input pe-none" type="radio" t-attf-name="#{country['country_id'][1]}" t-att-checked="is_active"/>
<label class="form-check-label" t-attf-for="#{country['country_id'][1]}" t-out="country['country_id'][1]"/>
</div>
<span t-out="country['country_id_count']" class="badge rounded-pill text-bg-light ms-auto"/>
</a>
</t>
<t t-else="">
<t t-set="is_active" t-value="searches.get('country') == 'online'"/>
<a t-att-href="keep('/event', country='online')" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{is_active and 'active'}">
<span>Online Events</span>
<span t-out="country['country_id_count']" t-attf-class="badge rounded-pill ms-auto #{is_active and 'text-bg-light' or 'text-bg-primary'}"/>
<a t-att-href="keep('/event', country='online')" class="d-flex align-items-center justify-content-between text-reset text-decoration-none">
<div class="form-check flex-basis-100">
<input class="form-check-input pe-none" type="radio" name="Online Events" t-att-checked="is_active"/>
<label class="form-check-label" for="Online Events">Online Events</label>
</div>
<span t-out="country['country_id_count']" class="badge rounded-pill px-2 text-bg-light ms-auto"/>
</a>
</t>
</li>