From ba7d1930bc01b898c1cb35d15fd775e5b23ea652 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Tue, 27 Feb 2024 14:51:16 +0100
Subject: [PATCH] [FIX] website_event_meet, website_event_track: badges issues

Address several design/ux issue related to badges.
In some cases badges are too small, in others the badge should be
clickable while in others should not.
In some circumstances informative components like small alerts should be
used instead.

task-3718417
part of task-3698364

Part-of: odoo/odoo#152434
---
 .../website_event/views/event_templates_list.xml   |  2 +-
 .../views/event_exhibitor_templates_list.xml       |  2 +-
 .../views/event_track_templates_list.xml           | 14 +++++++-------
 .../views/event_track_templates_page.xml           |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index e13a047088e..0ad923dcebb 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -328,7 +328,7 @@
                     <!-- Body -->
                     <main t-attf-class="card-body position-relative d-flex flex-column justify-content-between gap-2 #{opt_events_list_columns and 'col-12 py-3' or 'col-8 col-lg-9 px-4'} #{not opt_events_list_cards and opt_events_list_columns and 'px-0'} #{not opt_events_list_cards and not opt_events_list_columns and 'py-0'}">
                         <div>
-                            <div class="d-flex flex-wrap gap-2">
+                            <div class="d-flex flex-wrap gap-1 small">
                                 <t t-foreach="event.tag_ids.filtered(lambda tag: tag.category_id.website_id == website or not tag.category_id.website_id)" t-as="tag">
                                     <span t-if="tag.color"
                                         t-attf-class="badge mt-3 mt-sm-0 rounded-pill px-2 p-1 #{'o_tag_color_%s' % tag.color if tag.color else 'text-bg-light'}">
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
index 969f8020341..eb95282a194 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
@@ -267,7 +267,7 @@
                     <h5 class="card-title d-flex align-items-start justify-content-between mt-0 mb-0">
                         <span t-field="sponsor.name" itemprop="name" class="text-break fs-6 mb-2"/>
                         <span t-if="sponsor.is_in_opening_hours and sponsor.chat_room_id"
-                            class="ms-auto badge text-bg-danger">Live
+                            class="alert alert-danger mb-2 px-2 py-1 smaller lh-1">Live
                         </span>
                     </h5>
                     <!-- Catchy sentence -->
diff --git a/addons/website_event_track/views/event_track_templates_list.xml b/addons/website_event_track/views/event_track_templates_list.xml
index 47c082724a3..ececc52c647 100644
--- a/addons/website_event_track/views/event_track_templates_list.xml
+++ b/addons/website_event_track/views/event_track_templates_list.xml
@@ -275,16 +275,16 @@
                                 <div t-if="tracks_date and today_tz &lt;= tracks_date"
                                     >
                                     <span t-if="track.is_track_live and not track.is_track_done"
-                                        class="badge text-bg-danger">Live</span>
-                                    <span t-elif="not track.is_track_done and track.is_track_soon">
+                                        class="alert alert-danger px-2 py-1">Live</span>
+                                    <span class="fw-bold" t-elif="not track.is_track_done and track.is_track_soon">
                                         <span t-out="track.track_start_remaining"
                                             t-options="{'widget': 'duration', 'digital': False, 'format': 'narrow',
                                                         'add_direction': True, 'unit': 'second', 'round': 'minute'}"/>
                                     </span>
-                                    <span t-elif="not track.is_track_done and not track.is_track_soon"
+                                    <span class="fw-bold" t-elif="not track.is_track_done and not track.is_track_soon"
                                         t-out="track.date"
                                         t-options="{'widget': 'datetime', 'time_only': True, 'format': 'short', 'tz_name': event.date_tz}"/>
-                                    <span t-else="" class="badge text-bg-info">Finished</span>
+                                    <span t-else="" class="alert alert-dark px-2 py-1 small">Finished</span>
                                 </div>
                                 <!-- reminder -->
                                 <div t-if="not event.is_done and (not track.date or today_tz &lt;= tracks_date) and option_track_wishlist"
@@ -460,14 +460,14 @@
             slug(event),
             keep_query('*', tags=str((search_tags - tag).ids if tag in search_tags else (tag | search_tags).ids))
         )"
-        t-att-class="'badge %s' % ('text-bg-primary' if tag in search_tags else 'o_tag_color_hovered_0')"
+        t-att-class="'badge rounded-pill text-decoration-none %s' % ('text-bg-primary opacity-75-hover' if tag in search_tags else 'o_tag_color_hovered_0')"
         t-out="tag.name"/>
     <a t-else=""
         t-att-href="'/event/%s/track?%s'% (
             slug(event),
             keep_query('*', tags=str(tag.ids))
         )"
-        t-att-class="'badge o_tag_color_hovered_%s' % (tag.color)"
+        t-att-class="'badge rounded-pill text-decoration-none o_tag_color_hovered_%s' % (tag.color)"
         t-out="tag.name"/>
 </template>
 
@@ -476,7 +476,7 @@
         t-att-class="'badge %s' % ('text-bg-primary' if tag in search_tags else 'o_tag_color_0')"
         t-out="tag.name"/>
     <span t-else=""
-        t-att-class="'badge o_tag_color_%s' % (tag.color)"
+        t-att-class="'badge rounded-pill o_tag_color_%s' % (tag.color)"
         t-out="tag.name"/>
 </template>
 
diff --git a/addons/website_event_track/views/event_track_templates_page.xml b/addons/website_event_track/views/event_track_templates_page.xml
index 478b8371407..18cca078947 100644
--- a/addons/website_event_track/views/event_track_templates_page.xml
+++ b/addons/website_event_track/views/event_track_templates_page.xml
@@ -81,7 +81,7 @@
                     <div class="d-flex flex-wrap gap-1">
                         <t t-foreach="track.tag_ids" t-as="tag">
                             <span t-if="tag.color"
-                                t-att-class="'badge o_tag_color_hovered_%s' % (tag.color)"
+                                t-att-class="'badge o_tag_color_%s' % (tag.color)"
                                 t-out="tag.name"/>
                         </t>
                     </div>