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

[FIX] website(_event): make parallax filter change the default color

Browse Source 
Setting a black low-transparency filter on a parallax element was
leaving the text color black too as the filter did not act as a
background color. Now the filter is computed from the parallax
background color.
This commit is contained in:
qsm-odoo
2018-09-25 19:54:26 +02:00
parent 92c8645d62
commit 502f45aa2d
4 changed files with 33 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+3
View File
@@ -835,6 +835,9 @@ registry.background = SnippetOption.extend({
* image is removed.
*/
bindBackgroundEvents: function () {
if (this.$target.is('.parallax, .s_parallax_bg')) {
return;
}
this.$target.off('.background-option')
.on('background-color-event.background-option', (function (e, previewMode) {
e.stopPropagation();
addons/website/static/src/scss/website.scss
+10 -1
View File
@@ -822,11 +822,20 @@ table.table_desc tr td {
> * {
position: relative;
}
> .s_parallax_bg, > .s_parallax_filter {
> .s_parallax_bg {
@include o-position-absolute(0, 0, 0, 0);
display: block;
background-color: inherit;
background-size: cover;
background-attachment: scroll;
pointer-events: none;
&::after {
content: "";
@include o-position-absolute(0, 0, 0, 0);
display: block;
background-color: inherit;
}
}
&.s_parallax_is_fixed > .s_parallax_bg {
background-attachment: fixed;
addons/website/views/snippets.xml
+20 -24
View File
@@ -14,9 +14,8 @@
</template>
<template id="s_cover" name="Cover">
<section class="s_cover parallax oe_img_bg oe_custom_bg pt96 pb96" data-scroll-background-ratio="1">
<section class="s_cover parallax bg-black-50 oe_img_bg oe_custom_bg pt96 pb96" data-scroll-background-ratio="1">
<span class="s_parallax_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
<span class="s_parallax_filter bg-white-50"/>
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-12 s_title" data-name="Title">
@@ -77,24 +76,23 @@
<template id="s_banner" name="Banner">
<section class="s_banner parallax s_parallax_is_fixed oe_img_bg pt96 pb96" data-scroll-background-ratio="1">
<span class="s_parallax_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
<span class="s_parallax_filter"/>
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-7 jumbotron pt32 pb32" style="background-color: rgb(255, 255, 255);" data-name="Box">
<div class="row">
<div class="col-lg-12 s_title s_col_no_bgcolor" data-name="Title">
<h1 class="s_title_thin"><font style="font-size: 62px;"><b>Sell Online.</b> Easily.</font></h1>
</div>
<div class="col-lg-12 pt8 pb32 s_col_no_bgcolor" data-name="Text">
<p class="lead">This is a simple hero unit, a simple jumbotron-style component <br/>for calling extra attention to featured content or information.</p>
</div>
<div class="col-lg-12 s_btn text-left pt16 pb16" data-name="Button">
<a href="#" class="btn btn-epsilon rounded-circle">Do something</a>
</div>
</div>
</div>
</div>
</div>
<div class="row s_nb_column_fixed">
<div class="col-lg-7 jumbotron pt32 pb32" style="background-color: rgb(255, 255, 255);" data-name="Box">
<div class="row">
<div class="col-lg-12 s_title s_col_no_bgcolor" data-name="Title">
<h1 class="s_title_thin"><font style="font-size: 62px;"><b>Sell Online.</b> Easily.</font></h1>
</div>
<div class="col-lg-12 pt8 pb32 s_col_no_bgcolor" data-name="Text">
<p class="lead">This is a simple hero unit, a simple jumbotron-style component <br/>for calling extra attention to featured content or information.</p>
</div>
<div class="col-lg-12 s_btn text-left pt16 pb16" data-name="Button">
<a href="#" class="btn btn-epsilon rounded-circle">Do something</a>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
@@ -711,9 +709,8 @@
</template>
<template id="s_parallax" name="Parallax">
<section class="s_parallax s_parallax_is_fixed parallax pt160 pb160" data-scroll-background-ratio="1">
<section class="s_parallax s_parallax_is_fixed parallax bg-black-50 pt160 pb160" data-scroll-background-ratio="1">
<span class="s_parallax_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
<span class="s_parallax_filter bg-black-50"/>
<div class="oe_structure">
<section>
<div class="container">
@@ -1237,7 +1234,7 @@
<!-- FILTER | .s_parallax -->
<div data-js="colorpicker"
data-selector=".parallax" data-target="> .s_parallax_filter"
data-selector=".parallax"
data-palette-exclude="common, theme"
data-palette-default="transparent_grayscale"
data-palette-title="Overlay Color">
@@ -1272,8 +1269,7 @@
</div>
<div data-js="sizing_y"
data-selector="section, .row > [class*='col-lg-'], :not(.o_gallery > .container) > .carousel, .parallax, .s_hr, .s_btn">
</div>
data-selector="section, .row > [class*='col-lg-'], :not(.o_gallery > .container) > .carousel, .parallax, .s_hr, .s_btn"/>
<div data-js="sizing_x"
data-selector=".row > [class*='col-lg-']"
addons/website_event/data/event_demo.xml
-1
View File
@@ -11,7 +11,6 @@
<field name="description"><![CDATA[
<section class="s_cover parallax oe_img_bg oe_custom_bg pt96 pb96" data-scroll-background-ratio="1">
<span class="s_parallax_bg" style="background-image: url('/web/image/website.s_background_image_02'); background-position: 50% 100%;"/>
<span class="s_parallax_filter"/>
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-12 s_title bg-black-50" data-name="Title">