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

[IMP] website: redesign the s_banner snippet

Browse Source 
task-3097005

Part-of: odoo/odoo#120302
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Antoine (anso)
2023-10-08 10:45:45 +00:00
committed by qsm-odoo
co-authored by qsm-odoo
parent 8175268a53
commit 3cbdf754ff
7 changed files with 114 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/data/website_data.xml
+17 -5
View File
@@ -35,7 +35,7 @@
<span class="hidden" data-for="contactus_form" t-att-data-values="contactus_form_values"/>
<div id="wrap" class="oe_structure oe_empty">
<section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
<div class="o_we_bg_filter bg-black-50"/>
<div class="container">
<h1>Contact us</h1>
@@ -328,7 +328,7 @@
<div id="wrap">
<div class="oe_structure">
<section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
<div class="o_we_bg_filter bg-black-50"/>
<div class="container">
<h1>About us</h1>
@@ -344,7 +344,7 @@
<div id="wrap">
<div class="oe_structure">
<section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
<div class="o_we_bg_filter bg-black-50"/>
<div class="container">
<h1>Services</h1>
@@ -360,7 +360,7 @@
<div id="wrap">
<div class="oe_structure">
<section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
<div class="o_we_bg_filter bg-black-50"/>
<div class="container">
<h1>Pricing</h1>
@@ -376,7 +376,7 @@
<div id="wrap">
<div class="oe_structure">
<section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
<div class="o_we_bg_filter bg-black-50"/>
<div class="container">
<h1>Privacy Policy</h1>
@@ -937,6 +937,18 @@
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_banner.jpg</field>
</record>
<record id="website.s_banner_default_image_2" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_banner_default_image_2.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_banner_2.jpg</field>
</record>
<record id="website.s_banner_default_image_3" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_banner_default_image_3.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_banner_3.jpg</field>
</record>
<record id="website.s_parallax_default_image" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_parallax_default_image.jpg</field>
addons/website/static/src/img/snippets_demo/s_banner.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 214 KiB

After

Width:  |  Height:  |  Size: 35 KiB

addons/website/static/src/img/snippets_demo/s_banner_2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

addons/website/static/src/img/snippets_demo/s_banner_3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

addons/website/static/src/img/snippets_thumbs/s_banner.svg
+55 -23
View File
@@ -1,40 +1,72 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="23.23%" y2="76.77%">
<rect id="path-1" width="23.077" height="18.116" x="0" y="0"/>
<linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="46.509%" y2="34.249%">
<stop offset="0%" stop-color="#008374"/>
<stop offset="100%" stop-color="#006A59"/>
</linearGradient>
<linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="39.469%" y2="50%">
<stop offset="0%" stop-color="#00AA89"/>
<stop offset="100%" stop-color="#009989"/>
</linearGradient>
<rect id="path-5" width="25" height="2" x="0" y="0"/>
<filter id="filter-6" width="104%" height="200%" x="-2%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.292012675 0"/>
</filter>
<path id="path-7" d="M23 12v1H0v-1h23zm-4-3v1H0V9h19zm4-3v1H0V6h23z"/>
<filter id="filter-8" width="104.3%" height="128.6%" x="-2.2%" y="-7.1%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.0995137675 0"/>
</filter>
<linearGradient id="linearGradient-5" x1="0%" x2="100%" y1="45.675%" y2="54.325%">
<stop offset="0%" stop-color="#00A09D"/>
<stop offset="100%" stop-color="#00E2FF"/>
</linearGradient>
<rect id="path-2" width="21" height="2" x="3" y="3"/>
<filter id="filter-3" width="104.8%" height="200%" x="-2.4%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.259587944 0 0 0 0 0.259629577 0 0 0 0 0.259574831 0 0 0 0.525895979 0"/>
</filter>
<path id="path-4" d="M18 11v1H3v-1h15zm2-3v1H3V8h17z"/>
<filter id="filter-5" width="105.9%" height="150%" x="-2.9%" y="-12.5%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0995137675 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_banner">
<rect width="82" height="60" class="bg"/>
<g fill="url(#linearGradient-1)" class="group" opacity=".4">
<g class="image_1">
<rect width="82" height="60" class="rectangle"/>
<g class="group" transform="translate(8 20)">
<g class="group" transform="translate(15 -3)">
<g class="image_1_border" transform="translate(29)">
<rect width="24" height="19" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.462 .442)">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
<ellipse cx="17.769" cy="4.64" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="3.462" ry="3.314"/>
<ellipse cx="23.308" cy="19.884" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="10.846" ry="6.628"/>
<ellipse cx=".231" cy="20.105" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="17.308" ry="10.384"/>
</g>
<path fill="#FFF" d="M24 0v19H0V0h24zm-1 1H1v17h22V1z" class="rectangle_2"/>
</g>
<g class="image_1_border" transform="translate(17,10)">
<rect width="24" height="19" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.462 .442)">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
<ellipse cx="17.769" cy="4.64" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="3.462" ry="3.314"/>
<ellipse cx="23.308" cy="19.884" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="10.846" ry="6.628"/>
<ellipse cx=".231" cy="20.105" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="17.308" ry="10.384"/>
</g>
<path fill="#FFF" d="M24 0v19H0V0h24zm-1 1H1v17h22V1z" class="rectangle_2"/>
</g>
</g>
</g>
<g class="group" transform="translate(13 22)">
<rect width="28" height="16" fill="#FFF" class="rectangle"/>
<g class="rectangle">
<use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
<use fill="#000" fill-opacity=".697" xlink:href="#path-2"/>
<use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
</g>
<g class="combined_shape">
<use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
<use fill="#000" fill-opacity=".348" xlink:href="#path-4"/>
<use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
</g>
<rect width="17" height="5" transform="translate(0 18)" fill="url(#linearGradient-5)" class="rectangle"/>
</g>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

addons/website/static/tests/tours/snippet_empty_parent_autoremove.js
+23 -14
View File
@@ -34,29 +34,38 @@ wTourUtils.registerWebsitePreviewTour('snippet_empty_parent_autoremove', {
trigger: 'iframe #wrap:empty',
},
// Banner: test that parallax, bg-filter and shape are not treated as content
// Cover: test that parallax, bg-filter and shape are not treated as content
wTourUtils.dragNDrop({
id: 's_banner',
name: 'Banner',
id: 's_cover',
name: 'Cover',
}),
wTourUtils.clickOnSnippet({
id: 's_banner',
name: 'Banner',
id: 's_cover',
name: 'Cover',
}),
{
content: "Check that parallax is present",
trigger: 'iframe #wrap .s_banner .s_parallax_bg',
run: () => null,
},
// Add a shape
wTourUtils.changeOption('ColoredLevelBackground', 'Shape'),
{
content: "Check that shape is present",
trigger: 'iframe #wrap .s_banner .o_we_shape',
content: "Check that the parallax element is present",
trigger: 'iframe #wrap .s_cover .s_parallax_bg',
run: () => null,
},
{
content: "Click on first column",
trigger: 'iframe #wrap .s_banner .row > :first-child',
content: "Check that the filter element is present",
trigger: 'iframe #wrap .s_cover .o_we_bg_filter',
run: () => null,
},
{
content: "Check that the shape element is present",
trigger: 'iframe #wrap .s_cover .o_we_shape',
run: () => null,
},
// Add a column
wTourUtils.changeOption('layout_column', 'we-toggler'),
wTourUtils.changeOption('layout_column', '[data-select-count="1"]'),
{
content: "Click on the created column",
trigger: 'iframe #wrap .s_cover .row > :first-child',
},
removeSelectedBlock(),
{
addons/website/views/snippets/s_banner.xml
+19 -6
View File
@@ -2,14 +2,27 @@
<odoo>
<template id="s_banner" name="Banner">
<section class="s_banner parallax s_parallax_is_fixed pt96 pb96" data-scroll-background-ratio="1">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
<section class="s_banner pt96 pb96">
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-6 jumbotron rounded o_cc o_cc1 pt32 pb32" data-name="Box">
<h1><font style="font-size: 62px;">Sell Online. Easily.</font></h1>
<div class="row s_nb_column_fixed o_grid_mode">
<div class="justify-content-center o_grid_item g-height-4 g-col-lg-5 col-lg-5" data-name="Box" style="z-index: 1; grid-area: 2 / 1 / 10 / 6;">
<h1><font style="font-size: 62px;">Sell Online. <strong>Easily.</strong></font></h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<a t-att-href="cta_btn_href" class="btn btn-primary"><t t-esc="cta_btn_text">Contact Us</t></a>
<div class="s_hr text-start pb32 pt4" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto"/>
</div>
<p>
<a t-att-href="cta_btn_href" class="btn btn-lg btn-primary">Start Now <span class="fa fa-angle-right ms-2"/></a>
</p>
</div>
<div class="o_grid_item o_grid_item_image g-col-lg-4 g-height-10 col-lg-4" style="z-index: 2; grid-area: 1 / 8 / 11 / 12;">
<img class="img img-fluid mx-auto shadow rounded" src="/web/image/website.s_banner_default_image_2" alt=""/>
</div>
<div class="o_grid_item o_grid_item_image g-col-lg-2 g-height-5 col-lg-2 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 3; grid-area: 2 / 11 / 7 / 13;">
<img class="img img-fluid mx-auto shadow rounded" src="/web/image/website.s_banner_default_image_3" alt=""/>
</div>
<div class="o_grid_item o_grid_item_image g-col-lg-3 g-height-5 col-lg-3 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 4; grid-area: 7 / 7 / 12 / 10;">
<img class="img img-fluid mx-auto shadow rounded" src="/web/image/website.s_banner_default_image" alt=""/>
</div>
</div>
</div>