From 86a1b78f99c29d629ca2be2961b740e08cc0a96c Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 22 Feb 2021 15:18:08 +0000
Subject: [PATCH] [FIX] website, website_sale: fix right corner ribbon

Before this commit, when ribbon was at the right corner of a product
card, this ribbon hid the buttons in list view.

After this commit, in list view, we place the ribbon on the left to
avoid this bug. There was no better solution to fix this in stable.

task-2466120

closes odoo/odoo#67898

X-original-commit: dcddf2125652b03bf4bff385c074fef0b2096f1d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/scss/primary_variables.scss    | 31 +++++++++++++++++++
 addons/website/static/src/scss/website.scss   | 20 +++---------
 addons/website_sale/i18n/website_sale.pot     |  2 +-
 .../static/src/scss/website_sale.scss         |  6 ++++
 .../website_sale/views/snippets/snippets.xml  |  2 +-
 5 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index e1b876e3ada..5d1bd417c6b 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -376,3 +376,34 @@ $o-theme-font-configs: (
         'url': 'Arvo:300,300i,400,400i,700,700i',
     ),
 ) !default;
+
+//------------------------------------------------------------------------------
+// Mixins
+//------------------------------------------------------------------------------
+
+@mixin o-ribbon-right() {
+    @include o-position-absolute($top: 0, $right: 0);
+    padding: 0.5rem $ribbon-padding;
+    // 0.708 is 1 - cos(45deg)
+    // Transforms are applied right-to-left
+    // Cannot use matrix because of the use of % values.
+    transform: translateX(calc(-0.708 * (100% - #{2 * $ribbon-padding}))) rotate(45deg) translateX(calc(100% - #{$ribbon-padding}));
+    transform-origin: top right;
+};
+
+@mixin o-ribbon-left() {
+    @include o-position-absolute($top: 0, $left: 0);
+    padding: 0.5rem $ribbon-padding;
+    transform: translateX(calc(0.708 * (100% - #{2 * $ribbon-padding}) - 100%)) rotate(-45deg) translateX($ribbon-padding);
+    transform-origin: top right;
+};
+
+@mixin o-tag-right() {
+    @include o-position-absolute($top: 0, $right: 0);
+    padding: 0.25rem 1rem;
+};
+
+@mixin o-tag-left() {
+    @include o-position-absolute($top: 0, $left: 0);
+    padding: 0.25rem 1rem;
+};
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 80cfed35889..bf42f2610d7 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1365,6 +1365,7 @@ header {
     }
 }
 
+// Ribbons
 $ribbon-padding: 100px;
 .o_ribbon {
     margin: 0;
@@ -1376,30 +1377,19 @@ $ribbon-padding: 100px;
 }
 
 .o_ribbon_right {
-    @include o-position-absolute($top: 0, $right: 0);
-    padding: 0.5rem $ribbon-padding;
-    // 0.708 is 1 - cos(45deg)
-    // Transforms are applied right-to-left
-    // Cannot use matrix because of the use of % values.
-    transform: translateX(calc(-0.708 * (100% - #{2 * $ribbon-padding}))) rotate(45deg) translateX(calc(100% - #{$ribbon-padding}));
-    transform-origin: top right;
+    @include o-ribbon-right();
 }
 
 .o_ribbon_left {
-    @include o-position-absolute($top: 0, $left: 0);
-    padding: 0.5rem $ribbon-padding;
-    transform: translateX(calc(0.708 * (100% - #{2 * $ribbon-padding}) - 100%)) rotate(-45deg) translateX($ribbon-padding);
-    transform-origin: top right;
+    @include o-ribbon-left();
 }
 
 .o_tag_right {
-    @include o-position-absolute($top: 0, $right: 0);
-    padding: 0.25rem 1rem;
+    @include o-tag-right();
 }
 
 .o_tag_left {
-    @include o-position-absolute($top: 0, $left: 0);
-    padding: 0.25rem 1rem;
+    @include o-tag-left();
 }
 
 // Cookies Bar
diff --git a/addons/website_sale/i18n/website_sale.pot b/addons/website_sale/i18n/website_sale.pot
index af08e16456b..d737dd516af 100644
--- a/addons/website_sale/i18n/website_sale.pot
+++ b/addons/website_sale/i18n/website_sale.pot
@@ -2206,7 +2206,7 @@ msgstr ""
 
 #. module: website_sale
 #: model_terms:ir.ui.view,arch_db:website_sale.snippet_options
-msgid "Right"
+msgid "Right (only on grid view)"
 msgstr ""
 
 #. module: website_sale
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 982a5aa4e26..0eb2ed1115d 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -278,6 +278,12 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
                         background-color: $white !important;
                     }
                 }
+                .o_ribbon_right {
+                    @include o-ribbon-left();
+                }
+                .o_tag_right {
+                    @include o-tag-left();
+                }
             }
         }
     }
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 22513b2e09f..fa6e7ca6c0b 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -81,7 +81,7 @@
                 </we-select>
                 <we-select string="⌙ Position">
                     <we-button data-set-ribbon-position="left">Left</we-button>
-                    <we-button data-set-ribbon-position="right">Right</we-button>
+                    <we-button data-set-ribbon-position="right">Right (only on grid view)</we-button>
                 </we-select>
             </div>