[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>
This commit is contained in:
qsm-odoo
2023-12-27 17:25:08 +00:00
parent 471563c38b
commit 3ae5af0289
2 changed files with 13 additions and 12 deletions
@@ -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;
@@ -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">