[IMP] website_event: Improve '/event' UX

Purpose:

Fix a few minor issues with the design and make some light
UX improvments.

Specs:

- In customize menu, show templates should be set as False as templates
  are more of a technical thing anyway.

- In location filter, fix the alignment for the "online" option.

- Fix card design in case "show templates" is True and the event is online

- Make the whole event card clickable

LINKS:

TaskID:2162438
PR: #43856

1 files changed, 66 insertions, 68 deletions

diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index c611173360e..1ae354d6fb0 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -137,7 +137,7 @@
                         </a>
                     </t>
                     <t t-else="">
-                        <a t-att-href="keep('/event', country='online')" t-attf-class="dropdown-item d-flex align-items-center #{searches.get('country') == 'online' and 'active'}">
+                        <a t-att-href="keep('/event', country='online')" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('country') == 'online' and 'active'}">
                             <span>Online Events</span>
                             <span t-esc="country['country_id_count']" class="badge badge-pill badge-primary ml-3"/>
                         </a>
@@ -181,74 +181,72 @@
     </t>
     <!-- List -->
     <div t-foreach="event_ids" t-as="event" t-attf-class=" #{opt_event_size} mb-4">
-        <article t-attf-class="h-100 #{opt_events_list_cards and 'card border-0 shadow-sm'}" itemscope="itemscope" itemtype="http://schema.org/Event">
-            <div class="h-100 row no-gutters">
-                <!-- Header -->
-                <header t-attf-class="overflow-hidden bg-secondary #{opt_events_list_columns and 'col-12 rounded-top' or 'col-sm-4 col-lg-3 rounded-left'} #{(not opt_events_list_cards) and 'rounded shadow'} #{(not opt_events_list_cards and not opt_events_list_columns) and 'rounded-top'}">
-                    <!-- Image + Link -->
-                    <a t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="d-block h-100 w-100">
-                        <t t-call="website.record_cover">
-                            <t t-set="_record" t-value="event"/>
-
-                            <!-- Short Date -->
-                            <div class="o_wevent_event_date position-absolute bg-white shadow-sm">
-                                <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'LLL'}" class="o_wevent_event_month"/>
-                                <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'dd'}" class="o_wevent_event_day"/>
-                            </div>
-                            <!-- Participating -->
-                            <small t-if="event.is_participating" class="o_wevent_participating bg-success">
-                                <i class="fa fa-check mr-2"/>Registered
-                            </small>
-                            <!-- Unpublished -->
-                            <small t-if="not event.website_published" class="o_wevent_unpublished bg-danger">
-                                <i class="fa fa-ban mr-2"/>Unpublished
-                            </small>
-                        </t>
-                    </a>
-                </header>
-                <div t-attf-class="#{opt_events_list_columns and 'col-12' or 'col'}">
-                    <!-- Body -->
-                    <main t-attf-class="#{opt_events_list_cards and 'card-body' or (opt_events_list_columns and 'py-3' or 'px-4')}">
-                        <!-- Title -->
-                        <h5 t-attf-class="card-title mt-2 mb-0 text-truncate #{(not event.website_published) and 'text-danger'}">
-                            <a t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" 
-                                class="text-reset text-decoration-none" 
-                                itemprop="url">
-                                <span t-field="event.name" itemprop="name"/>
-                            </a>
-                            <div class="badge badge-pill badge-info ml-2 mt-2 pt4 pb4" t-if="event.is_online">Online</div>
-                        </h5>
-                        <!-- Start Date & Time -->
-                        <time itemprop="startDate" t-att-datetime="event.date_begin">
-                            <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'date_only': 'true', 'format': 'long'}"/> -
-                            <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
-                        </time>
-                        <!-- Organizer -->
-                        <div t-if="event.organizer_id" class="mb-3">
-                            <small class="text-muted text-truncate">Organizer: <span t-field="event.organizer_id" itemprop="organizer"/></small>
-                        </div>
-                        <!-- Location -->
-                        <div t-if="not event.is_online" itemprop="location" t-field="event.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
-                        <div class="mt8 d-flex align-items-center">
-                            <t t-foreach="event.tag_ids" t-as="tag">
-                                    <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="badge mr8 #{'badge-primary' if tag in search_tags else 'badge-light'}">
-                                <span t-esc="tag.name"/>
-                                </a>
+        <a t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="text-decoration-none">
+            <article t-attf-class="h-100 #{opt_events_list_cards and 'card border-0 shadow-sm'}" itemscope="itemscope" itemtype="http://schema.org/Event">
+                <div class="h-100 row no-gutters">
+                    <!-- Header -->
+                    <header t-attf-class="overflow-hidden bg-secondary #{opt_events_list_columns and 'col-12 rounded-top' or 'col-sm-4 col-lg-3 rounded-left'} #{(not opt_events_list_cards) and 'rounded shadow'} #{(not opt_events_list_cards and not opt_events_list_columns) and 'rounded-top'}">
+                        <!-- Image + Link -->
+                        <div class="d-block h-100 w-100">
+                            <t t-call="website.record_cover">
+                                <t t-set="_record" t-value="event"/>
+
+                                <!-- Short Date -->
+                                <div class="o_wevent_event_date position-absolute bg-white shadow-sm">
+                                    <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'LLL'}" class="o_wevent_event_month"/>
+                                    <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'dd'}" class="o_wevent_event_day"/>
+                                </div>
+                                <!-- Participating -->
+                                <small t-if="event.is_participating" class="o_wevent_participating bg-success">
+                                    <i class="fa fa-check mr-2"/>Registered
+                                </small>
+                                <!-- Unpublished -->
+                                <small t-if="not event.website_published" class="o_wevent_unpublished bg-danger">
+                                    <i class="fa fa-ban mr-2"/>Unpublished
+                                </small>
                             </t>
                         </div>
-                    </main>
+                    </header>
+                    <div t-attf-class="#{opt_events_list_columns and 'col-12' or 'col'}">
+                        <!-- Body -->
+                        <main t-attf-class="#{opt_events_list_cards and 'card-body' or (opt_events_list_columns and 'py-3' or 'px-4')}">
+                            <!-- Title -->
+                            <h5 t-attf-class="card-title mt-2 mb-0 text-truncate #{(not event.website_published) and 'text-danger'}">
+                                <span t-field="event.name" itemprop="name"/>
+                                <div class="badge badge-pill badge-info ml-2 mt-2 pt4 pb4" t-if="event.is_online">Online</div>
+                            </h5>
+                            <!-- Start Date & Time -->
+                            <time itemprop="startDate" t-att-datetime="event.date_begin">
+                                <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'date_only': 'true', 'format': 'long'}"/> -
+                                <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                            </time>
+                            <!-- Organizer -->
+                            <div t-if="event.organizer_id" class="mb-3">
+                                <small class="text-muted text-truncate">Organizer: <span t-field="event.organizer_id" itemprop="organizer"/></small>
+                            </div>
+                            <!-- Location -->
+                            <div t-if="not event.is_online" itemprop="location" t-field="event.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
+                            <div t-else="" class="invisible">online</div>
+                            <div class="mt8 d-flex align-items-center">
+                                <t t-foreach="event.tag_ids" t-as="tag">
+                                    <span t-attf-class="badge mr8 #{'badge-primary' if tag in search_tags else 'badge-light'}">
+                                        <span t-esc="tag.name"/>
+                                    </span>
+                                </t>
+                            </div>
+                        </main>
+                    </div>
+                    <!-- Footer -->
+                    <footer
+                            t-attf-class="small align-self-end w-100 #{opt_events_list_cards and 'card-footer' or ((not opt_events_list_columns) and 'border-top mx-4 mt-auto pt-2' or 'border-top py-2')}">
+                        <span class="text-danger"
+                            t-if="event.seats_availability == 'limited' and not event.seats_available">
+                            Sold Out
+                        </span>
+                    </footer>
                 </div>
-                <!-- Footer -->
-                <footer t-if="event.event_registrations_open"
-                        t-attf-class="small align-self-end w-100 #{opt_events_list_cards and 'card-footer' or ((not opt_events_list_columns) and 'border-top mx-4 mt-auto pt-2' or 'border-top py-2')}">
-                    <span class="text-danger"
-                        t-if="event.seats_availability == 'limited' and not event.seats_available">
-                        Sold Out
-                    </span>
-                </footer>
-            </div>
-        </article>
+            </article>
+        </a>
     </div>
     <!-- Pager -->
     <div class="form-inline justify-content-center my-3">
@@ -260,9 +258,9 @@
 
 <template id="opt_events_list_cards" inherit_id="website_event.events_list" active="True" customize_show="True" name="'Cards' Design"/>
 
-<template id="opt_events_list_categories" inherit_id="website_event.events_list" active="True" customize_show="True" name="Show Templates">
+<template id="opt_events_list_categories" inherit_id="website_event.events_list" active="False" customize_show="True" name="Show Templates">
     <xpath expr="//main/*" position="before">
-        <a t-if="event.event_type_id" t-attf-href="/event?type=#{event.event_type_id.id}" t-attf-class="badge bg-secondary o_wevent_badge #{opt_events_list_columns and 'o_wevent_badge_event' or 'float-right'}" t-field="event.event_type_id"/>
+        <span t-if="event.event_type_id" t-attf-href="/event?type=#{event.event_type_id.id}" t-attf-class="badge bg-secondary o_wevent_badge #{opt_events_list_columns and 'o_wevent_badge_event' or 'float-right'}" t-field="event.event_type_id"/>
     </xpath>
 </template>