From 07f2eab88976a22e0b9a4d100c6675ea79959517 Mon Sep 17 00:00:00 2001
From: David Beguin <dbe@odoo.com>
Date: Mon, 10 Aug 2020 10:23:06 +0000
Subject: [PATCH] [FIX] website_event_track_online: make agenda card more
 mobile-friendly

SPECIFICATIONS

Currently agenda does not display well on mobile. This commit improves display
of card in order to have a cleaner display.

When displaying tags, track name, reminder, speaker name: ensure that mobile
uses more vertical space than horizontal one, leading to a better result.

Fix: remove fa-user if no speaker on agenda card

LINKS

Coming from internal feedback while deploying online support
Task ID-2314778
PR #55634

X-original-commit: d8b35ece9e3627953700c281057fbf09f973cdd0
---
 .../src/scss/event_track_templates.scss       |  6 ++-
 .../views/event_track_templates_agenda.xml    | 40 ++++++++++---------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/addons/website_event_track_online/static/src/scss/event_track_templates.scss b/addons/website_event_track_online/static/src/scss/event_track_templates.scss
index 99d8873ebf8..894a3778833 100644
--- a/addons/website_event_track_online/static/src/scss/event_track_templates.scss
+++ b/addons/website_event_track_online/static/src/scss/event_track_templates.scss
@@ -71,7 +71,7 @@
             background-color: #d3d3d36e;
         }
         th:not(.active), td.active {
-            width: 150px;
+            width: 100px;
         }
         th.position-sticky {
             left: 0;
@@ -93,6 +93,10 @@
             }
             .badge {
                 height: fit-content;
+                max-width: 100%;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
             }
             &.invisible {
                 visibility: visible !important;
diff --git a/addons/website_event_track_online/views/event_track_templates_agenda.xml b/addons/website_event_track_online/views/event_track_templates_agenda.xml
index fbce5803831..41a551c90c8 100644
--- a/addons/website_event_track_online/views/event_track_templates_agenda.xml
+++ b/addons/website_event_track_online/views/event_track_templates_agenda.xml
@@ -150,24 +150,19 @@
 
 <template id="agenda_main_track" name="Track Agenda: Track">
     <div class="d-flex flex-column h-100">
-        <div class="d-flex justify-content-between align-items-center">
-            <div class="text-muted">
-                <small t-if="track.partner_id"><i class="fa fa-user mr-2"/><t t-esc="track.partner_id.sudo().name"/></small>
-                <small t-if="not track.partner_id"><i class="fa fa-user mr-2"/><t t-esc="track.partner_name"/></small>
-            </div>
-            <div class="d-flex o_weagenda_track_badges">
-                <small t-if="not track.website_published and user_event_manager and track.stage_id.is_accepted"
-                       class="ml-1 badge badge-danger o_wevent_online_badge_unpublished">Unpublished</small>
-                <small t-if="not track.stage_id.is_accepted"
-                       class="ml-1 badge badge-danger o_wevent_online_badge_unpublished">Not Accepted</small>
-                <span t-if="option_track_wishlist">
-                    <t t-call="website_event_track_online.track_widget_reminder">
-                        <t t-set="reminder_light" t-value="True"/>
-                        <t t-set="reminder_small" t-value="True"/>
-                        <t t-set="light_theme" t-value="True"/>
-                    </t>
-                </span>
-            </div>
+        <div class="d-flex justify-content-end flex-wrap-reverse o_weagenda_track_badges">
+            <small t-if="not track.website_published and user_event_manager and track.stage_id.is_accepted"
+                   title="Unpublished"
+                   class="ml-1 badge badge-danger o_wevent_online_badge_unpublished">Unpublished</small>
+            <small t-if="not track.stage_id.is_accepted" title="Not Accepted"
+                   class="ml-1 badge badge-danger o_wevent_online_badge_unpublished">Not Accepted</small>
+            <span t-if="option_track_wishlist">
+                <t t-call="website_event_track_online.track_widget_reminder">
+                    <t t-set="reminder_light" t-value="True"/>
+                    <t t-set="reminder_small" t-value="True"/>
+                    <t t-set="light_theme" t-value="False"/>
+                </t>
+            </span>
         </div>
 
         <div class="o_we_agenda_card_content d-flex flex-column justify-content-center my-1">
@@ -178,7 +173,7 @@
             </div>
             <div class="d-flex justify-content-center flex-wrap">
                 <t t-foreach="track.tag_ids" t-as="tag">
-                    <span t-if="tag.color"
+                    <span t-if="tag.color" t-att-title="tag.name"
                           t-attf-class="mr-1 mt-1 badge #{'o_tag_color_'+str(tag.color)}" t-esc="tag.name"
                           t-attf-onclick="
                             var value = '#{tag.name}' ;
@@ -190,6 +185,13 @@
                 </t>
             </div>
         </div>
+
+        <div>
+            <div class="text-muted text-right">
+                <small t-if="track.partner_id or track.partner_name">
+                    <i class="fa fa-user mr-2"/><t t-esc="track.partner_id.sudo().name or track.partner_name"/></small>
+            </div>
+        </div>
     </div>
 </template>