[ADD] website: new table format snippet

(cherry-picked from 383ab454725d9bf8d01392a587c8a2c0c2116294)
(Closes #2429)

4 files changed, 93 insertions, 0 deletions

diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index db9664bd930..a873e3d6fec 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -692,6 +692,36 @@
   padding-bottom: 6px;
 }
 
+/* ---- Table Snippet ----  {{{ */
+.table_desc{
+    margin: 0 0 20px 0;
+    width: 100%;
+    word-break: break-all;
+    border: 1px solid #dddddd;
+}
+.table_heading{
+    background-color: #f5f5f5;
+    border: 1px solid #dddddd;
+    color: #666666;
+    font-size: 14px;
+    padding: 4px;
+}
+table.table_desc tr td{
+    text-align: left;
+    padding: 5px;
+    font-size: 13px;
+}
+table.table_desc tr td:first-child{
+    width: 25%;
+    font-weight: bold;
+    border-bottom: 1px solid #c9c9c9;
+    border-right: 1px solid #c9c9c9;
+    border-left: none;
+}
+table.table_desc tr td:last-child{
+    border-bottom: 1px solid #c9c9c9;
+}
+
 /* ---- thumbnail ----  {{{ */
 .oe_snippet.o_block_banner .oe_snippet_thumbnail_img {
   background-image: url("/website/static/src/img/blocks/block_banner.png");
@@ -732,6 +762,9 @@
 .oe_snippet.o_block_separator .oe_snippet_thumbnail_img {
   background-image: url("/website/static/src/img/blocks/block_separator.png");
 }
+.oe_snippet.o_block_table .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_table.png");
+}
 .oe_snippet.o_block_button .oe_snippet_thumbnail_img {
   background-image: url("/website/static/src/img/blocks/block_button.png");
 }
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index 4b00c892437..2dd267b1bc3 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -551,6 +551,36 @@
 
 // }}}
 
+/* ---- Table Snippet ----  {{{ */
+
+.table_desc
+    margin: 0 0 20px 0
+    width: 100%
+    word-break: break-all
+    border: 1px solid #dddddd
+
+.table_heading
+    background-color: #f5f5f5
+    border: 1px solid #dddddd
+    color: #666666
+    font-size: 14px
+    padding: 4px
+
+table.table_desc tr td
+    text-align: left
+    padding: 5px
+    font-size: 13px
+    &:first-child
+        width: 25%
+        font-weight: bold
+        border-bottom: 1px solid #c9c9c9
+        border-right: 1px solid #c9c9c9
+        border-left: none
+    &:last-child
+        border-bottom: 1px solid #c9c9c9
+
+// }}}
+
 /* ---- thumbnail ----  {{{ */
 
 .oe_snippet
@@ -581,6 +611,8 @@
         background-image: url('/website/static/src/img/blocks/block_panel.png')
     &.o_block_separator .oe_snippet_thumbnail_img
         background-image: url('/website/static/src/img/blocks/block_separator.png')
+    &.o_block_table .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_table.png')        
     &.o_block_button .oe_snippet_thumbnail_img
         background-image: url('/website/static/src/img/blocks/block_button.png')
 
diff --git a/addons/website/static/src/img/blocks/block_table.png b/addons/website/static/src/img/blocks/block_table.png
new file mode 100644
index 00000000000..d7123e6086e
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_table.png
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 3ac932c81be..4f0b5b7da8c 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -300,6 +300,34 @@
         </div>
     </div>
 
+    <div name="Table" class="o_block_table">
+        <section class="oe_snippet_body mt16 mb16">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-8">
+                        <table cellspacing="0" class="table_desc">
+                            <tbody>
+                                <tr><th class="table_heading" colspan="2">Description</th></tr>
+                                <tr>
+                                    <td></td>
+                                    <td>(Press Tab to add a new row)</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="col-md-4">
+                        <img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png"/>
+                        <h4 class="mt16">Description</h4>
+                        <p>
+                            To add a related product list, reduce 
+                            the size of these three columns using 
+                            the right icon of each block.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
 </div>
 
 <div id="snippet_feature" class="tab-pane">