diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index 4f0d9074892..385456aea26 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -161,8 +161,54 @@ footer { margin-bottom: 0px; } -.carousel .item { - color: white; +.carousel-inner .item { + height: 100%; +} + +.carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 { + margin-top: 10px; + margin-bottom: 10px; +} +.carousel .carousel-image { + right: 10%; + left: 50%; + top: 5%; + bottom: 5%; + position: absolute; + text-align: center; +} +.carousel .carousel-image img { + height: 100%; + margin: 0 auto; +} +.carousel .item.text_image .carousel-caption { + left: auto; + right: auto; + bottom: 10%; + text-align: left; + padding: 20px; + background: rgba(0, 0, 0, 0.4); +} +.carousel .item.text_only .carousel-image { + display: none; +} +.carousel .item.text_only .carousel-caption { + left: 10%; + right: 10%; + top: 10%; + text-align: center; +} +.carousel .item.image_text .carousel-caption { + left: auto; + text-align: left; + right: 10%; + bottom: 10%; + padding: 20px; + background: rgba(0, 0, 0, 0.4); +} +.carousel .item.image_text .carousel-image { + right: 50%; + left: 10%; } /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */ diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index f3a8c0129f4..482e6241075 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -127,8 +127,51 @@ footer // .nav > li a // display: block -.carousel .item - color: white +.carousel-inner .item + height: 100% + +.carousel + .carousel-caption + h1, h2, h3 + margin-top: 10px + margin-bottom: 10px + .carousel-image + right: 10% + left: 50% + top: 5% + bottom: 5% + position: absolute + text-align: center + img + height: 100% + margin: 0 auto + .item.text_image + .carousel-caption + left: auto + right: auto + bottom: 10% + text-align: left + padding: 20px + background: rgba(0, 0, 0, 0.4) + .item.text_only + .carousel-image + display: none + .carousel-caption + left: 10% + right: 10% + top: 10% + text-align: center + .item.image_text + .carousel-caption + left: auto + text-align: left + right: 10% + bottom: 10% + padding: 20px + background: rgba(0, 0, 0, 0.4) + .carousel-image + right: 50% + left: 10% /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */ diff --git a/addons/website/static/src/img/banner/banner_picture.png b/addons/website/static/src/img/banner/banner_picture.png new file mode 100644 index 00000000000..47836637498 Binary files /dev/null and b/addons/website/static/src/img/banner/banner_picture.png differ diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index 5800c842067..2a82e2394d0 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -787,13 +787,21 @@ //style var style = false; - if (this.$target.find('.carousel-inner .item.active .container .content_image.col-lg-offset-1')) - style = 'image_right'; - if (this.$target.find('.carousel-inner .item.active .container .content_image')) - style = 'image_left'; + var el = this.$target.find('.carousel-inner'); + if (el.hasClass('text_only')) + style = 'text_only'; + if (el.hasClass('image_text')) + style = 'image_text'; + if (el.hasClass('text_image')) + style = 'text_image'; + this.$editor.find('select[name="carousel-style"] option[value="'+style+'"]').prop('selected', true); - this.$editor.find('select[name="carousel-style"]').on('change', this.on_bg_change); + this.$editor.find('select[name="carousel-style"]').on('change', function(e) { + var $container = self.$target.find('.carousel-inner .item.active'); + $container.removeClass('image_text text_image text_only') + $container.addClass($(e.currentTarget).val()) + }); }, on_add: function (e) { e.preventDefault(); @@ -812,30 +820,6 @@ this.$target.carousel(0); } }, - on_bg_change: function (e) { - var $container = this.$target.find('.carousel-inner .item.active .container'); - var img_url = $('.content_image img', $container).attr("src"); - if (!img_url) { - img_url = this.img_url || "/website/static/src/img/china.jpg"; - } else { - this.img_url = img_url; - } - - $('.content_image', $container).remove(); - switch ($(e.currentTarget).val()) { - case 'no_image': - $('.content', $container).attr("class", "content"); - break; - case 'image_left': - $('.content', $container).attr("class", "content col-md-6") - .before('
'); - break; - case 'image_right': - $('.content', $container).attr("class", "content col-md-6") - .after('
'); - break; - } - }, }); website.snippet.editorRegistry.darken = website.snippet.Editor.extend({ diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index 1e3aae70901..ed1aadf6278 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -56,16 +56,16 @@ - +
Banner
@@ -73,13 +73,18 @@
-
-
+
+
-
+

Create Awesome Websites

Super easy, fully flexible

- Contact us +

+ Contact us +

+
+
+ Banner OpenERP Image
@@ -88,17 +93,6 @@
- - -
-
-
-

Your New Banner Slide

-

With another convincing subtitle

- Contact us -
-
-
@@ -212,7 +206,7 @@
Jumbotron
-
+

Sell Online. Easily.

@@ -229,7 +223,7 @@

Text Block
-
+
@@ -258,7 +252,7 @@
Big Picture
-
+
@@ -289,7 +283,7 @@
Three Columns
-
+
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml index 9daf9fef87c..dff4effa8be 100644 --- a/addons/website/views/views.xml +++ b/addons/website/views/views.xml @@ -160,97 +160,7 @@