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

[IMP] website: review structure snippets

Browse Source 
This commit reviews a bunch structure snippets to streamline their use
and edition, namely:

Banner, Cover, Picture and Text-block snippets:
- Remove extraneous levels of edition (buttons, heading/text only
columns)

Picture snippet:
- make picture bigger

Three columns and comparison snippets:
- Make regular column options available on the cards
- Remove unwanted UI elements (card footer, button)

Cover snippet:
- Make title bold

It also consolidates the main colorpicker and the column colorpicker
into a single option as they did the same thing and allows inner content
to be dropped next to images in the Image - Text and Text - Image
snippets.

Part of https://github.com/odoo/odoo/pull/42937
task-2088157
task-2152184
This commit is contained in:
Samuel Degueldre
2020-01-24 13:02:00 +00:00
committed by qsm-odoo
parent 25708586a7
commit f34d7f4fab
11 changed files with 58 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/scss/website.scss
+5
View File
@@ -380,6 +380,11 @@ table.table_desc tr td {
@extend .o_half_screen_height;
}
// Allows custom border radius without contents overflowing.
.card {
overflow: hidden;
}
//
// Snippets
//
addons/website/static/src/snippets/s_three_columns/000.scss
+2 -2
View File
@@ -1,5 +1,5 @@
.s_three_columns {
.align-items-stretch .card {
.s_three_columns:not([data-vcss]) {
.align-items-stretch > .card {
height: 100%;
}
}
addons/website/static/src/snippets/s_title/000.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.s_title {
.s_title:not([data-vcss]) {
.s_title_boxed {
> * {
display: inline-block;
addons/website/views/snippets/s_banner.xml
+4 -11
View File
@@ -7,17 +7,10 @@
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-7 bg-white jumbotron rounded pt32 pb32" 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>
<h1 class="s_title_thin"><font style="font-size: 62px;">Sell Online. Easily.</font></h1>
<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>
<p class="lead"><br/></p>
<a href="#" class="btn btn-epsilon rounded-circle">Do something</a>
</div>
</div>
</div>
addons/website/views/snippets/s_carousel.xml
+1 -1
View File
@@ -18,7 +18,7 @@
<div class="row content">
<div class="carousel-content col-lg-7">
<div class="s_title pb8" data-name="Title">
<h2 class="s_title_default"><font style="font-size: 62px;">Slide Title</font></h2>
<h2><font style="font-size: 62px;">Slide Title</font></h2>
</div>
<p class="lead">Use this snippet to presents your content in a slideshow-like format.<br/> Don't write about products or services here, write about solutions.</p>
<div class="s_btn text-left pt16 pb16" data-name="Buttons">
addons/website/views/snippets/s_cover.xml
+6 -12
View File
@@ -5,18 +5,12 @@
<section class="s_cover parallax s_parallax_is_fixed bg-black-50 pt96 pb96" data-scroll-background-ratio="1">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-12 s_title" data-name="Title">
<h1 class="s_title_thin" style="font-size: 62px; text-align: center;">Catchy Headline</h1>
</div>
<div class="col-lg-12 s_text pt16 pb16" data-name="Text">
<p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
</div>
<div class="col-lg-12 s_btn text-center pt16 pb16" data-name="Buttons">
<a href="/aboutus" class="btn btn-delta rounded-circle">About us</a>
<a href="/contactus" class="btn btn-primary rounded-circle">Contact us</a>
</div>
</div>
<h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Catchy Headline</font></h1>
<p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
<p style="text-align: center;">
<a href="/aboutus" class="btn btn-delta rounded-circle">About us</a>
<a href="/contactus" class="btn btn-primary rounded-circle">Contact us</a>
</p>
</div>
</section>
</template>
addons/website/views/snippets/s_picture.xml
+5 -9
View File
@@ -4,17 +4,13 @@
<template id="s_picture" name="Picture">
<section class="s_picture bg-200 pt48 pb24">
<div class="container">
<h2 class="s_title_thin" style="text-align: center;"><font style="font-size: 62px;">A punchy Headline</font></h2>
<p style="text-align: center;">Choose a vibrant image and write an inspiring paragraph about it.<br/> It does not have to be long, but it should reinforce your image.</p>
<div class="row s_nb_column_fixed">
<div class="col-lg-12 s_title pt16 pb16">
<h2 class="s_title_thin" style="text-align: center;"><font style="font-size: 62px;">A punchy Headline</font></h2>
</div>
<div class="col-lg-12 pt16 pb16">
<p style="text-align: center;">Choose a vibrant image and write an inspiring paragraph about it.<br/> It does not have to be long, but it should reinforce your image.</p>
</div>
<div class="col-lg-8 offset-lg-2 pb24">
<div class="col-lg-10 offset-lg-1 pb24" style="text-align: center;">
<figure class="figure">
<img src="/web/image/website.s_picture_default_image" class="figure-img img-fluid rounded img-thumbnail padding-large" alt="Odoo • A picture with a caption"/>
<figcaption class="figure-caption py-3 text-center"><i class="fa fa-1x fa-picture-o mr-2"/>Add a caption to enhance the meaning of this image.</figcaption>
<img src="/web/image/website.s_picture_default_image" class="figure-img img-thumbnail padding-large" alt="Odoo • A picture with a caption"/>
<figcaption class="figure-caption py-3"><i class="fa fa-1x fa-picture-o mr-2"/>Add a caption to enhance the meaning of this image.</figcaption>
</figure>
</div>
</div>
addons/website/views/snippets/s_text_block.xml
+3 -7
View File
@@ -4,13 +4,9 @@
<template id="s_text_block" name="Text block">
<section class="s_text_block pt32 pb32">
<div class="container">
<div class="row">
<div class="col-lg-12 pt32 pb32">
<p class="lead">A great way to catch your reader's attention is to tell a story. <br/>Everything you consider writing can be told as a story.</p>
<p><b>Great stories have personality.</b> Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.</p>
<p><b>Great stories are for everyone even when only written for just one person.</b> If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
</div>
</div>
<p class="lead">A great way to catch your reader's attention is to tell a story. <br/>Everything you consider writing can be told as a story.</p>
<p><b>Great stories have personality.</b> Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.</p>
<p><b>Great stories are for everyone even when only written for just one person.</b> If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
</div>
</section>
</template>
addons/website/views/snippets/s_three_columns.xml
+4 -10
View File
@@ -2,11 +2,11 @@
<odoo>
<template id="s_three_columns" name="Columns">
<section class="s_three_columns bg-200 pt32 pb32">
<section class="s_three_columns bg-200 pt32 pb32" data-vcss="001">
<div class="container">
<div class="row d-flex align-items-stretch">
<div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
<div class="card bg-white">
<div class="card bg-white h-100">
<img class="card-img-top" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
<div class="card-body">
<h3 class="card-title">Feature One</h3>
@@ -15,26 +15,20 @@
</div>
</div>
<div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
<div class="card bg-white">
<div class="card bg-white h-100">
<img class="card-img-top" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
<div class="card-body">
<h3 class="card-title">Feature Two</h3>
<p class="card-text">To add a fourth column, reduce the size of these three columns using the right icon of each block. Then, duplicate one of the columns to create a new one as a copy.</p>
</div>
<div class="card-footer">
<i class="fa fa-info-circle mr-1"/> <small>Additional information</small>
</div>
</div>
</div>
<div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
<div class="card bg-white">
<div class="card bg-white h-100">
<img class="card-img-top" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
<div class="card-body">
<h3 class="card-title">Feature Three</h3>
<p class="card-text">Delete the above image or replace it with a picture that illustrates your message. Click on the picture to change its <em>rounded corner</em> style.</p>
<div class="s_btn text-left pb0 pt16" data-name="Button">
<a href="#" class="btn btn-primary btn-sm">Learn more</a>
</div>
</div>
</div>
</div>
addons/website/views/snippets/s_title.xml
+2 -23
View File
@@ -2,34 +2,13 @@
<odoo>
<template id="s_title" name="Title">
<section class="s_title pt32 pb32">
<section class="s_title pt32 pb32" data-vcss="001">
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-12 s_title pt16 pb16" style="text-align: center;">
<h1 class="s_title_default"><font style="font-size: 62px;">Your Site Title</font></h1>
</div>
</div>
<h1 style="text-align: center;"><font style="font-size: 62px;">Your Site Title</font></h1>
</div>
</section>
</template>
<template id="s_title_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-selector=".s_title" data-target="[class*='s_title_']">
<we-select string="Typography">
<we-button data-select-class="s_title_boxed">Boxed</we-button>
<we-button data-select-class="s_title_lines">Line-On-Sides</we-button>
<we-button data-select-class="s_title_thin">Thin</we-button>
<we-button data-select-class="s_title_transparent">Transparent</we-button>
<we-button data-select-class="s_title_underlined">Underlined</we-button>
<we-button data-select-class="s_title_small_caps">Small Caps</we-button>
<we-divider/>
<we-button data-select-class="s_title_default">Default</we-button>
</we-select>
</div>
</xpath>
</template>
<template id="assets_snippet_s_title_css_000" inherit_id="website.assets_frontend">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_title/000.scss"/>
addons/website/views/snippets/snippets.xml
+25 -27
View File
@@ -102,16 +102,32 @@
</xpath>
</template>
<template id="website.snippet_options_border">
<we-row string="Border" class="o_we_inline">
<we-colorpicker data-dependencies="border_width_opt"
data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
<we-input class="o_we_inline" data-name="border_width_opt"
data-select-style="0" data-css-property="border-width"
data-unit="px" data-extra-class="border"/>
</we-row>
<we-input string="Rounded" class="o_we_inline"
data-dependencies="border_width_opt"
data-select-style="0" data-css-property="border-radius"
data-unit="px" data-extra-class="rounded"/>
</template>
<template id="snippet_options">
<t t-call="web_editor.snippet_options"/>
<!-- COLOR | .s_three_columns | .s_comparisons -->
<!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
<div data-selector=".s_three_columns .row > div, .s_comparisons .row > div, .s_tabs .row > div"
data-target=".card">
<we-colorpicker string="Color"
<we-colorpicker string="Background Color"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"/>
<t t-call="website.snippet_options_border"/>
<we-checkbox string="Shadow" data-select-class="shadow"/>
</div>
<!-- COLOR | .s_cards -->
@@ -232,7 +248,7 @@
<we-button data-background-type="cover">Cover</we-button>
<we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
</we-select>
<we-button class="fa fa-fw fa-arrows" title="Background Position"
<we-button class="fa fa-fw fa-crosshairs" title="Background Position"
data-background-position-overlay="true" data-no-preview="true"/>
</we-row>
<we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
@@ -255,10 +271,10 @@
</we-select>
</div>
<!-- Color | Section -->
<!-- Background Color -->
<div id="so_main_colorpicker"
data-selector="section, .carousel-item"
data-exclude=".parallax, .o_gallery .carousel-item">
data-selector="section, .carousel-item, section .row > div"
data-exclude=".parallax, .o_gallery .carousel-item, .s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
<we-colorpicker string="Background Color"
data-select-style="true"
data-css-property="background-color"
@@ -274,28 +290,10 @@
data-excluded="common, theme, custom"/>
</div>
<!-- Color | Columns -->
<div data-selector="section .row > div"
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
<we-colorpicker string="Background Color"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"/>
</div>
<!-- Border | Columns -->
<div data-selector="section .row > div"
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
<we-row string="Border" class="o_we_inline">
<we-colorpicker data-dependencies="border_width_opt"
data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
<we-input class="o_we_inline" data-name="border_width_opt"
data-select-style="0" data-css-property="border-width"
data-unit="px" data-extra-class="border"/>
</we-row>
<we-input string="Rounded" class="o_we_inline"
data-dependencies="border_width_opt"
data-select-style="0" data-css-property="border-radius"
data-unit="px" data-extra-class="rounded"/>
<t t-call="website.snippet_options_border"/>
<we-checkbox string="Shadow" data-select-class="shadow"/>
</div>
@@ -316,7 +314,7 @@
<t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_btn, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart</t>
<div id="so_content_addition"
t-att-data-selector="so_content_addition_selector"
t-attf-data-drop-near="p, h1, h2, h3, #{so_content_addition_selector}"
t-attf-data-drop-near="p, h1, h2, h3, .row > div > img, #{so_content_addition_selector}"
data-drop-in=".content, nav"/>
<div data-js="SnippetSave"