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

[MOV] website: add s_showcase snippet from themes repo

Browse Source 
Part of https://github.com/odoo/odoo/pull/42937
task-2088157
This commit is contained in:
qsm-odoo
2020-01-24 13:02:02 +00:00
parent 00db26e85e
commit 0f346ae2b5
6 changed files with 178 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/__manifest__.py
+1
View File
@@ -60,6 +60,7 @@
'views/snippets/s_numbers.xml',
'views/snippets/s_masonry_block.xml',
'views/snippets/s_media_list.xml',
'views/snippets/s_showcase.xml',
'views/snippets/s_mega_menu_multi_menus.xml',
'views/snippets/s_mega_menu_menu_image_menu.xml',
'views/website_views.xml',
addons/website/static/src/img/snippets_thumbs/s_showcase.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

addons/website/static/src/snippets/s_showcase/000.scss
+77
View File
@@ -0,0 +1,77 @@
#wrapwrap .s_showcase:not([data-vcss]) {
@include media-breakpoint-up(lg) {
.container, .container-fluid {
position: relative;
&:before {
content: " ";
display: block;
@include o-position-absolute($left: 50%);
height: 100%;
border-right: 1px solid gray('200');
}
}
}
.fa {
opacity: 0.5;
}
.text-right{
.fa {
float: right;
margin-left: .5em;
}
p {
float: right;
display: block;
}
}
.text-left{
.fa {
float: left;
margin-right: .5em;
}
p {
float: left;
}
}
.row {
margin-top: 1em;
}
.feature p {
max-width: 300px;
margin-top: 0.6em;
clear: both;
}
}
@include media-breakpoint-down(md) {
#wrapwrap .s_showcase:not([data-vcss]) {
.text-right, .text-left {
text-align: center;
.fa {
font-size: 2em;
opacity: 0.5;
float: none;
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
}
.feature {
margin-bottom: 3em;
p {
float: none;
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
}
}
}
addons/website/static/src/snippets/s_showcase/001.scss
+47
View File
@@ -0,0 +1,47 @@
.s_showcase[data-vcss='001'] {
@include media-breakpoint-up(lg) {
// Left-right separator
.container, .container-fluid {
position: relative;
&:before {
content: " ";
display: block;
@include o-position-absolute($left: 50%);
height: 100%;
border-right: 1px solid gray('200');
}
}
// Features
.row > div {
// Items on left
&:nth-child(odd) {
text-align: right;
.s_showcase_icon, p {
float: right;
}
.s_showcase_icon {
margin-right: 0;
margin-left: 15px;
}
}
// Items on right
&:nth-child(even) {
text-align: left;
.s_showcase_icon, p {
float: left;
}
}
}
}
.s_showcase_icon {
// Make the default margin the one for the left aligned icon, as it's what we want on mobile
margin-right: 15px;
opacity: .5;
font-size: 36px;
}
}
addons/website/views/snippets/s_showcase.xml
+52
View File
@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- Template -->
<template name="Showcase" id="s_showcase">
<section class="s_showcase" data-vcss="001">
<div class="container">
<div class="row text-center col-md-6 col-lg-12 mx-auto mt-3">
<div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
<h3 class="mb16"><span class="fa fa-fw fa-desktop s_showcase_icon"/>First feature</h3>
<p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
</div>
<div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
<h3 class="mb16"><span class="fa fa-paint-brush s_showcase_icon"/>Second feature</h3>
<p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
</div>
<div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
<h3 class="mb16"><span class="fa fa-heart s_showcase_icon"/>Another feature</h3>
<p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
</div>
<div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
<h3 class="mb16"><span class="fa fa-sliders s_showcase_icon"/>Last Feature</h3>
<p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
</div>
</div>
</div>
<div class="mt16 mb16 text-center">
<a class="btn btn-secondary" href="">Discover all the features</a>
</div>
</section>
</template>
<!-- Options -->
<template id="s_showcase_options" inherit_id="website.snippet_options">
<xpath expr="//div[@data-js='background']" position="before">
<div data-js='s_showcase' data-selector=".s_showcase .feature"/>
</xpath>
</template>
<!-- Assets -->
<template id="assets_snippet_s_showcase_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_showcase/000.scss"/>
</xpath>
</template>
<template id="assets_snippet_s_showcase_css_001" inherit_id="website.assets_frontend">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_showcase/001.scss"/>
</xpath>
</template>
</odoo>
addons/website/views/snippets/snippets.xml
+1 -1
View File
@@ -35,7 +35,7 @@
<t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.png"/>
<t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.png"/>
<t t-snippet="website.s_media_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_media_list.png"/>
<!-- Showcase -->
<t t-snippet="website.s_showcase" t-thumbnail="/website/static/src/img/snippets_thumbs/s_showcase.jpg"/>
<t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/snippets_thumbs/s_parallax.png"/>
</div>
</div>