From 6d64212f08b5b2ec6493c0b96d5ecba568a0b337 Mon Sep 17 00:00:00 2001
From: nie <nie@odoo.com>
Date: Wed, 30 Dec 2020 11:41:14 +0000
Subject: [PATCH] [FIX] website: dynamic snippet products overflows on mobile

Steps:
- Install eCommerce
- Go to "Website" > "Go to Website"
- Click Edit
- Add the Dynamic Products block with a template and a category
- Save
- Switch to mobile view

Bug:
The right arrow of the block overflows and makes it possible to scroll
the entire view sideways.

Explanation:
This commit puts back prev and next arrows onto the carousel. It also
changes their design to be more visible over the content. The arrows are
now smaller and displayed in clickable gray circles.

opw:2415187

closes odoo/odoo#64274

X-original-commit: a5d7a1a6f3cf82610802ad84a9ae1baaa3f58e15
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>
Signed-off-by: backspac <backspac@users.noreply.github.com>
---
 .../src/snippets/s_dynamic_snippet_carousel/000.scss | 12 +++++-------
 .../src/snippets/s_dynamic_snippet_carousel/000.xml  |  4 ++--
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
index dee896d1468..3eceb172ab8 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
@@ -1,13 +1,11 @@
 .s_dynamic {
   .carousel-control-prev, .carousel-control-next {
     position: absolute;
-    text-shadow: 0px 0px 3px #343A40;
     width: 4rem;
-  }
-  .carousel-control-prev{
-    left: -4rem
-  }
-  .carousel-control-next{
-    right: -4rem
+
+    > span.fa {
+      color: gray('700');
+      background: radial-gradient($white 50%, transparent 50%);
+    }
   }
 }
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
index ca6cbf4d419..1efb8f22e80 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
@@ -23,11 +23,11 @@
             </div>
             <!-- Controls -->
             <a t-attf-href="##{uniqueId}" class="carousel-control-prev" data-slide="prev" role="button" aria-label="Previous" title="Previous">
-                <span class="fa fa-chevron-left fa-2x text-white"/>
+                <span class="fa fa-chevron-circle-left fa-2x"/>
                 <span class="sr-only">Previous</span>
             </a>
             <a t-attf-href="##{uniqueId}" class="carousel-control-next" data-slide="next" role="button" aria-label="Next" title="Next">
-                <span class="fa fa-chevron-right fa-2x text-white"/>
+                <span class="fa fa-chevron-circle-right fa-2x"/>
                 <span class="sr-only">Next</span>
             </a>
         </div>