[FIX] website: fix snippet blockquote with display cover

Adapt the snippet with the new color filter layer and fix the padding

Part of https://github.com/odoo/odoo/pull/58850
task-2312878

closes odoo/odoo#58850

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 12 insertions, 1 deletions

diff --git a/addons/website/static/src/snippets/s_blockquote/000.scss b/addons/website/static/src/snippets/s_blockquote/000.scss
index 2b5ef1e200f..a41d1f278c6 100644
--- a/addons/website/static/src/snippets/s_blockquote/000.scss
+++ b/addons/website/static/src/snippets/s_blockquote/000.scss
@@ -36,15 +36,20 @@
     &.s_blockquote_cover {
         text-align: center;
         .s_blockquote_icon {
+            position: relative;
+            z-index: 1;
             float: none;
             margin-bottom: -$spacer * 1.5;
         }
         p:last-of-type {
             margin-bottom: $spacer * .5;
         }
+        .s_blockquote_content, .s_blockquote_filter { // s_blockquote_filter is there for compatibility
+            padding: $spacer * 3 $spacer * 2 $spacer * 2;
+        }
         // Compatibility
         .s_blockquote_filter {
-            padding: $spacer * 3 $spacer * 2 $spacer * 2;
+            margin: $spacer * -3 $spacer * -2 $spacer * -2;
         }
         .quote_char {
             margin: $spacer * 2 0 $spacer 0;
diff --git a/addons/website/static/src/snippets/s_blockquote/options.js b/addons/website/static/src/snippets/s_blockquote/options.js
index 4ef0b179d71..46748f15c2c 100644
--- a/addons/website/static/src/snippets/s_blockquote/options.js
+++ b/addons/website/static/src/snippets/s_blockquote/options.js
@@ -25,10 +25,16 @@ options.registry.Blockquote = options.Class.extend({
             $blockquote.css({"background-image": "url('/web/image/website.s_blockquote_cover_default_image')"});
             $blockquote.css({"background-position": "50% 50%"});
             $blockquote.addClass('oe_img_bg');
+            if (!$blockquote.find('.o_we_bg_filter').length) {
+                const bgFilterEl = document.createElement('div');
+                bgFilterEl.classList.add('o_we_bg_filter', 'bg-white-50');
+                $blockquote.prepend(bgFilterEl);
+            }
         } else {
             $blockquote.css({"background-image": ""});
             $blockquote.css({"background-position": ""});
             $blockquote.removeClass('oe_img_bg');
+            $blockquote.find('.o_we_bg_filter').remove();
             $blockquote.find('.s_blockquote_filter').contents().unwrap(); // Compatibility
         }