From 3ae5af028964e1302ff23b0b8d7f27e46aab71a2 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 27 Dec 2023 17:16:12 +0100
Subject: [PATCH] [FIX] website: restore timeline snippet date design

Each date in the timeline snippet was displayed with the time line going
through them. The line is supposed to be cut around the date. This
occurs since [1] which made it so `<span>` elements are automatically
removed by the editor if they do not have any attributes. Unfortunately,
this snippet relied on such a span, since [2]. This commit solves the
issue by making the snippet better (and the XML structure will further
be improved in the master forward-ported version). Unfortunately, this
is not entirely stable, even though it leads to the exact same result
provided no custom code tweaks the snippet. It will also solve existing
timeline snippets in current databases.

Note: [1] was obviously a mistake to merge in stable, although it might
be kept seeing the delay since it was merged and nothing critical seems
to have happened.

[1]: https://github.com/odoo/odoo/commit/a26e27c85e6a0685b6cf4d2dbab90453899df34c
[2]: https://github.com/odoo/odoo/commit/fbe38fb41dfdb76878748a1149f93700b566d228

task-3657771

closes odoo/odoo#147598

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
 .../static/src/snippets/s_timeline/000.scss   | 21 ++++++++-----------
 addons/website/views/snippets/s_timeline.xml  |  4 ++++
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/addons/website/static/src/snippets/s_timeline/000.scss b/addons/website/static/src/snippets/s_timeline/000.scss
index aac6c41cbde..db40b267612 100644
--- a/addons/website/static/src/snippets/s_timeline/000.scss
+++ b/addons/website/static/src/snippets/s_timeline/000.scss
@@ -47,24 +47,21 @@
         }
     }
     .s_timeline_date {
+        position: relative;
+        margin: 20px 0px;
+        padding: 5px;
+        background-color: var(--o-cc-bg, #{$body-bg});
+        text-align: center;
+
         @include media-breakpoint-up(md) {
             position: absolute;
-            left: 0%;
-            right: 0%;
-        }
-        @include media-breakpoint-down(md) {
-            position: relative;
-            margin: 20px 0px;
-        }
-        span:not(.fa) {
-            display: inline-block;
-            padding: 5px;
-            background-color: var(--o-cc-bg, #{$body-bg});
+            left: 50%;
+            transform: translateX(-50%);
         }
+
         .fa {
             margin: 0 $grid-gutter-width/2;
         }
-        text-align: center;
     }
     .s_timeline_icon {
         flex: 0 0 auto;
diff --git a/addons/website/views/snippets/s_timeline.xml b/addons/website/views/snippets/s_timeline.xml
index 889e57b8d06..95dfc584360 100644
--- a/addons/website/views/snippets/s_timeline.xml
+++ b/addons/website/views/snippets/s_timeline.xml
@@ -1,6 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
+<!--
+TODO review s_timeline_date XML structure (useless <span> that the editor
+actually removes because it judges them useless)
+-->
 <template name="Timeline" id="s_timeline">
     <section class="s_timeline pt24 pb48">
         <div class="container s_timeline_line">