From 2a29f373f0714d9e9eb0fa27be6482bd5155e46f Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Wed, 1 Jun 2022 07:16:08 +0000
Subject: [PATCH] [IMP] mass_mailing: product_list snippet improved

Replaced bootstrap classes by inline styles and removed
`.o_default_snippet_text`.
Wrapping the `<a>` in a `<p>` allows the user to align the button
separately from the text.
On mobile, the columns are stacked, the paddings top and bottom are thus
moved to the columns to allow top and bottom spacing between them.

Part-of: odoo/odoo#95940
---
 .../views/snippets/s_product_list.xml         | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/addons/mass_mailing/views/snippets/s_product_list.xml b/addons/mass_mailing/views/snippets/s_product_list.xml
index 54ae4e06aee..cb361327a4d 100644
--- a/addons/mass_mailing/views/snippets/s_product_list.xml
+++ b/addons/mass_mailing/views/snippets/s_product_list.xml
@@ -2,35 +2,29 @@
 <odoo>
 
 <template id="s_product_list" name="Items">
-    <div class="s_mail_product_list pt24 pb24 o_mail_snippet_general" data-snippet="s_product_list">
+    <div class="s_mail_product_list o_mail_snippet_general" data-snippet="s_product_list">
         <div class="container">
             <div class="row">
-                <div class="col-lg-4">
+                <div class="col-lg-4 o_cc pt16 pb16">
                     <a href="">
-                        <img src="/web/image/mass_mailing.s_product_list_default_image_1" alt="" class="img img-fluid"/>
+                        <img src="/web/image/mass_mailing.s_product_list_default_image_1" alt="" class="img img-fluid" style="padding: 15px 0px"/>
                     </a>
-                    <div class="pt16 text-center">
-                        <p>Check out all our furniture</p>
-                        <a class="btn btn-primary o_default_snippet_text" href="">Furniture</a>
-                    </div>
+                    <p style="text-align: center;">Check out all our furniture</p>
+                    <p style="text-align: center;"><a class="btn btn-primary" href="#">Furniture</a></p>
                 </div>
-                <div class="col-lg-4">
+                <div class="col-lg-4 o_cc pt16 pb16">
                     <a href="">
-                        <img src="/web/image/mass_mailing.s_product_list_default_image_2" alt="" class="img img-fluid"/>
+                        <img src="/web/image/mass_mailing.s_product_list_default_image_2" alt="" class="img img-fluid" style="padding: 15px 0px"/>
                     </a>
-                    <div class="pt16 text-center">
-                        <p>Check out all our clothes</p>
-                        <a class="btn btn-primary o_default_snippet_text" href="">Clothes</a>
-                    </div>
+                    <p style="text-align: center;">Check out all our clothes</p>
+                    <p style="text-align: center;"><a class="btn btn-primary" href="#">Clothes</a></p>
                 </div>
-                <div class="col-lg-4">
+                <div class="col-lg-4 o_cc pt16 pb16">
                     <a href="">
-                        <img src="/web/image/mass_mailing.s_product_list_default_image_3" alt="" class="img img-fluid"/>
+                        <img src="/web/image/mass_mailing.s_product_list_default_image_3" alt="" class="img img-fluid" style="padding: 15px 0px"/>
                     </a>
-                    <div class="pt16 text-center" data-bs-original-title="" title="" aria-describedby="tooltip540733">
-                        <p>Check out all our books</p>
-                        <a class="btn btn-primary o_default_snippet_text" href="">Books</a>
-                    </div>
+                    <p style="text-align: center;">Check out all our books</p>
+                    <p style="text-align: center;"><a class="btn btn-primary" href="#">Books</a></p>
                 </div>
             </div>
         </div>