[FIX] website: fix image carousel

We fix a number of problems:
    - grayscale filter not being applied except on desktop Firefox
    - incorrect vertical-align on iOS
    - image sliders being displayed below the margin on iOS
    - carousel indicators flickering at initial load
    - very short indicator panel, almost unusable on mobile
    - misaligned indicators because of first margin
There are two modes on which these fixes apply:
    - image gallery in slideshow
    - slideshow in modal
       (e.g. obtained by clicking on the gallery set on masonry mode)
Note that due to a refactoring, the gallerySlider was not loaded in the modal,
completely breaking the indicators.

Coauthored by @nle-odoo

opw 1874274

closes odoo/odoo#27226

1 files changed, 12 insertions, 9 deletions

diff --git a/addons/website/static/src/less/website.snippets.less b/addons/website/static/src/less/website.snippets.less
index 72ff52c852a..71be3c8a1b0 100644
--- a/addons/website/static/src/less/website.snippets.less
+++ b/addons/website/static/src/less/website.snippets.less
@@ -357,30 +357,27 @@ div.carousel .container {
                 border-width: 0;
                 position: absolute;
                 bottom: 0;
+                width: 100%;
+                margin-left: 0;
+                left: 0%;
 
                 > * {
                     list-style-image: none;
                     display: inline-block;
                     width: 40px;
                     height: 40px;
-                    margin: 0 0px 5px 5px;
+                    margin: 2.5px 2.5px 2.5px 2.5px;
                     padding: 0;
                     border: 1px solid #aaa;
                     text-indent: initial;
                     background-size: cover;
                     background-color: #fff;
                     border-radius: 0;
+                    vertical-align: bottom;
 
                     &:not(.active) {
                         opacity: 0.8;
-                        -webkit-filter: grayscale(100%);
-                        filter: grayscale(100%);
-                        filter: gray;
-                        filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
-                    }
-
-                    &:first-child {
-                        margin-left: 0;
+                        filter: grayscale(1);
                     }
                 }
             }
@@ -390,6 +387,12 @@ div.carousel .container {
                     background-image: none;
                     background-color: transparent;
                 }
+                &.left * {
+                    right: 0%;
+                }
+                &.right * {
+                    left: 0%;
+                }
             }
         }
     }