From 2ca115f650e9f67c528cab0b3369a92b98842738 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 8 Oct 2020 08:59:55 +0000
Subject: [PATCH] [FIX] web_editor, website, website_mass_mailing: center bg
 images

Before this commit, background images were not centered by default.
It was especially annoying on mobile device. We created a new class
to center background image and we added it on all the snippets with a
background image except those with a parallax effect because they
already have a background-position in inline style.

task-2318526

closes odoo/odoo#60430

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/web_editor/static/src/js/editor/snippets.options.js | 4 ++--
 addons/website/static/src/scss/website.scss                | 3 +++
 addons/website/static/src/snippets/s_blockquote/options.js | 5 ++---
 addons/website/views/snippets/s_carousel.xml               | 6 +++---
 addons/website/views/snippets/s_masonry_block.xml          | 2 +-
 addons/website/views/snippets/s_popup.xml                  | 2 +-
 addons/website/views/snippets/s_product_catalog.xml        | 2 +-
 addons/website/views/snippets/s_quotes_carousel.xml        | 4 ++--
 addons/website/views/website_templates.xml                 | 2 +-
 addons/website_mass_mailing/views/snippets_templates.xml   | 2 +-
 10 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 55fcc9fb2ad..2a90a7b4675 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3833,10 +3833,10 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
     _setBackground($target, backgroundURL) {
         if (backgroundURL) {
             $target.css('background-image', `url('${backgroundURL}')`);
-            $target.addClass('oe_img_bg');
+            $target.addClass('oe_img_bg o_bg_img_center');
         } else {
             $target.css('background-image', '');
-            $target.removeClass('oe_img_bg');
+            $target.removeClass('oe_img_bg o_bg_img_center');
         }
     },
 });
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 9a489ba1b76..723037ca69d 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -358,6 +358,9 @@ font[class*='bg-'] {
         background-size: auto;
         background-repeat: repeat;
     }
+    &.o_bg_img_center {
+        background-position: center;
+    }
 
     // Compatibility <= 13.0, TODO remove?
     // -----------------------------------
diff --git a/addons/website/static/src/snippets/s_blockquote/options.js b/addons/website/static/src/snippets/s_blockquote/options.js
index 66bbfbd583a..85c6d81a962 100644
--- a/addons/website/static/src/snippets/s_blockquote/options.js
+++ b/addons/website/static/src/snippets/s_blockquote/options.js
@@ -22,8 +22,7 @@ snippetOptions.registry.Blockquote = snippetOptions.SnippetOptionWidget.extend({
         const $blockquote = this.$target.find('.s_blockquote_content');
         if (widgetValue === 'cover') {
             $blockquote.css({"background-image": "url('/web/image/website.s_blockquote_cover_default_image')"});
-            $blockquote.css({"background-position": "50% 50%"});
-            $blockquote.addClass('oe_img_bg');
+            $blockquote.addClass('oe_img_bg o_bg_img_center');
             if (!$blockquote.find('.o_we_bg_filter').length) {
                 const bgFilterEl = document.createElement('div');
                 bgFilterEl.classList.add('o_we_bg_filter', 'bg-white-50');
@@ -32,7 +31,7 @@ snippetOptions.registry.Blockquote = snippetOptions.SnippetOptionWidget.extend({
         } else {
             $blockquote.css({"background-image": ""});
             $blockquote.css({"background-position": ""});
-            $blockquote.removeClass('oe_img_bg');
+            $blockquote.removeClass('oe_img_bg o_bg_img_center');
             $blockquote.find('.o_we_bg_filter').remove();
             $blockquote.find('.s_blockquote_filter').contents().unwrap(); // Compatibility
         }
diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml
index cf4bdbe39e5..1ddda20ca62 100644
--- a/addons/website/views/snippets/s_carousel.xml
+++ b/addons/website/views/snippets/s_carousel.xml
@@ -13,7 +13,7 @@
             <!-- Content -->
             <div class="carousel-inner">
                 <!-- #01 -->
-                <div class="carousel-item active oe_img_bg pt152 pb152" style="background-image: url('/web/image/website.s_carousel_default_image_1');" data-name="Slide">
+                <div class="carousel-item active oe_img_bg o_bg_img_center pt152 pb152" style="background-image: url('/web/image/website.s_carousel_default_image_1');" data-name="Slide">
                     <div class="container">
                         <div class="row content">
                             <div class="carousel-content col-lg-6">
@@ -27,7 +27,7 @@
                     </div>
                 </div>
                 <!-- #02 -->
-                <div class="carousel-item oe_img_bg pt96 pb96" style="background-image: url('/web/image/website.s_carousel_default_image_2');" data-name="Slide">
+                <div class="carousel-item oe_img_bg o_bg_img_center pt96 pb96" style="background-image: url('/web/image/website.s_carousel_default_image_2');" data-name="Slide">
                     <div class="container">
                         <div class="row content">
                             <div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40">
@@ -42,7 +42,7 @@
                     </div>
                 </div>
                 <!-- #03 -->
-                <div class="carousel-item oe_img_bg pt128 pb128" style="background-image: url('/web/image/website.s_carousel_default_image_3');" data-name="Slide">
+                <div class="carousel-item oe_img_bg o_bg_img_center pt128 pb128" style="background-image: url('/web/image/website.s_carousel_default_image_3');" data-name="Slide">
                     <div class="container">
                         <div class="row content">
                             <div class="carousel-content col-lg-6 offset-lg-6">
diff --git a/addons/website/views/snippets/s_masonry_block.xml b/addons/website/views/snippets/s_masonry_block.xml
index b0d5c3cc977..96a1dd66f9a 100644
--- a/addons/website/views/snippets/s_masonry_block.xml
+++ b/addons/website/views/snippets/s_masonry_block.xml
@@ -6,7 +6,7 @@
     <section class="s_masonry_block" data-vcss="001">
         <div class="container-fluid">
             <div class="row">
-                <div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block"
+                <div class="col-lg-6 oe_img_bg o_bg_img_center text-center pb224 pt224" data-name="Block"
                      style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
                     <p><br/></p>
                 </div>
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index a51980a3a23..a232bb48a14 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -15,7 +15,7 @@
             <div class="modal-dialog d-flex">
                 <div class="modal-content oe_structure">
                     <div class="s_popup_close js_close_popup o_we_no_overlay o_not_editable">&amp;times;</div>
-                    <section class="s_banner oe_img_bg pt96 pb96"
+                    <section class="s_banner oe_img_bg o_bg_img_center pt96 pb96"
                              data-snippet="s_banner"
                              style="background-image: url('/web/image/website.s_popup_default_image');">
                         <div class="container">
diff --git a/addons/website/views/snippets/s_product_catalog.xml b/addons/website/views/snippets/s_product_catalog.xml
index 91821f7cf42..8f9d933ea1b 100644
--- a/addons/website/views/snippets/s_product_catalog.xml
+++ b/addons/website/views/snippets/s_product_catalog.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_product_catalog" name="Pricelist">
-    <section class="s_product_catalog oe_img_bg oe_custom_bg pt48 pb32"
+    <section class="s_product_catalog oe_img_bg o_bg_img_center oe_custom_bg pt48 pb32"
              style="background-image: url('/web/image/website.s_product_catalog_default_image');"
              data-vcss="001">
         <div class="container">
diff --git a/addons/website/views/snippets/s_quotes_carousel.xml b/addons/website/views/snippets/s_quotes_carousel.xml
index 99802571ea5..9ad26434761 100644
--- a/addons/website/views/snippets/s_quotes_carousel.xml
+++ b/addons/website/views/snippets/s_quotes_carousel.xml
@@ -28,7 +28,7 @@
                     </div>
                 </div>
                 <!-- #02 -->
-                <div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
+                <div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
                     <div class="container">
                         <blockquote class="s_blockquote s_blockquote_classic blockquote mr-auto w-50" data-name="Blockquote">
                             <i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
@@ -43,7 +43,7 @@
                     </div>
                 </div>
                 <!-- #03 -->
-                <div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
+                <div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
                     <div class="container">
                         <blockquote class="s_blockquote s_blockquote_classic blockquote ml-auto w-50" data-name="Blockquote">
                             <i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 8138d8c76f3..c7333d78344 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1028,7 +1028,7 @@
 <template id="template_header_image_oe_structure_header_image_1" inherit_id="website.template_header_image" name="Template Header image (oe_structure_header_image_1)">
     <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_image_1']" position="replace">
         <div class="oe_structure" id="oe_structure_header_image_1">
-            <section class="s_cover oe_img_bg pt8 pb8" data-snippet="s_cover" data-name="Cover"
+            <section class="s_cover oe_img_bg o_bg_img_center pt8 pb8" data-snippet="s_cover" data-name="Cover"
                      style="background-image: url('/web/image/website.header_image_1_default_image');">
                 <div class="container s_allow_columns">
                     <p class="mb-0"><br/></p>
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index 4b4deef3489..73444ef23aa 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -55,7 +55,7 @@
 </template>
 
 <template id="s_newsletter_subscribe_popup_content" name="Newsletter Popup Content">
-    <section class="s_text_block oe_img_bg pt88 pb64" data-snippet="s_text_block"
+    <section class="s_text_block oe_img_bg o_bg_img_center pt88 pb64" data-snippet="s_text_block"
              style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 0 100%;">
         <div class="container s_allow_columns">
             <h1 style="text-align: center;">Always <b>First</b>.</h1>