[REF] *: BS4, review the 'media' structure

Only two classes remain to declare a media structure:
'media' and 'media-body'. 'media-left/right' are guessed by their
position using the flex layout.

Also, the 'media-list' class has been dropped but <ul/> element
should use the 'list-unstyled' class instead.

Like all other components, spacing between medias are now to be
handled explicitely thanks the spacing utility classes.

12 files changed, 61 insertions, 71 deletions

diff --git a/addons/hr_org_chart/static/src/xml/hr_org_chart.xml b/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
index 318be0b744c..f1cbc96a4eb 100644
--- a/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
+++ b/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
@@ -5,17 +5,17 @@
     <div t-attf-class="o_org_chart_entry o_org_chart_entry_#{employee_type} media">
         <t t-set="is_self" t-value="employee_type == 'self'"/>
 
-        <div class="media-left">
+        <div>
             <!-- NOTE: Since by the default on not squared images odoo add white borders,
                 use bg-images to get a clean and centred images -->
             <a t-if="! is_self"
-                class="media-object rounded-circle o_employee_redirect"
+                class="rounded-circle o_employee_redirect"
                 t-att-style="'background-image:url(\'/web/image/hr.employee/' + employee.id + '/image/\')'"
                 t-att-alt="employee.name"
                 t-att-data-employee-id="employee.id"
                 t-att-href="employee.link"/>
             <div t-if="is_self"
-                class="media-object rounded-circle"
+                class="rounded-circle"
                 t-att-style="'background-image:url(\'/web/image/hr.employee/' + employee.id + '/image/\')'"/>
         </div>
 
@@ -35,12 +35,12 @@
 
             <t t-if="!is_self">
                 <a t-att-href="employee.link" class="o_employee_redirect" t-att-data-employee-id="employee.id">
-                    <h5 class="media-heading"><b><t t-esc="employee.name"/></b></h5>
+                    <h5><b><t t-esc="employee.name"/></b></h5>
                     <strong><t t-esc="employee.job_name"/></strong>
                 </a>
             </t>
             <t t-if="is_self">
-                <h5 class="media-heading"><b><t t-esc="employee.name"/></b></h5>
+                <h5><b><t t-esc="employee.name"/></b></h5>
                 <strong><t t-esc="employee.job_name"/></strong>
             </t>
         </div>
@@ -59,13 +59,11 @@
     <div t-if='managers.length &gt; 0' class="o_org_chart_group_up">
         <t t-if='managers_more'>
             <div class="o_org_chart_entry o_org_chart_more media">
-                <div class="media-left">
-                    <a class="media-object text-center o_employee_redirect"
-                            t-att-href="managers[0].link"
-                            t-att-data-employee-id="managers[0].id">
-                        <i t-attf-class="fa fa-angle-double-up" role="img" aria-label="More managers" title="More managers"/>
-                    </a>
-                </div>
+                <a class="text-center o_employee_redirect"
+                        t-att-href="managers[0].link"
+                        t-att-data-employee-id="managers[0].id">
+                    <i t-attf-class="fa fa-angle-double-up" role="img" aria-label="More managers" title="More managers"/>
+                </a>
             </div>
         </t>
 
@@ -102,11 +100,9 @@
 
         <t t-if="(children.length + managers.length) &gt; 7">
             <div class="o_org_chart_entry o_org_chart_more media">
-                <div class="media-left">
-                    <a href="#"
-                        t-att-data-employee-id="self.id"
-                        class="o_org_chart_show_more media-object text-center o_employee_sub_redirect">&#8230;</a>
-                </div>
+                <a href="#"
+                    t-att-data-employee-id="self.id"
+                    class="o_org_chart_show_more text-center o_employee_sub_redirect">&#8230;</a>
             </div>
         </t>
     </div>
diff --git a/addons/portal/static/src/xml/portal_chatter.xml b/addons/portal/static/src/xml/portal_chatter.xml
index d2e3bede900..dcfbf922e04 100644
--- a/addons/portal/static/src/xml/portal_chatter.xml
+++ b/addons/portal/static/src/xml/portal_chatter.xml
@@ -23,9 +23,7 @@
             </t>
             <t t-if="widget.options['display_composer']">
                 <div class="media">
-                    <div class="media-left">
-                        <img alt="Avatar" class="o_portal_chatter_avatar float-left" t-attf-src="/web/image/res.partner/#{widget.options['partner_id']}/image_small/50x50"/>
-                    </div>
+                    <img alt="Avatar" class="o_portal_chatter_avatar" t-attf-src="/web/image/res.partner/#{widget.options['partner_id']}/image_small/50x50"/>
                     <div class="media-body">
                         <form class="o_portal_chatter_composer_form" t-attf-action="/mail/chatter_post" method="POST">
                             <input type="hidden" name="csrf_token" t-att-value="widget.options['csrf_token']"/>
@@ -53,15 +51,11 @@
         <div class="o_portal_chatter_messages">
             <t t-foreach="widget.get('messages')" t-as="message">
                 <div class="media o_portal_chatter_message" t-att-id="'message-' + message.id">
-                    <div class="media-left">
-                        <img class="media-object o_portal_chatter_avatar" t-att-src="message.author_avatar_url" alt="avatar"/>
-                    </div>
+                    <img class="o_portal_chatter_avatar" t-att-src="message.author_avatar_url" alt="avatar"/>
                     <div class="media-body">
 
                         <div class="o_portal_chatter_message_title">
-                            <h5 class="media-heading">
-                                <t t-esc="message.author_id[1]"/>
-                            </h5>
+                            <h5><t t-esc="message.author_id[1]"/></h5>
                             <p class="o_portal_chatter_puslished_date"><t t-esc="message.published_date_str"/></p>
                         </div>
                         <t t-raw="message.body"/>
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index 3481a9c023f..f52c8ce99bf 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -83,12 +83,12 @@
                             <t t-set="last_grade" t-value="partner.grade_id.id"/>
                         </t>
                         <div class="media">
-                            <a class="float-left" t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}"
+                            <a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}"
                                t-field="partner.image_medium"
-                               t-options='{"widget": "image", "class": "media-object"}'
+                               t-options='{"widget": "image"}'
                             ></a>
                             <div class="media-body o_partner_body" style="min-height: 64px;">
-                                <a class="media-heading" t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}">
+                                <a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}">
                                     <span t-field="partner.display_name"/>
                                 </a>
                                 <div t-field="partner.website_short_description"/>
@@ -167,11 +167,11 @@
         <h3 id="references">References</h3>
         <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media">
           <t t-if="reference.website_published">
-            <a class="float-left" t-attf-href="/customers/#{slug(reference)}">
+            <a t-attf-href="/customers/#{slug(reference)}">
                 <span t-field="reference.image_small" t-options='{"widget": "image", "class": "d-block mx-auto"}'/>
             </a>
             <div class="media-body" style="min-height: 64px;">
-                <a class="media-heading" t-attf-href="/customers/#{slug(reference)}">
+                <a t-attf-href="/customers/#{slug(reference)}">
                     <span t-field="reference.self"/>
                 </a>
                 <div t-field='reference.website_short_description'/>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index d970252a638..e2ee949ef54 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -34,13 +34,13 @@
 
                     <p t-if="not partners">No result found</p>
                     <t t-foreach="partners" t-as="partner">
-                        <div class="media">
-                            <a class="float-left" t-attf-href="/customers/#{slug(partner)}"
+                        <div class="media mt-3">
+                            <a t-attf-href="/customers/#{slug(partner)}"
                                t-field="partner.image_small"
-                               t-options='{"widget": "image", "class": "media-object"}'
+                               t-options='{"widget": "image"}'
                             ></a>
                             <div class="media-body" style="min-height: 64px;">
-                                <a class="media-heading" t-attf-href="/customers/#{slug(partner)}">
+                                <a t-attf-href="/customers/#{slug(partner)}">
                                     <span t-field="partner.display_name"/>
                                 </a>
                                 <t t-if="partner.industry_id">
@@ -215,13 +215,13 @@
 <template id="references_block" name="Partner References Block">
         <t t-if="any([p.website_published for p in partner.implemented_partner_ids])">
             <h3 id="references">References</h3>
-            <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media">
+            <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media mt-3">
               <t t-if="reference.website_published">
-                <a class="float-left" t-attf-href="/customers/#{slug(reference)}">
+                <a t-attf-href="/customers/#{slug(reference)}">
                     <span t-field="reference.image_small" t-options='{"widget": "image", "class": "d-block mx-auto"}'/>
                 </a>
                 <div class="media-body" style="min-height: 64px;">
-                    <a class="media-heading" t-attf-href="/customers/#{slug(reference)}">
+                    <a t-attf-href="/customers/#{slug(reference)}">
                         <span t-field="reference.self"/>
                     </a>
                     <t t-if="reference.industry_id">
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index 73829be73c2..e454e13c2d6 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -44,10 +44,10 @@
                         <h1>No event found</h1>
                         <p groups="event.group_event_manager">Use the top menu <i>'Content'</i> to create your first event.</p>
                     </div>
-                    <ul class="media-list">
-                        <li t-foreach="event_ids" t-as="event" class="media">
+                    <ul class="list-unstyled">
+                        <li t-foreach="event_ids" t-as="event" t-attf-class="media#{' mt-3' if event_index else ''}">
                             <div itemscope="itemscope" itemtype="http://schema.org/Event" class="media-body">
-                                <h4 class="media-heading">
+                                <h4>
                                     <a itemprop="url" t-att-class="event.state == 'done' and 'text-success'" t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register' or ''}"><span itemprop="name" t-field="event.name"> </span></a>
                                     <small t-if="event.is_participating" class="badge badge-info">Participating</small>
                                     <small t-if="event.is_online" class="badge badge-info">Online</small>
@@ -311,8 +311,8 @@
             <hr/>
             <div itemprop="description" t-field="event.description"></div>
             <div class="clearfix"/>
-            <ul class="media-list" id="comment">
-                <li t-foreach="event.website_message_ids" t-as="comment" class="media">
+            <ul class="list-unstyled" id="comment">
+                <li t-foreach="event.website_message_ids" t-as="comment" class="media mt-3">
                     <div class="media-body">
                         <t t-call="website.publish_management">
                             <t t-set="object" t-value="comment"/>
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 12957493869..77f5ca9e4c0 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -38,10 +38,10 @@
                                 </h4>
                             </div>
                         </div>
-                        <ul class="media-list" t-if="jobs">
-                            <li t-foreach="jobs" t-as="job" class="media">
+                        <ul class="list-unstyled" t-if="jobs">
+                            <li t-foreach="jobs" t-as="job" t-attf-class="media#{' mt-3' if job_index else ''}">
                                 <div class="media-body" t-att-data-publish="job.website_published and 'on' or 'off'">
-                                    <h3 class="media-heading">
+                                    <h3>
                                         <a t-attf-href="/jobs/detail/#{ slug(job) }">
                                             <span t-field="job.name"/>
                                         </a>
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 0e8a671fb2b..b8d77cbd4e5 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -110,7 +110,7 @@
                                     <div class="col-lg-12 mb32">
                                         <h3>The <t t-esc="len(ratings)"/> last feedbacks</h3>
                                         <div style="text-align:center">
-                                            <t t-foreach="ratings" t-as="rating" class="media">
+                                            <t t-foreach="ratings" t-as="rating">
                                                 <img t-attf-src='/rating/static/src/img/rating_#{int(rating.rating)}.png' t-att-alt="rating.res_name"/>
                                                 <t t-if="(rating_index+1) % 10 == 0">
                                                     <br/>
@@ -126,12 +126,12 @@
                         </div>
                         <div class="col-lg-4 mb32">
                             <h3>The Team</h3>
-                            <t t-foreach="team" t-as="user" class="media">
-                                <div class="media">
-                                    <div class="float-left" t-if='user.image_small'>
+                            <t t-foreach="team" t-as="user">
+                                <div class="media mt-3">
+                                    <t t-if="user.image_small">
                                         <img t-att-src="user.image_small and ('data:image/png;base64,' + to_text(user.image_small)) or '/web/static/src/img/placeholder.png'"
                                             class="rounded" t-att-alt="user.name"/>
-                                    </div>
+                                    </t>
                                     <div class="media-body">
                                         <h5><t t-esc="user.name"/></h5>
                                     </div>
@@ -160,12 +160,12 @@
                             <t t-if="len(channels)">
                                 <div class="col-lg-6 offset-lg-3">
                                     <t t-foreach="channels" t-as="channel">
-                                        <div class="media">
-                                            <a class="float-left" t-attf-href="/livechat/channel/#{ slug(channel)}">
+                                        <div t-attf-class="media#{' mt-3' if channel_index else ''}">
+                                            <a t-attf-href="/livechat/channel/#{ slug(channel)}">
                                                 <img t-att-src="channel.image_small and ('data:image/png;base64,' + to_text(channel.image_small)) or '/web/static/src/img/placeholder.png'" t-att-alt="channel.name" />
                                             </a>
                                             <div class="media-body">
-                                                <h4 class="media-heading"><t t-esc="channel.name"/></h4>
+                                                <h4><t t-esc="channel.name"/></h4>
                                             </div>
                                         </div>
                                     </t>
diff --git a/addons/website_mail_channel/static/src/js/website_mail_channel.js b/addons/website_mail_channel/static/src/js/website_mail_channel.js
index efafbe89bf9..b7f1f223731 100644
--- a/addons/website_mail_channel/static/src/js/website_mail_channel.js
+++ b/addons/website_mail_channel/static/src/js/website_mail_channel.js
@@ -33,7 +33,7 @@ $(document).ready(function () {
             if (! data) {
                 return true;
             }
-            var $thread_container = $link.parents('.o_mg_replies').first().find('ul.media-list');
+            var $thread_container = $link.parents('.o_mg_replies').first().find('ul.list-unstyled');
             if ($thread_container) {
                 var $last_msg = $thread_container.find('li.media').last();
                 $(data).find('li.media').insertAfter($last_msg);
diff --git a/addons/website_mail_channel/views/website_mail_channel_templates.xml b/addons/website_mail_channel/views/website_mail_channel_templates.xml
index 0f72f3df2e9..4bd8353e5b5 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -199,10 +199,10 @@
                         </h4>
                     </div>
                     <div class="media">
-                        <img class="rounded float-left mt0 media-object o_mg_avatar" alt="Avatar"
-                            t-att-src="website.image_url(message, 'author_avatar')"/>
+                        <img class="rounded mt0 o_mg_avatar"
+                            t-att-src="website.image_url(message, 'author_avatar')"  alt="Avatar"/>
                         <div class="media-body">
-                            <h4 class="media-heading" t-esc="message.description"/>
+                            <h4 t-esc="message.description"/>
                             <small>
                                 by
                                 <t t-if="message.author_id">
@@ -258,12 +258,12 @@
 
 <template id="messages_short">
     <div>
-        <ul class="media-list">
-            <li t-foreach="messages" t-as="thread" class="media">
-                <img class="rounded float-left mt0 media-object o_mg_avatar" alt="Avatar"
+        <ul class="list-unstyled">
+            <li t-foreach="messages" t-as="thread" class="media mt-3">
+                <img class="rounded mt-0 o_mg_avatar" alt="Avatar"
                     t-att-src="website.image_url(thread, 'author_avatar')"/>
                 <div class="media-body">
-                    <h4 class="media-heading">
+                    <h4>
                         <a t-attf-href="/groups/#{slug(group)}/#{slug(thread)}?mode=#{mode}&amp;date_begin=#{date_begin}&amp;date_end=#{date_end}" t-esc="thread.description"/>
                     </h4>
                     <small>
diff --git a/addons/website_membership/views/website_membership_templates.xml b/addons/website_membership/views/website_membership_templates.xml
index e637f56b825..7493434af6b 100644
--- a/addons/website_membership/views/website_membership_templates.xml
+++ b/addons/website_membership/views/website_membership_templates.xml
@@ -52,13 +52,13 @@
                             <h3 class="text-center"><span t-esc="membership_data['name']"/></h3>
                             <t t-foreach="memberships_partner_ids[membership_data['id']]" t-as="partner_id">
                                 <t t-set="partner" t-value="partners[partner_id]"/>
-                                <div class="media">
-                                    <a class="float-left" t-attf-href="/members/#{slug(partner)}"
+                                <div class="media mt-3">
+                                    <a t-attf-href="/members/#{slug(partner)}"
                                        t-field="partner.image_small"
                                        t-options='{"widget": "image", "class": "media-object"}'
                                     ></a>
                                     <div class="media-body" style="min-height: 64px;">
-                                        <a class="media-heading" t-attf-href="/members/#{slug(partner)}">
+                                        <a t-attf-href="/members/#{slug(partner)}">
                                             <span t-field="partner.display_name"/>
                                         </a>
                                         <div t-field="partner.website_short_description"/>
diff --git a/addons/website_sale_options/views/website_sale_options_templates.xml b/addons/website_sale_options/views/website_sale_options_templates.xml
index 036edc21c13..e33e1e5b489 100644
--- a/addons/website_sale_options/views/website_sale_options_templates.xml
+++ b/addons/website_sale_options/views/website_sale_options_templates.xml
@@ -98,7 +98,7 @@
                 </td>
                 <td class='td-product_name'>
                   <div class="float-left">
-                    <strong class="media-heading" t-field="product.name"/>
+                    <strong t-field="product.name"/>
                     <div class="text-muted small" t-field="product.description_sale"/>
                   </div>
                 </td>
diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml
index dfc1c5785f7..2680624ca14 100644
--- a/addons/website_slides/views/website_slides.xml
+++ b/addons/website_slides/views/website_slides.xml
@@ -635,7 +635,7 @@
                         <div role="tabpanel" id="related" class="tab-pane active mt4">
                             <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                                 <div class="card">
-                                    <ul class="media-list card-body">
+                                    <ul class="list-unstyled card-body">
                                         <t t-set="related_slides_list" t-value="list(related_slides)"/>
                                         <t t-if="not related_slides_list">
                                             No presentation available.
@@ -650,7 +650,7 @@
                         <div role="tabpanel" id="most_viewed" class="tab-pane  mt4">
                             <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                                 <div class="card">
-                                    <ul class="media-list card-body">
+                                    <ul class="list-unstyled card-body">
                                         <t t-set="most_viewed_slides_list" t-value="list(most_viewed_slides)"/>
                                         <t t-if="not list(most_viewed_slides_list)">
                                             No presentation available.
@@ -672,11 +672,11 @@
 <!-- Slide sub-template: display an item in a list of related slides (Related, Most Viewed, ...) -->
 <template id="related_slides" name="Related Slide">
     <li class="media">
-        <a class="media-left float-left" t-attf-href="/slides/slide/#{slug(slide)}">
-                <img class="media-object oe_slides_apart_small" t-attf-src="/web/image/slide.slide/#{slide.id}/image_thumb" alt="slide.name"/>
+        <a t-attf-href="/slides/slide/#{slug(slide)}">
+            <img class="oe_slides_apart_small" t-attf-src="/web/image/slide.slide/#{slide.id}/image_thumb" alt="slide.name"/>
         </a>
         <div class="media-body">
-            <a t-attf-href="/slides/slide/#{slug(slide)}"><h5 class="media-heading" t-esc="slide.name"/></a>
+            <a t-attf-href="/slides/slide/#{slug(slide)}"><h5 t-esc="slide.name"/></a>
             <small class="text-muted">
                 <t t-esc="slide.total_views"/> Views . <timeago class="timeago" t-att-datetime="slide.create_date"></timeago>
             </small>