[IMP] 3 cols to respect icon and make it easier for new users to start with

bzr revid: fp@tinyerp.com-20140224110148-12lndtuaztxypgmw

diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js
index 53489b1..1d4a0c0 100644 (file)
--- a/addons/website/static/src/js/website.tour.banner.js
+++ b/addons/website/static/src/js/website.tour.banner.js
@@ -69,10 +69,10 @@
                     popover:   { fixed: true },
                 },
                 {
-                    snippet:   'three-columns',
+                    snippet:   'features',
                     placement: 'bottom',
                     title:     _t("Drag & Drop This Block"),
-                    content:   _t("Drag the <em>'Three Columns'</em> block and drop it below the banner."),
+                    content:   _t("Drag the <em>'Features'</em> block and drop it below the banner."),
                     popover:   { fixed: true },
                 },
                 {

diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 968d468..f43c1c1 100644 (file)
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -23,7 +23,7 @@
         </li>
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_banner.png"/>
-            <span class="oe_snippet_thumbnail_title">Banner</span>         
+            <span class="oe_snippet_thumbnail_title">Banner</span>
         </div>
         <div id="myCarousel" class="oe_snippet_body carousel slide mb32" style="height: 320px;">
             <!-- Indicators -->
@@ -147,16 +147,16 @@
                             A great way to catch your reader's attention is to tell a story.
                             Everything you consider writing can be told as a story.
                         </p><p>
-                            <b>Great stories have personality</b>. Consider telling 
-                            a great story that provides personality. Writing a story 
-                            with personality for potential clients will asist with 
+                            <b>Great stories have personality</b>. Consider telling
+                            a great story that provides personality. Writing a story
+                            with personality for potential clients will asist with
                             making a relationship connection. This shows up in small
-                            quirks like word choices or phrases. Write from your point 
+                            quirks like word choices or phrases. Write from your point
                             of view, not from someone else's experience.
                         </p><p>
                             <b>Great stories are for everyone even when only written for
                             just one person</b>. If you try to write with a wide general
-                            audience in mind, your story will ring false and be bland. 
+                            audience in mind, your story will ring false and be bland.
                             No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
                         </p>
                     </div>
@@ -183,11 +183,41 @@
         </section>
     </div>
 
+    <div data-snippet-id="features" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_features.png"/>
+            <span class="oe_snippet_thumbnail_title">Features</span>
+        </div>
+        <section class="oe_snippet_body mb16">
+            <div class="container">
+                <div class="row mt16 mb16">
+                    <div class="col-md-4 text-center">
+                        <span class="fa fa-suitcase fa-5x"></span>
+                        <h3 class="mt8 mb0">First Feature</h3>
+                        <div class="text-muted">Tell what's the value for the</div>
+                        <div class="text-muted">customer for this feature.</div>
+                    </div>
+                    <div class="col-md-4 text-center">
+                        <span class="fa fa-lock fa-5x"></span>
+                        <h3 class="mt8 mb0">Second Feature</h3>
+                        <div class="text-muted">Write what the customer would like to know,</div>
+                        <div class="text-muted">not what you want to show.</div>
+                    </div>
+                    <div class="col-md-4 text-center">
+                        <span class="fa fa-heart fa-5x"></span>
+                        <h3 class="mt8 mb0">Third Feature</h3>
+                        <div class="text-muted">A small explanation of this great</div>
+                        <div class="text-muted">feature, in clear words.</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
 
     <div data-snippet-id="big-picture" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_big_picture.png"/>
-            <span class="oe_snippet_thumbnail_title">Big Picture</span>          
+            <span class="oe_snippet_thumbnail_title">Big Picture</span>
         </div>
         <section class="oe_snippet_body oe_dark mt16 mb16">
             <div class="container">
@@ -216,11 +246,10 @@
         </section>
     </div>
 
-
     <div data-snippet-id="three-columns" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_three_columns.png"/>
-            <span class="oe_snippet_thumbnail_title">Three Columns</span>            
+            <span class="oe_snippet_thumbnail_title">Three Columns</span>
         </div>
         <section class="oe_snippet_body mt16 mb16">
             <div class="container">
@@ -258,66 +287,6 @@
         </section>
     </div>
 
-    <div data-snippet-id="slider" data-selector-children=".oe_structure, [data-oe-type=html]">
-        <li class="oe_snippet_options divider"></li>
-        <li class="oe_snippet_options">
-            <a href="#" class="button js_add">Add Slide</a>
-        </li>
-        <li class="oe_snippet_options">
-            <a href="#" class="button js_remove">Remove Slide</a>
-        </li>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
-            <span class="oe_snippet_thumbnail_title">Quotes Slider</span>         
-        </div>
-        <div id="myQuoteCarousel" class="oe_snippet_body carousel quotecarousel slide mb0">
-            <!-- Indicators -->
-            <ol class="carousel-indicators mb0">
-                <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
-                <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
-            </ol>
-            <div class="carousel-inner">
-
-                <div class="item text_only active">
-                    <div class="container">
-                        <div class="content">
-
-                            <div class="row">
-                                <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
-                                        <p>
-                                            Write a quote here from one of your customers. Quotes are a
-                                            great way to build confidence in your products or services.
-                                        </p>
-                                        <small>Author of this quote</small>
-                                </blockquote>
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-
-                <div class="item text_only">
-                    <div class="container">
-                        <div class="content">
-
-                            <div class="row">
-                                <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
-                                        <p>
-                                            OpenERP provides essential platform for our project management.
-                                            Things are better organized and more visible with it.
-                                        </p>
-                                        <small>John Doe, CEO</small>
-                                </blockquote>
-                            </div>
-
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-    </div>
-
 </div>
 
 <div id="snippet_content" class="tab-pane fade">
@@ -335,7 +304,7 @@
 
 
     <div data-snippet-id="quote" data-selector-siblings="p, h1, h2, h3, blockquote" data-selector-children=".content">
-        <div class="oe_snippet_thumbnail">            
+        <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quote.png"/>
             <span class="oe_snippet_thumbnail_title">Quote</span>
         </div>
@@ -369,7 +338,7 @@
     <div data-snippet-id="hr" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_separator.png"/>
-            <span class="oe_snippet_thumbnail_title">Separator</span>        
+            <span class="oe_snippet_thumbnail_title">Separator</span>
         </div>
         <hr class="oe_snippet_body"/>
     </div>
@@ -414,7 +383,7 @@
     <div data-snippet-id="image-gallery" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_gallery.png"/>
-            <span class="oe_snippet_thumbnail_title">Image Gallery</span> 
+            <span class="oe_snippet_thumbnail_title">Image Gallery</span>
         </div>
         <section class="oe_snippet_body">
             <div class="container">
@@ -467,7 +436,7 @@
 
                 <div class="col-md-4">
                     <div class="panel panel-info">
-                      
+
                       <div class="panel-heading text-center">
                           <h2 style="margin: 0">Beginner</h2>
                           <p style="margin: 0" class="text-muted">
@@ -479,7 +448,7 @@
                         <div>per month</div>
                       </div>
 
-                      
+
                       <ul class="list-group">
                         <li class="list-group-item active">Battery: 8 hours</li>
                         <li class="list-group-item">Screen: 2.5 inch</li>
@@ -496,7 +465,7 @@
                 </div>
                 <div class="col-md-4">
                     <div class="panel panel-primary">
-                      
+
                       <div class="panel-heading text-center">
                           <h2 style="margin: 0">Professional</h2>
                           <p style="margin: 0">
@@ -508,7 +477,7 @@
                         <div>per month</div>
                       </div>
 
-                      
+
                       <ul class="list-group">
                         <li class="list-group-item active">Battery: 12 hours</li>
                         <li class="list-group-item">Screen: 2.8 inch</li>
@@ -525,7 +494,7 @@
                 </div>
                 <div class="col-md-4">
                     <div class="panel panel-info">
-                      
+
                       <div class="panel-heading text-center">
                           <h2 style="margin: 0">Expert</h2>
                           <p style="margin: 0" class="text-muted">
@@ -537,7 +506,7 @@
                         <div>per month</div>
                       </div>
 
-                      
+
                       <ul class="list-group">
                         <li class="list-group-item active">Battery: 20 hours</li>
                         <li class="list-group-item">Screen: 2.8 inch</li>
@@ -579,7 +548,7 @@
     <div data-snippet-id="faq" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_faq.png"/>
-            <span class="oe_snippet_thumbnail_title">FAQ</span>  
+            <span class="oe_snippet_thumbnail_title">FAQ</span>
         </div>
         <section class="oe_snippet_body">
             <div class="container">
@@ -626,7 +595,7 @@
     <div data-snippet-id="references" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_references.png"/>
-            <span class="oe_snippet_thumbnail_title">References</span> 
+            <span class="oe_snippet_thumbnail_title">References</span>
         </div>
         <section class="oe_snippet_body mb32 mt16">
             <div class="container">
@@ -677,37 +646,64 @@
         </section>
     </div>
 
-    <div data-snippet-id="features" data-selector-children=".oe_structure, [data-oe-type=html]">
+    <div data-snippet-id="slider" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <li class="oe_snippet_options divider"></li>
+        <li class="oe_snippet_options">
+            <a href="#" class="button js_add">Add Slide</a>
+        </li>
+        <li class="oe_snippet_options">
+            <a href="#" class="button js_remove">Remove Slide</a>
+        </li>
         <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_features.png"/>
-            <span class="oe_snippet_thumbnail_title">Features</span>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
+            <span class="oe_snippet_thumbnail_title">Quotes Slider</span>
         </div>
-        <section class="oe_snippet_body mb16">
-            <div class="container">
-                <div class="row mt16 mb16">
-                    <div class="col-md-3 text-center">
-                        <span class="fa fa-suitcase fa-5x"></span>
-                        <h3 class="mt8 mb0">First Feature</h3>
-                        <div class="text-muted">Tell what's the value for the customer for this feature.</div>
-                    </div>
-                    <div class="col-md-3 text-center">
-                        <span class="fa fa-lock fa-5x"></span>
-                        <h3 class="mt8 mb0">Second Feature</h3>
-                        <div class="text-muted">Write what the customer would like to know, not what you want to show.</div>
-                    </div>
-                    <div class="col-md-3 text-center">
-                        <span class="fa fa-heart fa-5x"></span>
-                        <h3 class="mt8 mb0">Third Feature</h3>
-                        <div class="text-muted">A small explanation of this great feature, in clear words.</div>
+        <div id="myQuoteCarousel" class="oe_snippet_body carousel quotecarousel slide mb0">
+            <!-- Indicators -->
+            <ol class="carousel-indicators mb0">
+                <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
+                <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
+            </ol>
+            <div class="carousel-inner">
+
+                <div class="item text_only active">
+                    <div class="container">
+                        <div class="content">
+
+                            <div class="row">
+                                <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
+                                        <p>
+                                            Write a quote here from one of your customers. Quotes are a
+                                            great way to build confidence in your products or services.
+                                        </p>
+                                        <small>Author of this quote</small>
+                                </blockquote>
+                            </div>
+
+                        </div>
                     </div>
-                    <div class="col-md-3 text-center">
-                        <span class="fa fa-credit-card fa-5x"></span>
-                        <h3 class="mt8 mb0">Fourth Feature</h3>
-                        <div class="text-muted">A small explanation of this great feature on two lines.</div>
+                </div>
+
+                <div class="item text_only">
+                    <div class="container">
+                        <div class="content">
+
+                            <div class="row">
+                                <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
+                                        <p>
+                                            OpenERP provides essential platform for our project management.
+                                            Things are better organized and more visible with it.
+                                        </p>
+                                        <small>John Doe, CEO</small>
+                                </blockquote>
+                            </div>
+
+                        </div>
                     </div>
+
                 </div>
             </div>
-        </section>
+        </div>
     </div>
 
     <div data-snippet-id="features-list" data-selector-children=".oe_structure, [data-oe-type=html]">
@@ -773,7 +769,7 @@
     <div data-snippet-id="parallax" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_parallax.png"/>
-            <span class="oe_snippet_thumbnail_title">Parallax</span>        
+            <span class="oe_snippet_thumbnail_title">Parallax</span>
         </div>
         <li class="oe_snippet_options dropdown-submenu">
             <a tabindex="-1" href="#">Scroll Speed</a>
@@ -796,7 +792,7 @@
     <div data-snippet-id="parallax_quote" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
-            <span class="oe_snippet_thumbnail_title">Parallax Slider</span>        
+            <span class="oe_snippet_thumbnail_title">Parallax Slider</span>
         </div>
         <section class="oe_snippet_body parallax" data-snippet-id="parallax"
                  style="height: 320px; background-image: url('/website/static/src/img/parallax/quote.png')"
@@ -862,7 +858,7 @@
     <div data-snippet-id='colmd' data-selector-vertical-children='.row'>
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_column.png"/>
-            <span class="oe_snippet_thumbnail_title">Add Column</span>            
+            <span class="oe_snippet_thumbnail_title">Add Column</span>
         </div>
         <div class="oe_snippet_body col-md-4">
             <img class="img img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>