From f8243ffc842caa4688c646af9e7a4973ab77c80c Mon Sep 17 00:00:00 2001
From: David Monjoie <dmo@odoo.com>
Date: Fri, 19 Dec 2014 15:39:34 +0100
Subject: [PATCH] [IMP] Add classnames to snippets body and replace mb*, mt*
 from snippet body's root by proper styling on the classes

Backport of 7f07d10 and 6adcccd
---
 addons/website/static/src/css/snippets.css  | 42 +++++++++++++++++
 addons/website/static/src/css/snippets.sass | 33 ++++++++++++++
 addons/website/views/snippets.xml           | 50 ++++++++++-----------
 3 files changed, 100 insertions(+), 25 deletions(-)

diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 1084e30ed25..83e5a83a38c 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -786,3 +786,45 @@ table.table_desc tr td:last-child {
 .oe_snippet.o_block_quotes_slider .oe_snippet_thumbnail_img {
   background-image: url("/website/static/src/img/blocks/block_quotes_slider.png");
 }
+
+/* snippets default margins */
+.s_banner {
+  margin-bottom: 32px;
+}
+
+.s_big_message {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.s_text_block {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.s_features {
+  margin-top: 16px;
+}
+
+.s_big_picture {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.s_three_columns {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.s_references {
+  margin-top: 16px;
+  margin-bottom: 32px;
+}
+
+.s_quotes_slider {
+  margin-bottom: 0px;
+}
+
+.s_features_grid {
+  margin-bottom: 16px;
+}
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index 1e876e697eb..6aba0d51daf 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -638,3 +638,36 @@ table.table_desc tr td
     &.o_block_quotes_slider .oe_snippet_thumbnail_img
         background-image: url('/website/static/src/img/blocks/block_quotes_slider.png')
 // }}}
+
+/* snippets default margins */
+.s_banner
+    margin-bottom: 32px
+
+.s_big_message
+    margin-top: 16px
+    margin-bottom: 16px
+
+.s_text_block
+    margin-top: 16px
+    margin-bottom: 16px
+
+.s_features
+    margin-top: 16px
+
+.s_big_picture
+    margin-top: 16px
+    margin-bottom: 16px
+
+.s_three_columns
+    margin-top: 16px
+    margin-bottom: 16px
+
+.s_references
+    margin-top: 16px
+    margin-bottom: 32px
+
+.s_quotes_slider
+    margin-bottom: 0px
+
+.s_features_grid
+    margin-bottom: 16px
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 16d92e25524..9e040b57eb7 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -14,7 +14,7 @@
 <div id="snippet_structure" class="tab-pane active">
 
     <div name="Banner" class="o_block_banner">
-        <div id="myCarousel" class="carousel slide mb32" data-interval="10000" style="height: 320px;">
+        <div id="myCarousel" class="carousel slide s_banner" data-interval="10000" style="height: 320px;">
             <!-- Indicators -->
             <ol class="carousel-indicators hidden">
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
@@ -43,7 +43,7 @@
     </div>
 
     <div name="Text-Image" class="o_block_text_image">
-        <section>
+        <section class="s_text_image">
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 mt16">
@@ -67,7 +67,7 @@
 
 
     <div name="Image-Text" class="o_block_image_text">
-        <section>
+        <section class="s_image_text">
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 mt16">
@@ -90,7 +90,7 @@
     </div>
 
     <div name="Image-Floating" class="o_block_image_float">
-        <section>
+        <section class="s_image_floating">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 mb16 mt16">
@@ -133,7 +133,7 @@
     </div>
 
     <div name="Big Message" class="o_block_jumbotron">
-        <section class="jumbotron mt16 mb16">
+        <section class="jumbotron s_big_message">
             <div class="container">
                 <h1>Sell Online. Easily.</h1>
                 <p>
@@ -150,7 +150,7 @@
 
 
     <div name="Text Block" class="o_block_text_block">
-        <section class="mt16 mb16">
+        <section class="s_text_block">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt16 mb32">
@@ -184,7 +184,7 @@
 
 
     <div name="Title" class="o_block_title">
-        <section>
+        <section class="s_title">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12">
@@ -197,7 +197,7 @@
     </div>
 
     <div name="Features" class="o_block_features">
-        <section class="mb16">
+        <section class="s_features">
             <div class="container">
                 <div class="row mt16 mb16">
                     <div class="col-md-4 text-center">
@@ -221,7 +221,7 @@
     </div>
 
     <div name="Big Picture" class="o_block_big_picture">
-        <section class="oe_dark mt16 mb16">
+        <section class="oe_dark s_big_picture">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt32 mb32">
@@ -249,7 +249,7 @@
     </div>
 
     <div name="Three Columns" class="o_block_three_columns">
-        <section class="mt16 mb16">
+        <section class="s_three_columns">
             <div class="container">
                 <div class="row">
                     <div class="col-md-4">
@@ -290,7 +290,7 @@
 <div id="snippet_content" class="tab-pane">
 
     <div name="Well" class="o_block_well">
-        <div class="well">
+        <div class="well s_well">
             <p>
                 Explain the benefits you offer. Don't write about products or
                 services here, write about solutions.
@@ -300,7 +300,7 @@
 
 
     <div name="Quote" class="o_block_quote">
-        <blockquote>
+        <blockquote class="s_quote">
             <p>
                 Write a quote here from one of your customers. Quotes are a
                 great way to build confidence in your products or services.
@@ -311,7 +311,7 @@
 
 
     <div name="Panel" class="o_block_panel">
-        <div class="panel panel-default">
+        <div class="panel panel-default s_panel">
             <div class="panel-heading">
                 <h3 class="panel-title">Feature Title</h3>
             </div>
@@ -325,7 +325,7 @@
     </div>
 
     <div name="Image Floating" class="o_block_image_floating">
-        <div class="o_image_floating o_margin_l pull-right">
+        <div class="o_image_floating o_margin_l pull-right s_image_floating">
             <div class="o_container">
                 <img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png"/>
                 <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
@@ -337,11 +337,11 @@
     </div>
 
     <div name="Separator" class="o_block_separator">
-        <hr/>
+        <hr class="s_separator"/>
     </div>
 
     <div name="Share" class="o_block_button">
-        <div class="oe_share">
+        <div class="oe_share s_share">
             <h3>
                 Share 
                 <a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}"><i class="fa fa-facebook-square"></i></a>
@@ -359,7 +359,7 @@
 
     <div name="Image Gallery" class="o_block_image_gallery">
 
-        <section class="o_gallery o_spc-medium o_slideshow" data-columns="3" style="height: 500px; overflow: hidden;">
+        <section class="o_gallery o_spc-medium o_slideshow s_image_gallery" data-columns="3" style="height: 500px; overflow: hidden;">
             <div class="container">
                 <div class="alert alert-info css_editable_mode_display">Add Images from the 'Customize' menu</div>
             </div>
@@ -369,7 +369,7 @@
 
 
     <div name="Comparisons" class="o_block_comparison">
-        <section>
+        <section class="s_comparisons">
             <div class="container">
               <div class="row">
                 <div class="col-md-12 text-center mt16 mb32">
@@ -472,7 +472,7 @@
 
 
     <div name="Button" class="o_block_button">
-        <section class="jumbotron">
+        <section class="jumbotron s_button">
             <div class="container">
                 <div class="row">
                     <div class="col-md-9 text-muted">
@@ -495,7 +495,7 @@
 
 
     <div name="FAQ" class="o_block_faq">
-        <section>
+        <section class="s_faq">
             <div class="container">
                 <h2 class="page-header">
                     Point of Sale Questions <small>v7</small>
@@ -538,7 +538,7 @@
 
 
     <div name="References" class="o_block_references">
-        <section class="mb32 mt16">
+        <section class="s_references">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12">
@@ -588,7 +588,7 @@
     </div>
 
     <div name="Quotes Slider" class="o_block_quotes_slider">
-        <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
+        <div id="myQuoteCarousel" class="carousel quotecarousel slide s_quotes_slider" data-interval="10000">
             <!-- Indicators -->
             <ol class="carousel-indicators mb0">
                 <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
@@ -637,7 +637,7 @@
     </div>
 
     <div name="Feature Grid" class="o_block_features">
-        <section class="mb16">
+        <section class="s_feature_grid">
             <div class="container">
                 <div class="row">
                     <div class="col-md-5 text-center">
@@ -692,7 +692,7 @@
 <div id="snippet_effect" class="tab-pane">
 
     <div name="Parallax" class="o_block_parallax">
-        <section class="parallax"
+        <section class="parallax s_parallax"
                 style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
                 data-scroll-background-ratio="0.3">
                 <div><div class="oe_structure"/></div>
@@ -700,7 +700,7 @@
     </div>
 
     <div name="Parallax Slider" class="o_block_quotes_slider">
-        <section class="parallax"
+        <section class="parallax s_parallax_slider"
                  style="background-image: url('/website/static/src/img/parallax/quote.png')"
                 data-scroll-background-ratio="0.3">
             <div><div><div class="oe_structure">