pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website: fix image carousel

Browse Source 
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
This commit is contained in:
len-odoo
2018-09-26 14:14:14 +00:00
parent 09340bb7f0
commit fd122aec52
3 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/content/snippets.animation.js
+7 -1
View File
@@ -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'),
});
});
},
});
addons/website/static/src/less/website.snippets.less
+12 -9
View File
@@ -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%;
}
}
}
}
addons/website/static/src/xml/website.gallery.xml
+3 -3
View File
@@ -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>