[MERGE] from trunk

bzr revid: chm@openerp.com-20140411082050-lr7vtew6yvsqaon6

6 files changed, 167 insertions, 33 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 0bd20bdcca9..9b708057852 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -94,6 +94,10 @@
   display: none;
 }
 
+.cke_editable .css_editable_mode_display {
+  display: block !important;
+}
+
 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
   background-image: url("/website/static/src/img/edit_here.png") !important;
 }
@@ -180,7 +184,7 @@ ul.oe_menu_editor .disclose {
   cursor: text !important;
 }
 
-.modal-dialog.select-image {
+.modal-dialog.select-media {
   width: 80%;
 }
 
@@ -212,7 +216,7 @@ ul.oe_menu_editor .disclose {
 
 .modal .font-icons-icons {
   font-size: 2em;
-  max-height: 6em;
+  max-height: 9em;
   overflow: auto;
 }
 .modal .font-icons-icons .font-icons-icon {
@@ -271,6 +275,10 @@ ul.oe_menu_editor .disclose {
   -webkit-border-bottom-right-radius: 8px;
   border-bottom-right-radius: 8px;
 }
+.existing-attachments .existing-attachment-cell.media_selected > i, .existing-attachments .existing-attachment-cell.media_selected > img {
+  border-width: 5px;
+  border-color: #00f8f8;
+}
 
 .cke_widget_wrapper {
   position: static !important;
@@ -296,17 +304,34 @@ ul.oe_menu_editor .disclose {
   background-color: #ffd9dd !important;
 }
 
-.hover-edition-button {
+.hover-edition {
+  display: inline-block;
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1001;
+}
+
+.preview-container {
+  text-align: center;
+  line-height: 100px;
+  height: 100px;
+}
+.preview-container > * {
+  max-height: 100px;
+  line-height: 100px;
+  margin: 0 auto;
+  display: inline-block;
 }
 
 .cke_editable .fa {
   cursor: pointer;
 }
 
+.img-responsive {
+  text-align: center;
+}
+
 /* ---- MOBILE PREVIEW ---- {{{ */
 .oe_mobile_preview.modal .modal-content {
   height: 660px;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index bd0f4628009..b9db2bc5bbb 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -77,6 +77,9 @@
 .cke_editable .css_editable_mode_hidden
     display: none
 
+.cke_editable .css_editable_mode_display
+    display: block !important
+
 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
     background-image: url('/website/static/src/img/edit_here.png') !important
 
@@ -150,7 +153,7 @@ ul.oe_menu_editor
     +user-select(auto)
     cursor: text !important
 
-.modal-dialog.select-image
+.modal-dialog.select-media
     width: 80%
 
 .modal .existing-attachments
@@ -179,7 +182,7 @@ ul.oe_menu_editor
 .modal
     .font-icons-icons
         font-size: 2em
-        max-height: 6em
+        max-height: 9em
         overflow: auto
 
         .font-icons-icon
@@ -232,6 +235,10 @@ $attachment-border-color: #848490
             border-top: none
             border-left: none
             +border-bottom-right-radius(8px)
+        &.media_selected
+            > i, > img 
+                border-width: 5px
+                border-color: rgb(0, 248, 248)
 
 // wrapper positioned relatively for drag&drop widget which is disabled below.
 // Breaks completely horribly crazy products listing page, so take it out.
@@ -259,17 +266,30 @@ $attachment-border-color: #848490
     outline: 1px solid red !important
     background-color: #ffd9dd !important
 
-.hover-edition-button
+.hover-edition
+    display: inline-block
     position: absolute
     top: 0
     left: 0
-    // This z-index is due to .navbar of bootstrap
-    z-index: 1000
+    // This z-index is due to .navbar of bootstrap & jQuery-transfo
+    z-index: 1001
+.preview-container
+    text-align: center
+    line-height: 100px
+    height: 100px
+    > *
+        max-height: 100px
+        line-height: 100px
+        margin: 0 auto
+        display: inline-block
 
 // fontawesome
 .cke_editable .fa
     cursor: pointer
 
+.img-responsive
+    text-align: center
+
 // }}}
 
 /* ---- MOBILE PREVIEW ---- {{{ */
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 726855f311b..cbfca8be131 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -201,6 +201,7 @@
   height: 0;
   position: absolute;
   background: transparent;
+  z-index: 1001;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -325,11 +326,13 @@
   top: auto;
   left: 50%;
   bottom: -6px;
+  margin-left: -50px;
 }
 .oe_overlay .oe_handle.size .oe_handle_button {
+  position: relative;
   z-index: 3;
   text-align: center;
-  margin-left: -32px;
+  margin-left: -52px;
   margin-top: -10px;
   left: 0px;
 }
@@ -341,15 +344,17 @@
   box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 }
 .oe_overlay .oe_handle.size .size {
+  position: absolute;
   width: 64px;
   cursor: row-resize;
   top: 9px;
+  margin-left: 52px;
+  padding: 0 5px;
 }
 .oe_overlay .oe_handle.size .auto_size {
-  width: 20px;
-  padding: 0 5px;
-  top: 1px;
-  margin-left: 36px;
+  position: absolute;
+  width: 100px;
+  top: 9px;
   cursor: pointer;
 }
 .oe_overlay .oe_handle.readonly {
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index 9b12e9df246..40467897e26 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -151,6 +151,7 @@
     height: 0
     position: absolute
     background: transparent
+    z-index: 1001
     //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
     +border-radius(3px)
     @include transition(opacity 100ms linear)
@@ -238,10 +239,12 @@
             top: auto
             left: 50%
             bottom: -6px
+            margin-left: -50px
             .oe_handle_button
+                position: relative
                 z-index: 3
                 text-align: center
-                margin-left: -32px
+                margin-left: -52px
                 margin-top: -10px
                 left: 0px
                 &:hover
@@ -249,14 +252,16 @@
                     color: #fff
                     +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
             .size
+                position: absolute
                 width: 64px
                 cursor: row-resize
                 top: 9px
-            .auto_size
-                width: 20px
+                margin-left: 52px
                 padding: 0 5px
-                top: 1px
-                margin-left: 36px
+            .auto_size
+                position: absolute
+                width: 100px
+                top: 9px
                 cursor: pointer
         &.readonly
             cursor: auto !important
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 354796a053e..9339b5e03b9 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
@@ -284,10 +285,6 @@ ul.nav-stacked > li > a {
   background-size: 100%;
 }
 
-section, .carousel, .parallax, .row, .hr, .blockquote {
-  min-height: 30px;
-}
-
 .carousel, .parallax, .blockquote {
   overflow: hidden;
 }
@@ -376,17 +373,33 @@ section, .carousel, .parallax, .row, .hr, .blockquote {
   position: absolute;
   margin-top: -8px;
 }
-.carousel .carousel-control.left span {
-  left: 10px;
+.carousel .carousel-control.left {
+  left: -10px;
+}
+.carousel .carousel-control.left * {
+  position: absolute;
+  top: 50%;
+  z-index: 5;
+  right: 50%;
 }
-.carousel .carousel-control.right span {
-  right: 10px;
+.carousel .carousel-control.right {
+  right: -10px;
+}
+.carousel .carousel-control.right * {
+  position: absolute;
+  top: 50%;
+  z-index: 5;
+  left: 50%;
 }
 
 .quotecarousel {
   padding-bottom: 16px;
 }
 
+.hr {
+  padding: 4px 0;
+}
+
 /* Parallax Theme */
 div.carousel .carousel-indicators li {
   border: 1px solid grey;
@@ -527,3 +540,33 @@ span[data-oe-type="monetary"] {
   width: 400px;
   margin: 40px auto;
 }
+
+div.media_iframe_video {
+  height: 0;
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 66.5%;
+}
+div.media_iframe_video iframe {
+  width: 100%;
+  height: 100%;
+}
+div.media_iframe_video div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+
+/* Mobile view */
+@media (max-width: 768px) {
+  img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
+    -webkit-transform: none !important;
+    -moz-transform: none !important;
+    -ms-transform: none !important;
+    -o-transform: none !important;
+    transform: none !important;
+  }
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 77da53c2958..e8a7d870623 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -234,8 +234,6 @@ ul.nav-stacked > li > a
 .oe_img_bg
     background-size: 100%
 
-section, .carousel, .parallax, .row, .hr, .blockquote
-    min-height: 30px
 .carousel, .parallax, .blockquote
     overflow: hidden
 
@@ -308,14 +306,27 @@ section, .carousel, .parallax, .row, .hr, .blockquote
             top: 50%
             position: absolute
             margin-top: -8px
-        &.left span
-            left: 10px
-        &.right span
-            right: 10px
+        &.left
+            left: -10px
+            *
+                position: absolute
+                top: 50%
+                z-index: 5
+                right: 50%
+        &.right
+            right: -10px
+            *
+                position: absolute
+                top: 50%
+                z-index: 5
+                left: 50%
 
 .quotecarousel
     padding-bottom: 16px
 
+.hr
+    padding: 4px 0
+
 /* Parallax Theme */
 
 div.carousel
@@ -434,3 +445,28 @@ span[data-oe-type="monetary"]
     overflow:hidden
     text-overflow:ellipsis
 
+div.media_iframe_video
+    height: 0
+    margin: 0 auto
+    text-align: center
+    position: relative
+    overflow: hidden
+    padding-bottom: 66.5%
+    iframe
+        width: 100%
+        height: 100%
+    div
+        position: absolute
+        width: 100%
+        height: 100%
+        display: none
+
+/* Mobile view */
+
+@media (max-width: 768px)
+    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
+        -webkit-transform: none !important
+        -moz-transform: none !important
+        -ms-transform: none !important
+        -o-transform: none !important
+        transform: none !important