[IMP] website: improve edition of Showcase snippet

Also no more scss required for the snippet.

Part of https://github.com/odoo/odoo/pull/46773
task-2191381

Co-authored-by: Cocographique <nmi@odoo.com>

4 files changed, 63 insertions, 19 deletions

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 00000000000..e6eddfb860f
--- /dev/null
+++ b/addons/website/static/src/snippets/s_showcase/options.js
@@ -0,0 +1,18 @@
+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);
+        $title.find('.s_showcase_icon').toggleClass('mr-lg-0 ml-3', isLeftCol);
+    },
+});
+});
diff --git a/addons/website/views/assets.xml b/addons/website/views/assets.xml
index 25f5feafd7f..a0d00feb356 100644
--- a/addons/website/views/assets.xml
+++ b/addons/website/views/assets.xml
@@ -128,6 +128,7 @@
     <script type="text/javascript" src="/website/static/src/snippets/s_tabs/options.js"/>
     <script type="text/javascript" src="/website/static/src/snippets/s_progress_bar/options.js"/>
     <script type="text/javascript" src="/website/static/src/snippets/s_blockquote/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_showcase/options.js"/>
     <script type="text/javascript" src="/website/static/src/snippets/s_table_of_content/options.js"/>
 
     <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml
index d98d8e5c0db..592245cc9e6 100644
--- a/addons/website/views/snippets/s_showcase.xml
+++ b/addons/website/views/snippets/s_showcase.xml
@@ -3,28 +3,52 @@
 
 <!-- Template -->
 <template name="Showcase" id="s_showcase">
-    <section class="s_showcase pt32 pb32" data-vcss="001">
+    <section class="s_showcase pt48 pb48" data-vcss="002">
         <div class="container">
-            <div class="row text-center col-md-6 col-lg-12">
-                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
-                    <h3 class="mb16"><span class="fa fa-fw fa-desktop text-beta 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 class="row no-gutters s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
+                <div class="col-lg text-lg-right">
+                    <div class="row">
+                        <div class="col-lg-12 pt24 pb24" data-name="Block">
+                            <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
+                                <i class="s_showcase_icon fa fa-2x fa-desktop text-beta mr-3 mr-lg-0 ml-3"/>
+                                <h3>First feature</h3>
+                            </div>
+                            <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p>
+                        </div>
+                        <div class="col-lg-12 pt24 pb24" data-name="Block">
+                            <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
+                                <i class="s_showcase_icon fa fa-2x fa-paint-brush text-beta mr-3 mr-lg-0 ml-3"/>
+                                <h3>Second feature</h3>
+                            </div>
+                            <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p>
+                        </div>
+                    </div>
                 </div>
-                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
-                    <h3 class="mb16"><span class="fa fa-paint-brush text-beta 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 class="col-1">
+                    <div class="w-50 h-100 border-right"/>
                 </div>
-                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
-                    <h3 class="mb16"><span class="fa fa-heart text-beta 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 text-beta 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 class="col-lg">
+                    <div class="row">
+                        <div class="col-lg-12 pt24 pb24" data-name="Block">
+                            <div class="s_showcase_title d-flex mb-2">
+                                <i class="s_showcase_icon fa fa-2x fa-heart text-beta mr-3"/>
+                                <h3>Another feature</h3>
+                            </div>
+                            <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p>
+                        </div>
+                        <div class="col-lg-12 pt24 pb24" data-name="Block">
+                            <div class="s_showcase_title d-flex mb-2">
+                                <i class="s_showcase_icon fa fa-2x fa-gift text-beta mr-3"/>
+                                <h3>Last Feature</h3>
+                            </div>
+                            <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="pt16 text-center">
+        <div class="container text-lg-center">
+            <p><br/></p>
             <a href="#" class="btn btn-primary">Discover all the features</a>
         </div>
     </section>
@@ -33,7 +57,7 @@
 <!-- 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"/>
+        <div data-js="Showcase" data-selector=".s_showcase .row > div:has(> .s_showcase_title)"/>
     </xpath>
 </template>
 
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index a1eb48b64ec..02a7494e474 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -233,12 +233,13 @@
 
     <!-- Move snippets around -->
     <div data-js="SnippetMove"
-         data-selector="section, .accordion > .card">
+         data-selector="section, .accordion > .card, .s_showcase .row:not(.s_col_no_resize) > div">
         <we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true"/>
         <we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true"/>
     </div>
     <div data-js="SnippetMove"
-         data-selector=".row:not(.s_col_no_resize) > div, .nav-item">
+         data-selector=".row:not(.s_col_no_resize) > div, .nav-item"
+         data-exclude=".s_showcase .row > div">
         <we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true"/>
         <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true"/>
     </div>