From 900b765b43c305ce1c1fd2cf55904c667913a2da Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 5 Mar 2019 17:21:41 +0000
Subject: [PATCH] [REF] website_sale: allow to customize default aspect ratio
 of grid shop

Part of https://github.com/odoo/odoo/pull/31147
task-1925327
---
 .../static/src/scss/primary_variables.scss    |  1 +
 .../static/src/scss/website_sale.scss         | 24 +++++++++++++------
 addons/website_sale/views/templates.xml       | 10 +++++---
 3 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 addons/website_sale/static/src/scss/primary_variables.scss

diff --git a/addons/website_sale/static/src/scss/primary_variables.scss b/addons/website_sale/static/src/scss/primary_variables.scss
new file mode 100644
index 00000000000..c19ec9aabda
--- /dev/null
+++ b/addons/website_sale/static/src/scss/primary_variables.scss
@@ -0,0 +1 @@
+$o-wsale-products-layout-grid-ratio: 1.0 !default;
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 178641748da..cc19c709616 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -193,15 +193,25 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
             margin-top: 0; // For list and mobile design
         }
 
-        .o_wsale_product_grid_filler + * {
-            @include o-position-absolute(0, 0, 0, 0);
+        .o_wsale_product_grid_filler {
+            @for $x from 1 through 4 {
+                @for $y from 1 through 4 {
+                    &.o_wsale_product_grid_filler_#{$x}_#{$y} {
+                        padding-top: 100% * $o-wsale-products-layout-grid-ratio * $y / $x;
+                    }
+                }
+            }
 
-            @if $o-wsale-products-layout-grid-gutter-width <= 0 {
-                &.card {
-                    border: none;
+            + * {
+                @include o-position-absolute(0, 0, 0, 0);
 
-                    &, .card-body {
-                        border-radius: 0;
+                @if $o-wsale-products-layout-grid-gutter-width <= 0 {
+                    &.card {
+                        border: none;
+
+                        &, .card-body {
+                            border-radius: 0;
+                        }
                     }
                 }
             }
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index d0de096639d..66b3b51c987 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1,6 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <!-- Layout and common templates -->
+    <template id="_assets_primary_variables" inherit_id="website._assets_primary_variables">
+        <xpath expr="//link[last()]" position="after">
+            <link rel="stylesheet" type="text/scss" href="/website_sale/static/src/scss/primary_variables.scss"/>
+        </xpath>
+    </template>
+
     <template id="assets_backend" inherit_id="web.assets_backend">
         <xpath expr="." position="inside">
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_video_field_preview.js"></script>
@@ -234,8 +239,7 @@
                                                     <td t-att-colspan="td_product['x'] != 1 and td_product['x']"
                                                         t-att-rowspan="td_product['y'] != 1 and td_product['y']"
                                                         t-attf-class="oe_product #{td_product['class']}">
-                                                        <div t-attf-class="o_wsale_product_grid_filler"
-                                                            t-attf-style="padding-top: #{'%.2f' % (100 * td_product['y'] / td_product['x'])}%;"/>
+                                                        <div t-attf-class="o_wsale_product_grid_filler o_wsale_product_grid_filler_#{td_product['x']}_#{td_product['y']}"/>
                                                         <t t-call="website_sale.products_item">
                                                             <t t-set="product_image_big" t-value="td_product['x'] + td_product['y'] &gt; 2"/>
                                                         </t>