[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

3 files changed, 22 insertions, 13 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index d9dc076f596..9f4a1566d35 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -678,6 +678,7 @@ registry.gallery = Animation.extend({
      * @param {Event} ev
      */
     _onClickImg: function (ev) {
+        var self = this;
         var $cur = $(ev.currentTarget);
 
         var urls = [];
@@ -722,7 +723,12 @@ registry.gallery = Animation.extend({
         $modal.find('.modal-content, .modal-body.o_slideshow').css('height', '100%');
         $modal.appendTo(document.body);
 
-        this.carousel = new registry.gallery_slider($modal.find('.carousel').carousel());
+        $modal.one('shown.bs.modal', function () {
+            self.trigger_up('animation_start_demand', {
+                editableMode: false,
+                $target: $modal.find('.modal-body.o_slideshow'),
+            });
+        });
     },
 });
 
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%;
+                }
             }
         }
     }
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 76bf650e76d..919da3c53d4 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -20,11 +20,11 @@
             </div>
 
             <ul class="carousel-indicators">
-                <li class="fa fa-chevron-left o_indicators_left" style="overflow: hidden; padding: 12px; border: 0;"></li>
+                <li class="fa fa-chevron-left o_indicators_left" style="overflow: hidden; padding: 12px; border: 0; visibility: hidden;"></li>
                 <t t-foreach="srcs" t-as="src">
-                    <li t-attf-data-target="##{id}" t-att-data-slide-to="src_index" t-att-class="src_index == index and 'active'" t-attf-style="background-image: url(#{src})"></li>
+                    <li t-attf-data-target="##{id}" t-att-data-slide-to="src_index" t-att-class="'hidden ' + (src_index == index and 'active')" t-attf-style="background-image: url(#{src})"></li>
                 </t>
-                <li class="fa fa-chevron-right o_indicators_right" style="overflow: hidden; padding: 12px; border: 0;"></li>
+                <li class="fa fa-chevron-right o_indicators_right" style="overflow: hidden; padding: 12px; border: 0; visibility: hidden;"></li>
             </ul>
 
             <a class="carousel-control left" t-attf-href="##{id}" data-slide="prev"><span class="fa fa-chevron-left" /></a>