[IMP] website_event_track(_online/_session): improve talks list display

According to late specifications we are about to loose at least 20K€ in our
marketing actions if we do not

  * add a header 'Book your talks' on track page, as maybe it is unclear
    that a talks list having favorite buttons is there to help you booking
    your talks;
  * put 'Add to favorite' button as standard instead of small;
  * reorganize track card in list display, notably

    * hide tags in mobile as this adds a lot of noise, especially when having
      lot of tracks;
    * use background color as in agenda to highlight important tracks;
    * move favorite button on top of card in mobile;
    * hide duration in mobile, keeping only exact datetime at which is begins;
    * globally align items in desktop / mobile to have a nice display;

Task ID-2325327
PR odoo/odoo#56430

X-original-commit: 3a322a4db6ccea10a24349de30773f3ee120c972

4 files changed, 110 insertions, 68 deletions

diff --git a/addons/website_event_track/data/event_track_demo.xml b/addons/website_event_track/data/event_track_demo.xml
index aec7c85d33e..ec3ca4bcec1 100644
--- a/addons/website_event_track/data/event_track_demo.xml
+++ b/addons/website_event_track/data/event_track_demo.xml
@@ -382,7 +382,7 @@
     </record>
     <record id="event_7_track_4" model="event.track">
         <field name="name">Life at Home Around the World: William’s Story</field>
-        <field name="color">5</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage4"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_1"/>
@@ -399,7 +399,7 @@
     </record>
     <record id="event_7_track_5" model="event.track">
         <field name="name">Top 10 Most Expensive Wood in the World</field>
-        <field name="color">3</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_1"/>
@@ -413,7 +413,7 @@
     <!-- Location 2 -->
     <record id="event_7_track_6" model="event.track">
         <field name="name">Securing your Lumber during transport</field>
-        <field name="color">3</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_2"/>
@@ -439,7 +439,7 @@
     </record>
     <record id="event_7_track_8" model="event.track">
         <field name="name">Dealing with OpenWood Furniture</field>
-        <field name="color">6</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage2"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_2"/>
@@ -452,7 +452,7 @@
     </record>
     <record id="event_7_track_9" model="event.track">
         <field name="name">Kitchens for the Future</field>
-        <field name="color">7</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage2"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_2"/>
@@ -479,7 +479,7 @@
     </record>
     <record id="event_7_track_l3_2" model="event.track">
         <field name="name">Who's OpenWood anyway ?</field>
-        <field name="color">6</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="website_event_track.event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_3"/>
@@ -528,6 +528,7 @@
     <!-- Location 1 -->
     <record id="event_7_track_12" model="event.track">
         <field name="name">Climate positive</field>
+        <field name="color">3</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_1"/>
@@ -540,7 +541,7 @@
     </record>
     <record id="event_7_track_13" model="event.track">
         <field name="name">Log House Building</field>
-        <field name="color">2</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="wishlisted_by_default" eval="True"/>
@@ -554,7 +555,7 @@
     </record>
     <record id="event_7_track_14" model="event.track">
         <field name="name">Building a DIY cabin from the ground up</field>
-        <field name="color">2</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_1"/>
@@ -568,7 +569,7 @@
     <!-- Location 2 -->
     <record id="event_7_track_15" model="event.track">
         <field name="name">Logs to lumber</field>
-        <field name="color">3</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_2"/>
@@ -581,7 +582,7 @@
     </record>
     <record id="event_7_track_16" model="event.track">
         <field name="name">Pretty. Ugly. Lovely.</field>
-        <field name="color">4</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_2"/>
@@ -608,7 +609,7 @@
     </record>
     <record id="event_7_track_18" model="event.track">
         <field name="name">6 Woodworking tips and tricks for beginners</field>
-        <field name="color">7</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_2"/>
@@ -648,7 +649,7 @@
     </record>
     <record id="event_7_track_l3_11" model="event.track">
         <field name="name">Happy with OpenWood</field>
-        <field name="color">6</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="website_event_track.event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_3"/>
@@ -696,7 +697,7 @@
     <!-- Location 1 -->
     <record id="event_7_track_22" model="event.track">
         <field name="name">Tools for the Woodworking Beginner</field>
-        <field name="color">3</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_1"/>
@@ -737,11 +738,11 @@
     <!-- Location 3 -->
     <record id="event_7_track_25" model="event.track">
         <field name="name">Live Testimonials</field>
-        <field name="color">5</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage3"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_3"/>
-        <field name="date" eval="(DateTime.now() + timedelta(days=1)).strftime('%Y-%m-%d 07:00:00')"></field>
+        <field name="date" eval="(DateTime.now() + timedelta(days=1)).strftime('%Y-%m-%d 07:30:00')"></field>
         <field name="tag_ids" eval="[(4, ref('website_event_track.event_track_tag1')), (4, ref('website_event_track.event_track_tag2')), (4, ref('website_event_track.event_track_tag12'))]"/>
         <field name="is_published" eval="True"/>
         <field name="duration">3</field>
@@ -750,7 +751,7 @@
     </record>
     <record id="event_7_track_26" model="event.track">
         <field name="name">Less Furniture is More Furniture</field>
-        <field name="color">4</field>
+        <field name="color">0</field>
         <field name="event_id" ref="event.event_7"/>
         <field name="stage_id" ref="event_track_stage2"/>
         <field name="location_id" ref="website_event_track.event_track_location_online_3"/>
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 505a68ef4aa..91a1ce9f6dc 100644
--- a/addons/website_event_track/views/event_track_templates_list.xml
+++ b/addons/website_event_track/views/event_track_templates_list.xml
@@ -158,6 +158,10 @@
 
 <!-- Tracks: List-based display -->
 <template id="tracks_display_list" name="Tracks: List Display">
+    <div t-if="tracks">
+        <h1>Book your talks</h1>
+        <h4 class="mb-5">Plan your experience by adding your favorites talks to your wishlist</h4>
+    </div>
     <div t-if="tracks" class="o_wesession_list mb-3">
         <ul class="list-unstyled">
             <li t-foreach="tracks_by_day" t-as="tracks_info"
@@ -184,60 +188,97 @@
                     <hr class="mt-2 pb-1 mb-1"/>
                 </div>
                 <!-- DAY TRACKS LIST -->
-                <div t-foreach="tracks" t-as="track" class="row mt8 o_wesession_list_item">
-                    <div class="col-md-7">
-                        <span class="h5 mb0">
-                            <a t-if="track.is_published or user_event_manager"
-                                t-att-href="track.website_url">
-                                <span t-field="track.name"/>
-                            </a>
-                            <t t-else="">
-                                <span t-field="track.name"/>
-                            </t>
-                            <span t-if="not track.is_published and user_event_manager"
-                                class="badge badge-danger ml-2 o_wevent_online_badge_unpublished">
-                                Unpublished
+                <div t-foreach="tracks" t-as="track"
+                    t-att-class="'o_wesession_list_item px-2 py-2 event_color_%d' % (track.color)">
+                    <!-- Side information in a floating div (desktop only) -->
+                    <div t-if="not event.is_done and (not track.date or today_tz &lt;= tracks_date) and option_track_wishlist"
+                        class="float-right d-none d-md-block ml-2">
+                        <t t-call="website_event_track.track_widget_reminder">
+                            <t t-set="reminder_small" t-value="False"/>
+                            <t t-set="reminder_light" t-value="False"/>
+                        </t>
+                    </div>
+                    <div class="row no-gutters">
+                        <!-- Main column: name, speaker -->
+                        <div class="col-md-7">
+                            <!-- Reminder widget: directly in line to gain space, mobile only -->
+                            <div t-if="not event.is_done and (not track.date or today_tz &lt;= tracks_date) and option_track_wishlist"
+                                class="float-right d-block d-md-none ml-2">
+                                <t t-call="website_event_track.track_widget_reminder">
+                                    <t t-set="reminder_small" t-value="True"/>
+                                    <t t-set="reminder_light" t-value="False"/>
+                                </t>
+                            </div>
+                            <span class="h5 mb0">
+                                <a t-if="track.is_published or user_event_manager"
+                                    class="mr-2"
+                                    t-att-href="track.website_url">
+                                    <span t-field="track.name"/>
+                                </a>
+                                <t t-else="">
+                                    <span class="mr-2" t-field="track.name"/>
+                                </t>
+                                <span t-if="not track.is_published and user_event_manager"
+                                    class="badge badge-danger o_wevent_online_badge_unpublished">
+                                    Unpublished
+                                </span>
                             </span>
-                        </span>
-                        <div class="text-muted">
-                            <span class="text-muted" t-esc="track.partner_name"/>
-                            <t t-if="track.partner_name"> &amp;bull; </t>
-                            <span t-esc="track.duration"
-                                t-options="{'widget': 'duration', 'digital': False, 'format': 'short', 'unit': 'hour', 'round': 'minute'}"/>
+                            <div class="text-muted d-flex align-items-center">
+                                <span class="text-muted" t-esc="track.partner_name"/>
+                                <t t-if="tracks_date and today_tz &lt;= tracks_date">
+                                    <!-- Hour: Live > Remaining > Hour: mobile only -->
+                                    <div class="d-block d-md-none">
+                                        <span t-if="track.partner_name" class="ml-2">&amp;bull;</span>
+                                        <span t-if="track.is_track_live and not track.is_track_done"
+                                            class="badge badge-danger ml-2">Live</span>
+                                        <span t-elif="not track.is_track_done and track.is_track_soon"
+                                            class="ml-2">
+                                            <span t-esc="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"
+                                            class="ml-2"
+                                            t-esc="track.date"
+                                            t-options="{'widget': 'datetime', 'time_only': True, 'format': 'short'}"/>
+                                        <span t-else="" class="badge badge-info ml-2">Finished</span>
+                                    </div>
+                                    <!-- Duration (desktop only) -->
+                                    <t t-if="track.duration and not track.is_track_done and not track.is_track_done">
+                                        <span class="d-none d-md-block ml-2">&amp;bull;</span>
+                                        <span class="d-none d-md-block ml-2"
+                                            t-esc="track.duration"
+                                            t-options="{'widget': 'duration', 'digital': False, 'format': 'short', 'unit': 'hour', 'round': 'minute'}"/>
+                                    </t>
+                                </t>
+                            </div>
                         </div>
-                    </div>
-                    <div class="col-md-5">
-                        <div t-if="not event.is_done" class="float-right">
-                            <t t-if="tracks_date and today_tz &lt;= tracks_date">
+                        <!-- Aside column: date, tags -->
+                        <div class="col-md-5">
+                            <!-- Hour: Live > Remaining > Hour: desktop only -->
+                            <div t-if="tracks_date and today_tz &lt;= tracks_date"
+                                class="d-none d-md-block float-right">
                                 <span t-if="track.is_track_live and not track.is_track_done"
-                                    class="badge badge-danger">Live</span>
-                                <span t-elif="not track.is_track_done and track.is_track_soon">
+                                    class="badge badge-danger ml-2">Live</span>
+                                <span t-elif="not track.is_track_done and track.is_track_soon"
+                                    class="ml-2">
                                     <span t-esc="track.track_start_remaining"
                                         t-options="{'widget': 'duration', 'digital': False, 'format': 'narrow',
                                                     'add_direction': True, 'unit': 'second', 'round': 'minute'}"/>
                                 </span>
-                                <t t-elif="not track.is_track_done and not track.is_track_soon">
-                                    <span
-                                        class="mr-2"
-                                        t-esc="track.date"
-                                        t-options="{'widget': 'datetime', 'time_only': True, 'format': 'short'}"/>
-                                    <t t-if="option_track_wishlist"
-                                        t-call="website_event_track.track_widget_reminder">
-                                        <t t-set="reminder_small" t-value="True"/>
-                                    </t>
+                                <span t-elif="not track.is_track_done and not track.is_track_soon"
+                                    class="ml-2"
+                                    t-esc="track.date"
+                                    t-options="{'widget': 'datetime', 'time_only': True, 'format': 'short'}"/>
+                                <span t-else="" class="badge badge-info ml-2">Finished</span>
+                            </div>
+                            <!-- Tags: desktop only -->
+                            <div class="d-none d-md-block">
+                                <t t-foreach="track.tag_ids" t-as="tag">
+                                    <t t-if="tag.color" t-call="website_event_track.track_tag_badge_link"/>
                                 </t>
-                                <t t-else="">
-                                    <span class="badge badge-info">Finished</span>
-                                </t>
-                            </t>
-                            <t t-elif="not track.date and option_track_wishlist"
-                                t-call="website_event_track_online.track_widget_reminder">
-                                <t t-set="reminder_small" t-value="True"/>
-                            </t>
+                            </div>
                         </div>
-                        <t t-foreach="track.tag_ids" t-as="tag">
-                            <t t-if="tag.color" t-call="website_event_track.track_tag_badge_link"/>
-                        </t>
                     </div>
                 </div>
             </li>
diff --git a/addons/website_event_track/views/event_track_templates_reminder.xml b/addons/website_event_track/views/event_track_templates_reminder.xml
index df996d5abd6..d63de39f20e 100644
--- a/addons/website_event_track/views/event_track_templates_reminder.xml
+++ b/addons/website_event_track/views/event_track_templates_reminder.xml
@@ -7,9 +7,9 @@
     * light_theme: bell is white/gold if set; otherwse bell is gray / white
  -->
 <template id="track_widget_reminder">
-    <div t-att-class="'o_wetrack_js_reminder btn %s %s' % (
-        'btn-link' if reminder_light else 'btn-outline-primary',
-        'btn-sm' if reminder_small else '')">
+    <t t-set="_btn_style" t-value="'btn-link' if reminder_light else (track.is_reminder_on and 'btn-primary') or 'btn-outline-primary'"/>
+    <t t-set="_btn_size" t-value="'btn-sm' if reminder_small else ''"/>
+    <div t-att-class="'o_wetrack_js_reminder btn %s %s' % (_btn_style, _btn_size)">
         <t t-if="track.is_reminder_on" t-set="title">Favorite On</t>
         <t t-else="track.is_reminder_on" t-set="title">Set Favorite</t>
         <i t-att-class="'fa fa-bell%s inactive_color_%s' % ('' if track.is_reminder_on else '-o', 'dark' if reminder_light and not light_theme else 'light')"
diff --git a/addons/website_event_track_live/views/event_track_templates_list.xml b/addons/website_event_track_live/views/event_track_templates_list.xml
index 844620dd44f..64e62053cf0 100644
--- a/addons/website_event_track_live/views/event_track_templates_list.xml
+++ b/addons/website_event_track_live/views/event_track_templates_list.xml
@@ -3,17 +3,17 @@
 
 <template id="tracks_display_list" inherit_id="website_event_track.tracks_display_list">
     <!-- TRACK LIST: ADD REPLAY TAG FOR FINISHED TRACKS -->
-    <xpath expr="//div[hasclass('o_wesession_list_item')]/div[hasclass('col-md-5')]//t[@t-elif='not track.is_track_done and not track.is_track_soon']" position="after">
+    <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-md-7')]//span[@t-elif='not track.is_track_done and not track.is_track_soon']" position="after">
         <a t-elif="track.youtube_video_url and (track.is_published or user_event_manager)"
-            t-att-href="track.website_url" class="badge badge-danger">Replay
+            t-att-href="track.website_url" class="badge badge-danger ml-2">Replay
         </a>
     </xpath>
     <!-- ADD YOUTUBE ICON -->
-    <xpath expr="//div[hasclass('o_wesession_list_item')]/div[hasclass('col-md-7')]//a/span[@t-field='track.name']" position="before">
+    <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-md-7')]//a/span[@t-field='track.name']" position="before">
         <i t-if="track.date and track.youtube_video_url and (track.is_track_soon or track.is_track_live or track.is_youtube_replay)"
             class="fa fa-youtube-play text-danger mr-1"/>
     </xpath>
-    <xpath expr="//div[hasclass('o_wesession_list_item')]/div[hasclass('col-md-7')]//t/span[@t-field='track.name']" position="before">
+    <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-md-7')]//t/span[@t-field='track.name']" position="before">
         <i t-if="track.date and track.youtube_video_url and (track.is_track_soon or track.is_track_live or track.is_youtube_replay)"
             class="fa fa-youtube-play text-danger mr-1"/>
     </xpath>