[FIX] website: BS4, restore gallery snippet

4 files changed, 23 insertions, 20 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index f084ecb11fc..a7b65d465b1 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -758,9 +758,9 @@ registry.gallerySlider = Animation.extend({
         var self = this;
         this.$carousel = this.$target.is('.carousel') ? this.$target : this.$target.find('.carousel');
         this.$indicator = this.$carousel.find('.carousel-indicators');
-        this.$prev = this.$indicator.find('li.fa:first').css('visibility', ''); // force visibility as some databases have it hidden
-        this.$next = this.$indicator.find('li.fa:last').css('visibility', '');
-        var $lis = this.$indicator.find('li:not(.fa)');
+        this.$prev = this.$indicator.find('li.o_indicators_left').css('visibility', ''); // force visibility as some databases have it hidden
+        this.$next = this.$indicator.find('li.o_indicators_right').css('visibility', '');
+        var $lis = this.$indicator.find('li[data-slide-to]');
         var nbPerPage = Math.floor(this.$indicator.width() / $lis.first().outerWidth(true)) - 3; // - navigator - 1 to leave some space
         var realNbPerPage = nbPerPage || 1;
         var nbPages = Math.ceil($lis.length / realNbPerPage);
@@ -796,14 +796,14 @@ registry.gallerySlider = Animation.extend({
 
         this.$carousel.on('slide.bs.carousel.gallery_slider', function () {
             setTimeout(function () {
-                var $item = self.$carousel.find('.carousel-inner .prev, .carousel-inner .next');
+                var $item = self.$carousel.find('.carousel-inner .carousel-item-prev, .carousel-inner .carousel-item-next');
                 var index = $item.index();
                 $lis.removeClass('active')
                     .filter('[data-slide-to="'+index+'"]')
                     .addClass('active');
             }, 0);
         });
-        this.$indicator.on('click.gallery_slider', '> li.fa', function () {
+        this.$indicator.on('click.gallery_slider', '> li:not([data-slide-to])', function () {
             page += ($(this).hasClass('o_indicators_left') ? -1 : 1);
             page = Math.max(0, Math.min(nbPages - 1, page)); // should not be necessary
             self.$carousel.carousel(page * realNbPerPage);
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 49c8edd5b81..ea18b0576ae 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -938,6 +938,7 @@ options.registry.gallery = options.Class.extend({
      * Displays the images with the "masonry" layout.
      */
     masonry: function () {
+        var self = this;
         var imgs = this._getImages();
         var columns = this._getColumns();
         var colClass = 'col-lg-' + (12 / columns);
@@ -960,7 +961,7 @@ options.registry.gallery = options.Class.extend({
             var $lowest;
             _.each(cols, function (col) {
                 var $col = $(col);
-                var height = $col.height();
+                var height = $col.is(':empty') ? 0 : $col.find('img').last().offset().top + $col.find('img').last().height() - self.$target.offset().top;
                 if (height < min) {
                     min = height;
                     $lowest = $col;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index c926dfe6df7..fba54ae9a91 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -759,7 +759,11 @@ table.table_desc tr td {
     &.o_slideshow {
         .carousel {
             height: 100%;
-            .item {
+            .carousel-inner {
+                height: 100%;
+            }
+            .carousel-item {
+                height: 100%;
                 padding-bottom: 64px;
             }
             img {
@@ -768,7 +772,6 @@ table.table_desc tr td {
                 margin: auto;
             }
             ul.carousel-indicators {
-                display: block;
                 height: auto;
                 padding: 0;
                 border-width: 0;
@@ -786,6 +789,7 @@ table.table_desc tr td {
                     background-size: cover;
                     background-color: #fff;
                     border-radius: 0;
+                    flex: 0 0 40px;
                     &:not(.active) {
                         opacity: 0.8;
                         -webkit-filter: grayscale(100%);
@@ -798,12 +802,6 @@ table.table_desc tr td {
                     }
                 }
             }
-            .carousel-control {
-                &.right, &.left {
-                    background-image: none;
-                    background-color: transparent;
-                }
-            }
         }
     }
 }
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 026b75c2377..7289bc7fb2e 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -11,24 +11,28 @@
     -->
     <t t-name="website.gallery.slideshow">
         <div t-attf-id="#{id}" class="carousel slide" data-ride="carousel" t-attf-data-interval="#{interval}" style="margin: 0 12px;">
-            <div class="carousel-inner container" style="padding: 0;">
+            <div class="carousel-inner" style="padding: 0;">
                  <t t-foreach="srcs" t-as="src">
                     <div t-attf-class="carousel-item #{src_index == index and 'active' or ''}">
-                        <img t-attf-class="img img-fluid #{userStyle}" t-att-src="src" alt="Slide image"/>
+                        <img t-attf-class="img img-fluid d-block #{userStyle}" t-att-src="src" alt="Slide image"/>
                     </div>
                  </t>
             </div>
 
             <ul class="carousel-indicators">
-                <li class="fa fa-chevron-left o_indicators_left" style="overflow: hidden; padding: 12px; border: 0;" aria-label="Previous" title="Previous"></li>
+                <li class="o_indicators_left text-center pt-2" aria-label="Previous" title="Previous">
+                    <i class="fa fa-chevron-left"/>
+                </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>
                 </t>
-                <li class="fa fa-chevron-right o_indicators_right" style="overflow: hidden; padding: 12px; border: 0;" aria-label="Next" title="Next"></li>
+                <li class="o_indicators_right text-center pt-2" aria-label="Next" title="Next">
+                    <i class="fa fa-chevron-right"/>
+                </li>
             </ul>
 
-            <a class="carousel-control-prev" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous"><span class="fa fa-chevron-left"/></a>
-            <a class="carousel-control-next" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next"><span class="fa fa-chevron-right"/></a>
+            <a class="carousel-control-prev text-black" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous"><span class="fa fa-chevron-left"/></a>
+            <a class="carousel-control-next text-black" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next"><span class="fa fa-chevron-right"/></a>
         </div>
     </t>