initial commit 2

3 files changed, 142 insertions, 0 deletions

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 00000000..8970e7e2
--- /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 00000000..f7a8cd3f
--- /dev/null
+++ b/addons/website/static/src/snippets/s_showcase/001.scss
@@ -0,0 +1,46 @@
+.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;
+        font-size: 36px;
+    }
+}
diff --git a/addons/website/static/src/snippets/s_showcase/options.js b/addons/website/static/src/snippets/s_showcase/options.js
new file mode 100644
index 00000000..b870393d
--- /dev/null
+++ b/addons/website/static/src/snippets/s_showcase/options.js
@@ -0,0 +1,19 @@
+odoo.define('website.s_showcase_options', function (require) {
+'use strict';
+
+const options = require('web_editor.snippets.options');
+
+options.registry.Showcase = options.Class.extend({
+    /**
+     * @override
+     */
+    onMove: function () {
+        const $showcaseCol = this.$target.parent().closest('.row > div');
+        const isLeftCol = $showcaseCol.index() <= 0;
+        const $title = this.$target.children('.s_showcase_title');
+        $title.toggleClass('flex-lg-row-reverse', isLeftCol);
+        $showcaseCol.find('.s_showcase_icon.ml-3').removeClass('ml-3').addClass('ml-lg-3'); // For compatibility with old version
+        $title.find('.s_showcase_icon').toggleClass('mr-lg-0 ml-lg-3', isLeftCol);
+    },
+});
+});