[FIX] website: repair compatibility with 8.0rc1 carousel (banner) snippets that may be present in existing pages
This commit is contained in:
parent
e883193246
commit
f8d5a6727d
|
@ -543,3 +543,63 @@ div.media_iframe_video .css_editable_mode_display {
|
|||
transform: none !important;
|
||||
}
|
||||
}
|
||||
/* Fix: backward compatibility saas-3 */
|
||||
div.carousel .container > .carousel-caption {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
}
|
||||
div.carousel .container > .carousel-caption > div {
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
bottom: 20px;
|
||||
}
|
||||
div.carousel .container > .carousel-image {
|
||||
top: 5%;
|
||||
bottom: 5%;
|
||||
position: absolute;
|
||||
max-height: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
div.carousel .item.text_image .container > .carousel-caption {
|
||||
left: 10%;
|
||||
}
|
||||
div.carousel .item.text_image .container > .carousel-caption > div {
|
||||
right: 50%;
|
||||
margin-right: -20%;
|
||||
max-width: 550px;
|
||||
}
|
||||
div.carousel .item.text_image .container > .carousel-image {
|
||||
right: 10%;
|
||||
left: 50%;
|
||||
}
|
||||
div.carousel .item.image_text .container > .carousel-caption {
|
||||
right: 10%;
|
||||
}
|
||||
div.carousel .item.image_text .container > .carousel-caption > div {
|
||||
left: 50%;
|
||||
margin-left: -20%;
|
||||
max-width: 550px;
|
||||
}
|
||||
div.carousel .item.image_text .container > .carousel-image {
|
||||
right: 50%;
|
||||
left: 10%;
|
||||
}
|
||||
div.carousel .item.text_only .container > .carousel-caption {
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
top: 10%;
|
||||
bottom: auto;
|
||||
}
|
||||
div.carousel .item.text_only .container > .carousel-caption > div {
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
bottom: auto;
|
||||
width: 100%;
|
||||
}
|
||||
div.carousel .item.text_only .container > .carousel-image {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
@ -442,3 +442,62 @@ div.media_iframe_video
|
|||
-ms-transform: none !important
|
||||
-o-transform: none !important
|
||||
transform: none !important
|
||||
|
||||
|
||||
/* Fix: backward compatibility saas-3 */
|
||||
|
||||
div.carousel
|
||||
.container
|
||||
> .carousel-caption
|
||||
position: absolute
|
||||
right: 50%
|
||||
left: 50%
|
||||
bottom: 20px
|
||||
> div
|
||||
position: absolute
|
||||
text-align: left
|
||||
padding: 20px
|
||||
background: rgba(0, 0, 0, 0.4)
|
||||
bottom: 20px
|
||||
> .carousel-image
|
||||
top: 5%
|
||||
bottom: 5%
|
||||
position: absolute
|
||||
max-height: 90%
|
||||
margin: 0 auto
|
||||
.item.text_image
|
||||
.container
|
||||
> .carousel-caption
|
||||
left: 10%
|
||||
> div
|
||||
right: 50%
|
||||
margin-right: -20%
|
||||
max-width: 550px
|
||||
> .carousel-image
|
||||
right: 10%
|
||||
left: 50%
|
||||
.item.image_text
|
||||
.container
|
||||
> .carousel-caption
|
||||
right: 10%
|
||||
> div
|
||||
left: 50%
|
||||
margin-left: -20%
|
||||
max-width: 550px
|
||||
> .carousel-image
|
||||
right: 50%
|
||||
left: 10%
|
||||
.item.text_only
|
||||
.container
|
||||
> .carousel-caption
|
||||
left: 10%
|
||||
right: 10%
|
||||
top: 10%
|
||||
bottom: auto
|
||||
> div
|
||||
text-align: center
|
||||
background: transparent
|
||||
bottom: auto
|
||||
width: 100%
|
||||
> .carousel-image
|
||||
display: none !important
|
||||
|
|
|
@ -1003,7 +1003,19 @@
|
|||
this.$target.find('.carousel-control, .carousel-indicators').removeClass("hidden");
|
||||
this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
|
||||
|
||||
var $clone = this.$target.find(".item.active").clone();
|
||||
// clone the best candidate from template to use new features
|
||||
var $snippets = this.BuildingBlock.$snippets.find('.oe_snippet_body.carousel');
|
||||
var point = 0;
|
||||
var selection;
|
||||
var className = _.compact(this.$target.attr("class").split(" "));
|
||||
$snippets.each(function () {
|
||||
var len = _.intersection(_.compact(this.className.split(" ")), className).length;
|
||||
if (len > point) {
|
||||
point = len;
|
||||
selection = this;
|
||||
}
|
||||
});
|
||||
var $clone = $(selection).find('.item:first').clone();
|
||||
|
||||
// insert
|
||||
$clone.removeClass('active').insertAfter($active);
|
||||
|
@ -1115,10 +1127,10 @@
|
|||
var self = this;
|
||||
this.$target.find('.carousel-control').off('click').on('click', function () {
|
||||
self.$target.carousel( $(this).data('slide')); });
|
||||
|
||||
this.$target.find('.carousel-image, .carousel-inner .content > div').attr('contentEditable', 'true');
|
||||
this.$target.find('.carousel-image').attr('attributeEditable', 'true');
|
||||
this._super();
|
||||
|
||||
/* Fix: backward compatibility saas-3 */
|
||||
this.$target.find('.item.text_image .container').find('> .carousel-caption > div, > img.carousel-image').attr('contentEditable', 'true');
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="item image_text active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
|
||||
<div class="item active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
|
||||
<div class="container">
|
||||
<div class="row content">
|
||||
<div class="carousel-content col-md-6 col-sm-12">
|
||||
|
@ -35,7 +35,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<span class="carousel-img col-md-6 hidden-sm hidden-xs">
|
||||
<img class="carousel-image img-responsive" src="/website/static/src/img/banner/banner_picture.png" alt="Banner Odoo Image"/>
|
||||
<img class="img-responsive" src="/website/static/src/img/banner/banner_picture.png" alt="Banner Odoo Image"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<h4>to learn .JS development</h4>
|
||||
</div>
|
||||
<img class="carousel-image hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
|
||||
<img class="hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -180,7 +180,7 @@
|
|||
|
||||
<h4>to learn .JS development</h4>
|
||||
</div>
|
||||
<img class="carousel-image hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
|
||||
<img class="hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -355,7 +355,7 @@
|
|||
<h4>to learn .JS development</h4>
|
||||
</div>
|
||||
|
||||
<img class="carousel-image hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
|
||||
<img class="hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue