From 0f346ae2b5deeca7fd91b02dfb2f471aa3266ebd Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 22 Jan 2020 12:02:13 +0000
Subject: [PATCH] [MOV] website: add s_showcase snippet from themes repo

Part of https://github.com/odoo/odoo/pull/42937
task-2088157
---
 addons/website/__manifest__.py                |   1 +
 .../src/img/snippets_thumbs/s_showcase.jpg    | Bin 0 -> 3865 bytes
 .../static/src/snippets/s_showcase/000.scss   |  77 ++++++++++++++++++
 .../static/src/snippets/s_showcase/001.scss   |  47 +++++++++++
 addons/website/views/snippets/s_showcase.xml  |  52 ++++++++++++
 addons/website/views/snippets/snippets.xml    |   2 +-
 6 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_showcase.jpg
 create mode 100644 addons/website/static/src/snippets/s_showcase/000.scss
 create mode 100644 addons/website/static/src/snippets/s_showcase/001.scss
 create mode 100644 addons/website/views/snippets/s_showcase.xml

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 74b05bca54f..cb8289e185d 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -60,6 +60,7 @@
         'views/snippets/s_numbers.xml',
         'views/snippets/s_masonry_block.xml',
         'views/snippets/s_media_list.xml',
+        'views/snippets/s_showcase.xml',
         'views/snippets/s_mega_menu_multi_menus.xml',
         'views/snippets/s_mega_menu_menu_image_menu.xml',
         'views/website_views.xml',
diff --git a/addons/website/static/src/img/snippets_thumbs/s_showcase.jpg b/addons/website/static/src/img/snippets_thumbs/s_showcase.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..da8ea09c6956c37694f940fc0c903d46b86eeb9b
GIT binary patch
literal 3865
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
RMQ;DcAK}j*L=$fBzX65RPQw5I

literal 0
HcmV?d00001

diff --git a/addons/website/static/src/snippets/s_showcase/000.scss b/addons/website/static/src/snippets/s_showcase/000.scss
new file mode 100644
index 00000000000..8970e7e262b
--- /dev/null
+++ b/addons/website/static/src/snippets/s_showcase/000.scss
@@ -0,0 +1,77 @@
+
+#wrapwrap .s_showcase:not([data-vcss]) {
+    @include media-breakpoint-up(lg) {
+        .container, .container-fluid {
+            position: relative;
+
+            &:before {
+                content: " ";
+                display: block;
+                @include o-position-absolute($left: 50%);
+                height: 100%;
+                border-right: 1px solid gray('200');
+            }
+        }
+    }
+
+    .fa {
+        opacity: 0.5;
+    }
+
+    .text-right{
+        .fa {
+            float: right;
+            margin-left: .5em;
+        }
+        p {
+            float: right;
+            display: block;
+        }
+    }
+    .text-left{
+        .fa {
+            float: left;
+            margin-right: .5em;
+        }
+        p {
+            float: left;
+        }
+    }
+    .row {
+        margin-top: 1em;
+    }
+    .feature p {
+        max-width: 300px;
+        margin-top: 0.6em;
+        clear: both;
+    }
+}
+
+@include media-breakpoint-down(md) {
+    #wrapwrap .s_showcase:not([data-vcss]) {
+        .text-right, .text-left {
+            text-align: center;
+
+            .fa {
+                font-size: 2em;
+                opacity: 0.5;
+                float: none;
+                display: block;
+                position: relative;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+        .feature {
+            margin-bottom: 3em;
+
+            p {
+                float: none;
+                display: block;
+                position: relative;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_showcase/001.scss b/addons/website/static/src/snippets/s_showcase/001.scss
new file mode 100644
index 00000000000..4ef99f5eb1c
--- /dev/null
+++ b/addons/website/static/src/snippets/s_showcase/001.scss
@@ -0,0 +1,47 @@
+.s_showcase[data-vcss='001'] {
+    @include media-breakpoint-up(lg) {
+        // Left-right separator
+        .container, .container-fluid {
+            position: relative;
+
+            &:before {
+                content: " ";
+                display: block;
+                @include o-position-absolute($left: 50%);
+                height: 100%;
+                border-right: 1px solid gray('200');
+            }
+        }
+        // Features
+        .row > div {
+            // Items on left
+            &:nth-child(odd) {
+                text-align: right;
+
+                .s_showcase_icon, p {
+                    float: right;
+                }
+
+                .s_showcase_icon {
+                    margin-right: 0;
+                    margin-left: 15px;
+                }
+            }
+            // Items on right
+            &:nth-child(even) {
+                text-align: left;
+
+                .s_showcase_icon, p {
+                    float: left;
+                }
+            }
+        }
+    }
+
+    .s_showcase_icon {
+        // Make the default margin the one for the left aligned icon, as it's what we want on mobile
+        margin-right: 15px;
+        opacity: .5;
+        font-size: 36px;
+    }
+}
diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml
new file mode 100644
index 00000000000..553f25c2722
--- /dev/null
+++ b/addons/website/views/snippets/s_showcase.xml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<!-- Template -->
+<template name="Showcase" id="s_showcase">
+    <section class="s_showcase" data-vcss="001">
+        <div class="container">
+            <div class="row text-center col-md-6 col-lg-12 mx-auto mt-3">
+                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
+                    <h3 class="mb16"><span class="fa fa-fw fa-desktop s_showcase_icon"/>First feature</h3>
+                    <p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
+                </div>
+                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
+                    <h3 class="mb16"><span class="fa fa-paint-brush s_showcase_icon"/>Second feature</h3>
+                    <p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
+                </div>
+                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
+                    <h3 class="mb16"><span class="fa fa-heart s_showcase_icon"/>Another feature</h3>
+                    <p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
+                </div>
+                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
+                    <h3 class="mb16"><span class="fa fa-sliders s_showcase_icon"/>Last Feature</h3>
+                    <p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
+                </div>
+            </div>
+        </div>
+        <div class="mt16 mb16 text-center">
+            <a class="btn btn-secondary" href="">Discover all the features</a>
+        </div>
+    </section>
+</template>
+
+<!-- Options -->
+<template id="s_showcase_options" inherit_id="website.snippet_options">
+    <xpath expr="//div[@data-js='background']" position="before">
+        <div data-js='s_showcase' data-selector=".s_showcase .feature"/>
+    </xpath>
+</template>
+
+<!-- Assets -->
+<template id="assets_snippet_s_showcase_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_showcase/000.scss"/>
+    </xpath>
+</template>
+<template id="assets_snippet_s_showcase_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_showcase/001.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 825940effcc..86d84f41710 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -35,7 +35,7 @@
                     <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.png"/>
                     <t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.png"/>
                     <t t-snippet="website.s_media_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_media_list.png"/>
-                    <!-- Showcase -->
+                    <t t-snippet="website.s_showcase" t-thumbnail="/website/static/src/img/snippets_thumbs/s_showcase.jpg"/>
                     <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/snippets_thumbs/s_parallax.png"/>
                 </div>
             </div>