[FIX] website: BS4, restore gallery snippet
This commit is contained in:
Kishan Gajjar
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user