From 2b18c1e114d3c67f418e81da8d69e056b75a62a3 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 17 Aug 2018 15:35:42 +0200
Subject: [PATCH] [REF] website_sale(_*): review product item display

* comparison

There is a somewhat big difference between BS3 and BS4: <h5> titles
were the size as normal text and <h6> were smaller while, now, <h5>
titles are a lot bigger (1.25x) than normal text and <h6> are the
same size as normal text.

While both system may be consistent, we feel that standing for BS4 is
the best approach. That way, the smallest <hx> (<h6/>) should be used
for titles of items that are numerous in the page. This is the case
for our shop listing, each product as its own title and before, we used
<h5/> element. Using <h6/> for those feels semantically more consistent
and goes with default BS4 style.

Also review the product comparator popover.
---
 addons/website_sale/views/templates.xml       | 12 ++++-----
 .../website_sale_comparison_template.xml      | 26 ++++++++-----------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index acdd77faa96..5fae66ff3e4 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -107,12 +107,10 @@
                     </div>
                 </t>
                 <section>
-                    <h5>
-                        <strong>
-                            <a itemprop="name" t-att-href="product_href" t-att-content="product.name" t-field="product.name" />
-                        </strong>
+                    <h6>
+                        <a itemprop="name" t-att-href="product_href" t-att-content="product.name" t-field="product.name" />
                         <a role="button" t-if="not show_publish and not product.website_published" t-att-href="product_href" class="btn btn-secondary btn-sm btn-danger" title="This product is unpublished.">Unpublished</a>
-                    </h5>
+                    </h6>
                     <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="product_price" t-if="product.product_variant_ids">
                         <b>
                             <t t-if="product.website_price_difference and website.get_current_pricelist().discount_policy=='without_discount'">
@@ -534,11 +532,11 @@
                         <div class="col-lg-2" style="width: 170px; height:130px; float:left; display:inline; margin-right: 10px; overflow:hidden;">
                             <div class="mt16 text-center" style="height: 100%;">
                                 <div t-field="alt_product.image_small" t-options="{'widget': 'image', 'class': 'rounded shadow o_alternative_product' }" />
-                                <h5>
+                                <h6>
                                     <a t-attf-href="/shop/product/#{ slug(alt_product) }" style="display: block">
                                         <span t-att-title="alt_product.name" t-field="alt_product.name" class="o_text_overflow" style="display: block;" />
                                     </a>
-                                </h5>
+                                </h6>
                             </div>
                         </div>
                     </t>
diff --git a/addons/website_sale_comparison/views/website_sale_comparison_template.xml b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
index dab3096fb87..290798a87b7 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_template.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
@@ -121,24 +121,20 @@
     </template>
 
     <template id="product_product" name="Comparator - Product row in comparator popover">
-        <div class="row mt8 o_product_row" t-att-data-category_ids="product.public_categ_ids.ids">
-            <div class="col-md-3 col-3 mb8">
+        <div class="row no-gutters align-items-center mt-2 o_product_row" t-att-data-category_ids="product.public_categ_ids.ids">
+            <div class="col-3">
                 <img class="img img-fluid" t-attf-src="/web/image/product.product/#{product.id}/image_small" style="max-height: 50px;" alt="Product image"/>
             </div>
-            <div class="col-md-7 col-7 mb8 text-left">
-                <h5>
-                    <strong><a t-attf-href="/shop/product/#{product.product_tmpl_id[0].id}"><t t-esc="product.display_name" /></a></strong>
-                </h5>
-                <h5 class="mt0 mb0">
-                    <strong>
-                        <t t-if="(compute_currency(product.lst_price) - product.website_price ) &gt; 0.01  and website.get_current_pricelist().discount_policy=='without_discount'">
-                            <del class="text-danger mr8" style="white-space: nowrap;" t-esc="compute_currency(product.website_public_price)" t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}" />
-                        </t>
-                        <span t-esc="product.website_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"></span>
-                    </strong>
-                </h5>
+            <div class="col-8 pl-2">
+                <h6>
+                    <a t-attf-href="/shop/product/#{product.product_tmpl_id[0].id}"><t t-esc="product.display_name" /></a><br/>
+                    <t t-if="(compute_currency(product.lst_price) - product.website_price ) &gt; 0.01  and website.get_current_pricelist().discount_policy=='without_discount'">
+                        <del class="text-danger mr8" style="white-space: nowrap;" t-esc="compute_currency(product.website_public_price)" t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}" />
+                    </t>
+                    <span t-esc="product.website_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"></span>
+                </h6>
             </div>
-            <div class="col-md-1 col-1 mt32">
+            <div class="col-1 text-right">
                 <a href='#' class="o_remove" title="Remove" t-att-data-product_product_id="product.id">
                     <i class="fa fa-trash" role="img" aria-label="Remove"></i>
                 </a>