odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[FIX] website: repair compatibility with 8.0rc1 carousel (banner) snippets that may be present in existing pages

This commit is contained in:
Christophe Matthieu 2014-10-01 18:46:13 +02:00 committed by Olivier Dony
parent e883193246
commit f8d5a6727d
5 changed files with 140 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
addons/website/static/src/css/website.css
View File

@ -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;
}

59
addons/website/static/src/css/website.sass
View File

@ -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

20
addons/website/static/src/js/website.snippets.editor.js
View File

@ -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');
},
});

4
addons/website/views/snippets.xml
View File

@ -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>

6
addons/website_event/data/event_demo.xml
View File

@ -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>