[IMP] website: review timeline snippet

Removes option to move card to the right/left from the left panel
and add this option on the element overlay.
Makes the snippet responsive and other improvements.

Part of https://github.com/odoo/odoo/pull/46503
task-2194309

2 files changed, 60 insertions, 4 deletions

diff --git a/addons/website/static/src/snippets/s_timeline/000.scss b/addons/website/static/src/snippets/s_timeline/000.scss
index 0e47e8a58f0..2db6111d8c0 100644
--- a/addons/website/static/src/snippets/s_timeline/000.scss
+++ b/addons/website/static/src/snippets/s_timeline/000.scss
@@ -5,11 +5,10 @@
             content: '';
             position: absolute;
             width: 1px;
-            top: 10px;
-            bottom: 10px;
+            top: 0px;
+            bottom: 0px;
             left: 50%;
             background-color: gray('800');
-            z-index: 1;
         }
     }
     .s_timeline_row {
@@ -27,9 +26,32 @@
                 flex-direction: row-reverse;
             }
         }
+        @include media-breakpoint-up(md) {
+            &.flex-row-reverse {
+                .s_timeline_content {
+                    flex-direction: row-reverse;
+                    &:not(:last-child) {
+                        margin-left: 10%;
+                    }
+                }
+            }
+            &:not(.flex-row-reverse) {
+                .s_timeline_content:last-child {
+                    margin-left: 10%;
+                }
+            }
+        }
     }
     .s_timeline_date {
-        z-index: 2;
+        @include media-breakpoint-up(md) {
+            position: absolute;
+            left: 0%;
+            right: 0%;
+        }
+        @include media-breakpoint-down(sm) {
+            position: relative;
+            margin: 20px 0px;
+        }
         span:not(.fa) {
             display: inline-block;
             padding: 5px;
@@ -37,9 +59,11 @@
         .fa {
             margin: 0 $grid-gutter-width/2;
         }
+        text-align: center;
     }
     .s_timeline_icon {
         flex: 0 0 auto;
         margin: $grid-gutter-width/2;
+        z-index: 1;
     }
 }
diff --git a/addons/website/static/src/snippets/s_timeline/options.js b/addons/website/static/src/snippets/s_timeline/options.js
new file mode 100644
index 00000000000..c1efa23c2f9
--- /dev/null
+++ b/addons/website/static/src/snippets/s_timeline/options.js
@@ -0,0 +1,32 @@
+odoo.define('website.s_timeline_options', function (require) {
+'use strict';
+
+const options = require('web_editor.snippets.options');
+
+options.registry.Timeline = options.Class.extend({
+    /**
+     * @override
+     */
+    start: function () {
+        var $buttons = this.$el.find('we-button');
+        var $overlayArea = this.$overlay.find('.o_overlay_options_wrap');
+        $overlayArea.append($('<div/>').append($buttons));
+
+        return this._super(...arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Moves the card to the right/left.
+     *
+     * @see this.selectClass for parameters
+     */
+    timelineCard: function (previewMode, widgetValue, params) {
+        const $timelineRow = this.$target.closest('.s_timeline_row');
+        $timelineRow.toggleClass('flex-row-reverse flex-row');
+    },
+});
+});