pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor, website, website_mass_mailing: center bg images

Browse Source 
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>
This commit is contained in:
Benjamin Vray
2020-11-04 14:53:37 +00:00
parent 3f50f9ce39
commit 2ca115f650
10 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+2 -2
View File
@@ -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');
}
},
});
addons/website/static/src/scss/website.scss
+3
View File
@@ -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?
// -----------------------------------
addons/website/static/src/snippets/s_blockquote/options.js
+2 -3
View File
@@ -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
}
addons/website/views/snippets/s_carousel.xml
+3 -3
View File
@@ -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">
addons/website/views/snippets/s_masonry_block.xml
+1 -1
View File
@@ -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>
addons/website/views/snippets/s_popup.xml
+1 -1
View File
@@ -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">
addons/website/views/snippets/s_product_catalog.xml
+1 -1
View File
@@ -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">
addons/website/views/snippets/s_quotes_carousel.xml
+2 -2
View File
@@ -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"/>
addons/website/views/website_templates.xml
+1 -1
View File
@@ -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>
addons/website_mass_mailing/views/snippets_templates.xml
+1 -1
View File
@@ -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>