[FIX] wesbite: banner - remove css and use bootstrap for positionning. Now hidden-xs works, we don't lost 50% of width

bzr revid: jke@openerp.com-20140414142631-k78shkqjqdtcnp83

4 files changed, 30 insertions, 137 deletions

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 91cee76248f..94de70dc7dc 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -305,69 +306,6 @@ ul.nav-stacked > li > a {
   background-size: cover;
 }
 
-.carousel .carousel-caption {
-  position: absolute;
-  right: 50%;
-  left: 50%;
-  bottom: 20px;
-}
-.carousel .carousel-caption > div {
-  position: absolute;
-  text-align: left;
-  padding: 20px;
-  background: rgba(0, 0, 0, 0.4);
-  bottom: 20px;
-}
-.carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-.carousel .carousel-image {
-  top: 5%;
-  bottom: 5%;
-  position: absolute;
-  max-height: 90%;
-  margin: 0 auto;
-}
-.carousel .item.text_only .carousel-image {
-  display: none !important;
-}
-.carousel .item.text_only .carousel-caption {
-  left: 10%;
-  right: 10%;
-  top: 10%;
-  bottom: auto;
-}
-.carousel .item.text_only .carousel-caption > div {
-  text-align: center;
-  background: transparent;
-  bottom: auto;
-  width: 100%;
-}
-.carousel .item.text_image .carousel-caption {
-  left: 10%;
-}
-.carousel .item.text_image .carousel-caption > div {
-  right: 50%;
-  margin-right: -20%;
-  max-width: 550px;
-}
-.carousel .item.text_image .carousel-image {
-  right: 10%;
-  left: 50%;
-}
-.carousel .item.image_text .carousel-caption {
-  right: 10%;
-}
-.carousel .item.image_text .carousel-caption > div {
-  left: 50%;
-  margin-left: -20%;
-  max-width: 550px;
-}
-.carousel .item.image_text .carousel-image {
-  right: 50%;
-  left: 10%;
-}
 .carousel .carousel-control {
   cursor: pointer;
 }
@@ -410,6 +348,16 @@ div.carousel .carousel-indicators li {
 div.carousel .carousel-indicators .active {
   background-color: grey;
 }
+div.carousel span.carousel-img img, div.carousel div.carousel-content {
+  max-height: 95%;
+  padding: 10px;
+}
+div.carousel div.carousel-content {
+  background-color: black;
+  color: white;
+  background: rgba(0, 0, 0, 0.3);
+  margin-top: 75px;
+}
 
 .parallax {
   background-size: cover;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index e3c6bd7a052..a9707799177 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -250,59 +250,6 @@ ul.nav-stacked > li > a
         height: 100%
         background-size: cover
 .carousel
-    .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
-        h1, h2, h3
-            margin-top: 10px
-            margin-bottom: 10px
-    .carousel-image
-        top: 5%
-        bottom: 5%
-        position: absolute
-        max-height: 90%
-        margin: 0 auto
-    .item.text_only
-        .carousel-image
-            display: none !important
-        .carousel-caption
-            left: 10%
-            right: 10%
-            top: 10%
-            bottom: auto
-            > div
-                text-align: center
-                background: transparent
-                bottom: auto
-                width: 100%
-    .item.text_image
-        .carousel-caption
-            left: 10%
-            > div
-                right: 50%
-                margin-right: -20%
-                max-width: 550px
-        .carousel-image
-            right: 10%
-            left: 50%
-    .item.image_text
-        .carousel-caption
-            right: 10%
-            > div
-                left: 50%
-                margin-left: -20%
-                max-width: 550px
-        .carousel-image
-            right: 50%
-            left: 10%
     .carousel-control
         cursor: pointer
         span
@@ -338,6 +285,14 @@ div.carousel
             border: 1px solid grey
         .active
             background-color: grey
+    span.carousel-img img, div.carousel-content
+        max-height: 95%
+        padding: 10px        
+    div.carousel-content
+        background-color: black
+        color: white
+        background: rgba(0, 0, 0, 0.3)
+        margin-top: 75px
 
 .parallax
     background-size: cover
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index f8731bf5055..f057b7b822c 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -934,7 +934,7 @@
         drop_and_build_snippet: function() {
             this.id = this.unique_id();
             this.$target.attr("id", this.id);
-            this.$target.find("[data-slide]").attr("data-target", "#" + this.id);
+            this.$target.find("[data-slide]").attr("data-cke-saved-href", "#" + this.id);
             this.$target.find("[data-slide-to]").attr("data-target", "#" + this.id);
 
             this.rebind_event();
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index d7174c80287..0b705c3a52f 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -26,16 +26,18 @@
             <div class="carousel-inner">
                 <div class="item image_text active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
                     <div class="container">
-                        <div class="carousel-caption content">
-                            <div>
-                                <h2>Your Banner Title</h2>
-                                <h3>Click to customize this text</h3>
-                                <p>
-                                    <a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
-                                </p>
+                        <div class="row content">
+                            <div class="carousel-content col-md-6 col-sm-12">
+                                    <h2>Your Banner Title</h2>
+                                    <h3>Click to customize this text</h3>
+                                    <p>
+                                        <a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
+                                    </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 OpenERP Image"/>
+                            </span> 
                         </div>
-                        <img class="carousel-image hidden-xs" src="/website/static/src/img/banner/banner_picture.png" alt="Banner OpenERP Image"/>
                     </div>
                 </div>
             </div>
@@ -900,18 +902,6 @@
         </li>
     </div>
 
-    <div data-snippet-option-id='carousel-style'
-        data-selector=".carousel:not(.quotecarousel)">
-        <li class="dropdown-submenu" data-required="true">
-            <a tabindex="-1" href="#">Layout</a>
-            <ul class="dropdown-menu">
-                <li data-value="text_only"><a>Text Only</a></li>
-                <li data-value="image_text"><a>Image - Text</a></li>
-                <li data-value="text_image"><a>Text - Image</a></li>
-            </ul>
-        </li>
-    </div>
-
     <div data-snippet-option-id='carousel'
         data-selector=".carousel">
         <li class="divider"></li>