[MERGE] website, *: review and regroup all snippets
Move many theme-specific snippets in standard website (the rest will be removed) and review the structure of all snippets. Also add new options. See sub-commits for details. task-2088157 closes odoo/odoo#42937 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Odoo's Mergebot
@@ -41,7 +41,6 @@
|
||||
'views/snippets/s_card.xml',
|
||||
'views/snippets/s_share.xml',
|
||||
'views/snippets/s_rating.xml',
|
||||
'views/snippets/s_btn.xml',
|
||||
'views/snippets/s_hr.xml',
|
||||
'views/snippets/s_facebook_page.xml',
|
||||
'views/snippets/s_image_gallery.xml',
|
||||
@@ -58,6 +57,18 @@
|
||||
'views/snippets/s_chart.xml',
|
||||
'views/snippets/s_parallax.xml',
|
||||
'views/snippets/s_quotes_carousel.xml',
|
||||
'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_timeline.xml',
|
||||
'views/snippets/s_process_steps.xml',
|
||||
'views/snippets/s_text_highlight.xml',
|
||||
'views/snippets/s_progress_bar.xml',
|
||||
'views/snippets/s_blockquote.xml',
|
||||
'views/snippets/s_badge.xml',
|
||||
'views/snippets/s_color_blocks_2.xml',
|
||||
'views/snippets/s_product_list.xml',
|
||||
'views/snippets/s_mega_menu_multi_menus.xml',
|
||||
'views/snippets/s_mega_menu_menu_image_menu.xml',
|
||||
'views/website_views.xml',
|
||||
@@ -69,6 +80,9 @@
|
||||
'views/res_partner_views.xml',
|
||||
'wizard/base_language_install_views.xml',
|
||||
'wizard/website_robots.xml',
|
||||
|
||||
# Old snippets
|
||||
'views/snippets/s_btn.xml',
|
||||
],
|
||||
'demo': [
|
||||
'data/website_demo.xml',
|
||||
|
||||
@@ -25,13 +25,9 @@
|
||||
<t t-call="website.layout">
|
||||
<div id="wrap">
|
||||
<div class="oe_structure">
|
||||
<section class="pt8 pb8">
|
||||
<section class="s_title pt24 pb24">
|
||||
<div class="container">
|
||||
<div class="row s_nb_column_fixed">
|
||||
<div class="col-lg-12 s_title pt16 pb16">
|
||||
<h1>Contact us</h1>
|
||||
</div>
|
||||
</div>
|
||||
<h1>Contact us</h1>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -77,14 +73,10 @@
|
||||
<t t-call="website.layout">
|
||||
<div id="wrap">
|
||||
<div class="oe_structure">
|
||||
<section class="pt8 pb8">
|
||||
<section class="s_title pt24 pb24">
|
||||
<div class="container">
|
||||
<div class="row s_nb_column_fixed">
|
||||
<div class="col-lg-12 s_title pt16 pb16">
|
||||
<h1 class="text-center">About us</h1>
|
||||
<h3 class="text-muted text-center">Great products for great people</h3>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-center">About us</h1>
|
||||
<h3 class="text-muted text-center">Great products for great people</h3>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s_text_image pt8 pb8">
|
||||
@@ -381,6 +373,66 @@
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_cover.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_masonry_block_default_image_1" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_masonry_block_default_image_1.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_masonry_block_1.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_media_list_default_image_1" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_media_list_default_image_1.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_media_list_1.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_media_list_default_image_2" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_media_list_default_image_2.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_media_list_2.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_media_list_default_image_3" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_media_list_default_image_3.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_media_list_3.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_product_list_default_image_1" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_product_list_default_image_1.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_product_list_default_image_2" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_product_list_default_image_2.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_product_list_default_image_3" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_product_list_default_image_3.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_product_list_default_image_4" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_product_list_default_image_4.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_product_list_default_image_5" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_product_list_default_image_5.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_product_list_default_image_6" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_product_list_default_image_6.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_quotes_carousel_demo_image_1" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_quotes_carousel_image_01.jpg</field>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 362 B |
Binary file not shown.
|
After Width: | Height: | Size: 486 B |
Binary file not shown.
|
Before Width: | Height: | Size: 816 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 418 B After Width: | Height: | Size: 418 B |
|
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
Binary file not shown.
|
After Width: | Height: | Size: 772 B |
Binary file not shown.
|
After Width: | Height: | Size: 630 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 325 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 457 B |
|
Before Width: | Height: | Size: 536 B After Width: | Height: | Size: 536 B |
@@ -393,119 +393,6 @@ options.registry.CarouselItem = options.Class.extend({
|
||||
},
|
||||
});
|
||||
|
||||
options.registry.navTabs = options.Class.extend({
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
this._findLinksAndPanes();
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
onBuilt: function () {
|
||||
this._generateUniqueIDs();
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
onClone: function () {
|
||||
this._generateUniqueIDs();
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Creates a new tab and tab-pane.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
addTab: function (previewMode, widgetValue, params) {
|
||||
var $activeItem = this.$navLinks.filter('.active').parent();
|
||||
var $activePane = this.$tabPanes.filter('.active');
|
||||
|
||||
var $navItem = $activeItem.clone();
|
||||
var $navLink = $navItem.find('.nav-link').removeClass('active show');
|
||||
var $tabPane = $activePane.clone().removeClass('active show');
|
||||
$navItem.insertAfter($activeItem);
|
||||
$tabPane.insertAfter($activePane);
|
||||
this._findLinksAndPanes();
|
||||
this._generateUniqueIDs();
|
||||
|
||||
$navLink.tab('show');
|
||||
},
|
||||
/**
|
||||
* Removes the current active tab and its content.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
removeTab: function (previewMode, widgetValue, params) {
|
||||
var self = this;
|
||||
|
||||
var $activeLink = this.$navLinks.filter('.active');
|
||||
var $activePane = this.$tabPanes.filter('.active');
|
||||
|
||||
var $next = this.$navLinks.eq((this.$navLinks.index($activeLink) + 1) % this.$navLinks.length);
|
||||
|
||||
return new Promise(resolve => {
|
||||
$next.one('shown.bs.tab', function () {
|
||||
$activeLink.parent().remove();
|
||||
$activePane.remove();
|
||||
self._findLinksAndPanes();
|
||||
resolve();
|
||||
});
|
||||
$next.tab('show');
|
||||
});
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_computeWidgetVisibility: async function (widgetName, params) {
|
||||
if (widgetName === 'remove_tab_opt') {
|
||||
return (this.$tabPanes.length > 2);
|
||||
}
|
||||
return this._super(...arguments);
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_findLinksAndPanes: function () {
|
||||
this.$navLinks = this.$target.find('.nav-link');
|
||||
var $el = this.$target;
|
||||
do {
|
||||
$el = $el.parent();
|
||||
this.$tabPanes = $el.find('.tab-pane');
|
||||
} while (this.$tabPanes.length === 0 && !$el.is('body'));
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_generateUniqueIDs: function () {
|
||||
for (var i = 0; i < this.$navLinks.length; i++) {
|
||||
var id = _.now() + '_' + _.uniqueId();
|
||||
var idLink = 'nav_tabs_link_' + id;
|
||||
var idContent = 'nav_tabs_content_' + id;
|
||||
this.$navLinks.eq(i).attr({
|
||||
'id': idLink,
|
||||
'href': '#' + idContent,
|
||||
'aria-controls': idContent,
|
||||
});
|
||||
this.$tabPanes.eq(i).attr({
|
||||
'id': idContent,
|
||||
'aria-labelledby': idLink,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
options.registry.sizing_x = options.registry.sizing.extend({
|
||||
/**
|
||||
* @override
|
||||
@@ -1171,6 +1058,17 @@ options.registry.SnippetMove = options.Class.extend({
|
||||
|
||||
return this._super(...arguments);
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
onFocus: function () {
|
||||
// TODO improve this: hack to hide options section if snippet move is
|
||||
// the only one.
|
||||
const $allOptions = this.$el.parent();
|
||||
if ($allOptions.find('we-customizeblock-option').length <= 1) {
|
||||
$allOptions.addClass('d-none');
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
@@ -1182,12 +1080,20 @@ options.registry.SnippetMove = options.Class.extend({
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
moveSnippet: function (previewMode, widgetValue, params) {
|
||||
const isNavItem = this.$target[0].classList.contains('nav-item');
|
||||
const $tabPane = isNavItem ? $(this.$target.find('.nav-link')[0].hash) : null;
|
||||
switch (widgetValue) {
|
||||
case 'prev':
|
||||
this.$target.prev().before(this.$target);
|
||||
if (isNavItem) {
|
||||
$tabPane.prev().before($tabPane);
|
||||
}
|
||||
break;
|
||||
case 'next':
|
||||
this.$target.next().after(this.$target);
|
||||
if (isNavItem) {
|
||||
$tabPane.next().after($tabPane);
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -39,6 +39,8 @@ $o-social-colors: (
|
||||
'youtube': #ff0000,
|
||||
'github': #1a1e22,
|
||||
'instagram': #cf2872,
|
||||
'whatsapp': #25d366,
|
||||
'pinterest': #C8232C,
|
||||
);
|
||||
|
||||
$o-theme-figcaption-opacity: 0.6;
|
||||
|
||||
@@ -199,6 +199,12 @@ font[class*='bg-'] {
|
||||
border-top-left-radius: $size;
|
||||
border-bottom-right-radius: $size;
|
||||
}
|
||||
&.rounded-empty-circle {
|
||||
@extend .rounded-circle;
|
||||
border-width: ceil(1.4 * $border-width);
|
||||
border-style: solid;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
// Smaller container
|
||||
.o_container_small {
|
||||
@@ -380,6 +386,11 @@ table.table_desc tr td {
|
||||
@extend .o_half_screen_height;
|
||||
}
|
||||
|
||||
// Allows custom border radius without contents overflowing.
|
||||
.card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
//
|
||||
// Snippets
|
||||
//
|
||||
@@ -626,7 +637,6 @@ table.table_desc tr td {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Layout
|
||||
//
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
.s_badge {
|
||||
padding: $s-badge-padding;
|
||||
margin: $s-badge-margin;
|
||||
border-radius: if($s-badge-border-radius != null, $s-badge-border-radius, $border-radius);
|
||||
font-size: $font-size-sm;
|
||||
.fa {
|
||||
margin: $s-badge-i-margin;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
$s-badge-border-radius: null;
|
||||
$s-badge-padding: .5rem;
|
||||
$s-badge-margin: .5rem .5rem .5rem 0;
|
||||
$s-badge-i-margin: 0 .3rem 0 0;
|
||||
@@ -0,0 +1,41 @@
|
||||
.s_blockquote {
|
||||
.s_blockquote_icon {
|
||||
float: left;
|
||||
}
|
||||
.s_blockquote_content {
|
||||
overflow: hidden;
|
||||
padding: $grid-gutter-width/2;
|
||||
text-align: left;
|
||||
footer {
|
||||
background-color: initial;
|
||||
}
|
||||
}
|
||||
.blockquote-footer {
|
||||
img {
|
||||
max-height: 40px;
|
||||
}
|
||||
}
|
||||
// Don't use `&:.s_blockquote_classic`, same but not retro-compatible
|
||||
&:not(.s_blockquote_cover):not(.s_blockquote_minimalist) {
|
||||
.blockquote-footer {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.s_blockquote_minimalist {
|
||||
border-radius: 5px;
|
||||
.s_blockquote_content {
|
||||
padding: $grid-gutter-width/2.5;
|
||||
p {
|
||||
margin: 0;
|
||||
&:before {
|
||||
content: '\00AB\00a0';
|
||||
}
|
||||
&:after {
|
||||
content: '\00a0\00BB';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
odoo.define('website.s_blockquote_options', function (require) {
|
||||
'use strict';
|
||||
|
||||
const options = require('web_editor.snippets.options');
|
||||
|
||||
options.registry.Blockquote = options.Class.extend({
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Changes the position of the progressbar text.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
display: function (previewMode, widgetValue, params) {
|
||||
this.$target.find('.s_blockquote_icon')
|
||||
.toggleClass('d-none', widgetValue !== 'classic');
|
||||
|
||||
const $content = this.$target.find('.s_blockquote_content');
|
||||
$content.find('.quote_char').remove();
|
||||
if (widgetValue === 'cover') {
|
||||
this.$target.find('.s_blockquote_content > p').before(
|
||||
$('<fa/>').addClass('quote_char fa fa-quote-left font-italic')
|
||||
);
|
||||
}
|
||||
|
||||
// Text style
|
||||
$content.toggleClass('text-center', widgetValue === 'cover');
|
||||
$content.toggleClass('font-italic', widgetValue !== 'classic');
|
||||
|
||||
// Bg Img
|
||||
if (widgetValue === 'cover') {
|
||||
this.$target.css({'background-image': "url('/web/image/website.s_parallax_default_image')"});
|
||||
this.$target.css({'background-position': "50%"});
|
||||
$content.css({'background-color': "rgba(0, 0, 0, 0.5)"});
|
||||
} else {
|
||||
this.$target.css({'background-image': "unset"});
|
||||
$content.css({'background-color': "unset"});
|
||||
}
|
||||
|
||||
// Blockquote Footer
|
||||
const $footer = this.$target.find('footer');
|
||||
$footer.toggleClass('text-white', widgetValue === 'cover');
|
||||
this.$target.toggleClass('text-white', widgetValue === 'cover');
|
||||
$footer.toggleClass('d-none', widgetValue === 'minimalist');
|
||||
this.$target.find('.s_blockquote_avatar')
|
||||
.toggleClass('d-none', widgetValue !== 'classic');
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,27 @@
|
||||
.s_color_blocks_2 {
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
// Fix for safari browser as it 'supports' flex but not with the right
|
||||
// behavior
|
||||
&::before, &::after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
[class*="col-lg-"] {
|
||||
padding: 8% 5%;
|
||||
padding-top: 8vw; // A flex item cannot have % padding top and bottom (even if it works on chrome)
|
||||
padding-bottom: 8vw; // Solution is vw units but we keep 8% as a fallback
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
[class*="col-lg-"] {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@@ -4,21 +4,7 @@
|
||||
hr {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-top-color: inherit;
|
||||
border-top: 1px solid inherit;
|
||||
margin: 0;
|
||||
}
|
||||
// Style
|
||||
.s_hr_dashed { border-top-style: dashed; }
|
||||
.s_hr_double { border-top-style: double; }
|
||||
.s_hr_dotted { border-top-style: dotted; }
|
||||
.s_hr_solid { border-top-style: solid; }
|
||||
// Thickness
|
||||
$count: 5;
|
||||
$base-width: 1px;
|
||||
@while $count > 0 {
|
||||
.s_hr_#{$base-width * $count} {
|
||||
border-top-width: $base-width * $count;
|
||||
}
|
||||
$count: $count - 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
.s_masonry_block:not([data-vcss]) {
|
||||
.row, .row > div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.row > div {
|
||||
padding-bottom: $grid-gutter-width/2;
|
||||
padding-top: $grid-gutter-width/2;
|
||||
justify-content: center;
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
|
||||
.container-fluid > .row {
|
||||
flex-flow: row nowrap;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
> div.s_masonry_block_pseudo_col {
|
||||
flex: 1 1 auto;
|
||||
padding:0;
|
||||
|
||||
> .row {
|
||||
flex-flow: row wrap;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
> div {
|
||||
min-height: 50%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.s_ratio_2_1 {
|
||||
.row > div {
|
||||
padding-top: $grid-gutter-width;
|
||||
padding-bottom: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-no-flex] .s_masonry_block:not([data-vcss]) {
|
||||
min-height: 340px;
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 170px;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.row .row > div {
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
height: 0px; // hack to force height chain
|
||||
&.s_ratio_2_1 {
|
||||
position: relative;
|
||||
padding: 0 0 50% 0; // to have 2:1 aspect ratio
|
||||
> div {
|
||||
padding-top: 0;
|
||||
padding-bottom:0;
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include o-position-absolute($s-masonry-block-content-top, $s-masonry-block-content-right, $s-masonry-block-content-bottom, $s-masonry-block-content-left);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
$s-masonry-block-content-top: 35%;
|
||||
$s-masonry-block-content-right: 25%;
|
||||
$s-masonry-block-content-bottom: 35%;
|
||||
$s-masonry-block-content-left: 25%;
|
||||
@@ -0,0 +1,5 @@
|
||||
.s_masonry_block[data-vcss='001'] .row > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
|
||||
.s_media_list {
|
||||
.row {
|
||||
margin: $grid-gutter-width 0;
|
||||
}
|
||||
[class*="col-"] {
|
||||
padding: 0;
|
||||
}
|
||||
.s_media_list_body {
|
||||
background-color: #fff;
|
||||
padding: $grid-gutter-width;
|
||||
}
|
||||
.s_media_list_options {
|
||||
@include o-position-absolute(auto,0,0,0);
|
||||
display: flex;
|
||||
border-top: 1px solid gray('400');
|
||||
.s_media_list_option {
|
||||
flex: 1 1 auto;
|
||||
padding: $grid-gutter-width/3 0;
|
||||
border-right: 1px solid gray('400');
|
||||
text-align: center;
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
.s_process_steps {
|
||||
.s_process_step_icon {
|
||||
margin: $grid-gutter-width 0;
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fa {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.s_process_step_content {
|
||||
padding: 0 $grid-gutter-width/2;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow-x: hidden;
|
||||
.s_process_step {
|
||||
.s_process_step_icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
span:after {
|
||||
content: '';
|
||||
z-index: -1;
|
||||
border-top: 1px solid gray('500');
|
||||
@include o-position-absolute(50%, 0, 0, auto);
|
||||
}
|
||||
}
|
||||
&:not(:first-child):not(:last-child) .s_process_step_icon {
|
||||
span:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&:first-child .s_process_step_icon,
|
||||
&:last-child .s_process_step_icon {
|
||||
span:after {
|
||||
width: 1000%;
|
||||
}
|
||||
.fa {
|
||||
&:after {
|
||||
content: '';
|
||||
z-index: -1;
|
||||
@include o-position-absolute(50%, auto, 0, auto);
|
||||
width: 100%;
|
||||
border-top: 1px solid gray('500');
|
||||
}
|
||||
&.mx-auto:after {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child .s_process_step_icon {
|
||||
.fa:after { right: 0; }
|
||||
.fa.float-right:after { width: 0; }
|
||||
}
|
||||
&:last-child .s_process_step_icon {
|
||||
span:after { left: 0; }
|
||||
.fa {
|
||||
&:after { left: 0; }
|
||||
&.float-left:after { width: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$s_process_step_line_fw: true;
|
||||
|
||||
@if $s_process_step_line_fw == true {
|
||||
.s_process_step:first-child,
|
||||
.s_process_step:last-child {
|
||||
.s_process_step_icon > span:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
|
||||
.s_product_list {
|
||||
padding: 15px;
|
||||
|
||||
> div > .row > div {
|
||||
margin-bottom: 20px; // without this style the columns go directly to the top of the bellow ones.
|
||||
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
max-height: 130px;
|
||||
@include s-product-list-img-hook;
|
||||
}
|
||||
|
||||
.s_product_list_item_link {
|
||||
@include o-position-absolute($left: 10%, $bottom: 0, $right: 10%);
|
||||
|
||||
> .btn {
|
||||
width: 100%;
|
||||
padding: 5px !important;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media only screen and (max-width : 1280px) { // FIXME
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 18px;
|
||||
padding-right: 5px;
|
||||
|
||||
@media only screen and (max-width : 1024px) { // FIXME
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@mixin s-product-list-img-hook {}
|
||||
@@ -0,0 +1,113 @@
|
||||
odoo.define('website.s_progress_bar_options', function (require) {
|
||||
'use strict';
|
||||
|
||||
const core = require('web.core');
|
||||
const options = require('web_editor.snippets.options');
|
||||
|
||||
const _t = core._t;
|
||||
|
||||
options.registry.progress = options.Class.extend({
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
if (this.$overlay) {
|
||||
this._bindMoveProgress();
|
||||
}
|
||||
this._super();
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Changes the position of the progressbar text.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
display: function (previewMode, widgetValue, params) {
|
||||
// retro-compatibility
|
||||
if (this.$target.hasClass('progress')) {
|
||||
this.$target.removeClass('progress');
|
||||
this.$target.find('.progress-bar').wrap($('<div/>', {
|
||||
class: 'progress',
|
||||
}));
|
||||
this.$target.find('.progress-bar span').addClass('s_progress_bar_text');
|
||||
}
|
||||
|
||||
let $text = this.$target.find('.s_progress_bar_text');
|
||||
if (!$text.length) {
|
||||
$text = $('<span/>').addClass('s_progress_bar_text').html(_t('80% Development'));
|
||||
}
|
||||
|
||||
if (widgetValue === 'inline') {
|
||||
$text.appendTo(this.$target.find('.progress-bar'));
|
||||
} else {
|
||||
$text.insertBefore(this.$target.find('.progress'));
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_computeWidgetState: function (methodName, params) {
|
||||
switch (methodName) {
|
||||
case 'display': {
|
||||
const isInline = this.$target.find('.s_progress_bar_text')
|
||||
.parent('.progress-bar').length;
|
||||
return isInline ? 'inline' : 'below';
|
||||
}
|
||||
}
|
||||
return this._super(...arguments);
|
||||
},
|
||||
/**
|
||||
* Binds the editor padding feature to the progress bar width.
|
||||
*/
|
||||
_bindMoveProgress: function () {
|
||||
var self = this;
|
||||
var $e = this.$overlay.find(".o_handle.e").removeClass("readonly");
|
||||
const $progressBar = this.$target.find('.progress-bar');
|
||||
const $parent = $progressBar.parent();
|
||||
var pos = $parent.offset();
|
||||
var width = $parent.width();
|
||||
var time;
|
||||
function move(event) {
|
||||
clearTimeout(time);
|
||||
time = setTimeout(function () {
|
||||
var value = (event.clientX - pos.left) / width * 100 | 0;
|
||||
if (value > 100) {
|
||||
value = 100;
|
||||
}
|
||||
if (value < 0) {
|
||||
value = 0;
|
||||
}
|
||||
const $progressBarText = self.$target.find('.s_progress_bar_text');
|
||||
// Target precisely the XX% not only XX to not replace wrong element
|
||||
// eg 'Since 1978 we have completed 45%' <- don't replace 1978
|
||||
$progressBarText.text($progressBarText.text().replace(/[0-9]+%/, value + '%'));
|
||||
$progressBar.attr("data-value", value);
|
||||
$progressBar.attr("aria-valuenow", value);
|
||||
if (value < 3) {
|
||||
value = 3;
|
||||
}
|
||||
$progressBar.css("width", value + "%");
|
||||
}, 5);
|
||||
}
|
||||
$e.on("mousedown", function () {
|
||||
self.$overlay.addClass('d-none');
|
||||
$(document)
|
||||
.on("mousemove", move)
|
||||
.one("mouseup", function () {
|
||||
self.$overlay.removeClass('d-none');
|
||||
$(document).off("mousemove", move);
|
||||
self.trigger_up('cover_update');
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -10,16 +10,36 @@
|
||||
> a + a {
|
||||
margin-left: .4rem;
|
||||
}
|
||||
.s_share_facebook {
|
||||
&, &:hover, &:focus { color: #3b5998; }
|
||||
}
|
||||
.s_share_twitter {
|
||||
&, &:hover, &:focus { color: #1da1f2; }
|
||||
}
|
||||
.s_share_linkedin {
|
||||
&, &:hover, &:focus { color: #0077b5; }
|
||||
}
|
||||
.s_share_google {
|
||||
&, &:hover, &:focus { color: #db4437; }
|
||||
&:not(.no_icon_color) {
|
||||
.s_share_facebook {
|
||||
&, &:hover, &:focus {
|
||||
@extend .text-facebook;
|
||||
}
|
||||
}
|
||||
.s_share_twitter {
|
||||
&, &:hover, &:focus {
|
||||
@extend .text-twitter;
|
||||
}
|
||||
}
|
||||
.s_share_linkedin {
|
||||
&, &:hover, &:focus {
|
||||
@extend .text-linkedin;
|
||||
}
|
||||
}
|
||||
.s_share_google {
|
||||
&, &:hover, &:focus {
|
||||
@extend .text-google-plus;
|
||||
}
|
||||
}
|
||||
.s_share_whatsapp {
|
||||
&, &:hover, &:focus {
|
||||
@extend .text-whatsapp;
|
||||
}
|
||||
}
|
||||
.s_share_pinterest {
|
||||
&, &:hover, &:focus {
|
||||
@extend .text-pinterest;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// Tabs
|
||||
.s_tabs[data-vcss="001"] {
|
||||
.s_tabs_content {
|
||||
&.s_tabs_slide_up, &.s_tabs_slide_down, &.s_tabs_slide_left, &.s_tabs_slide_right {
|
||||
> .tab-pane.fade {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
> .tab-pane.fade.show {
|
||||
transform: translateX(0rem) translateY(0rem);
|
||||
}
|
||||
}
|
||||
&.s_tabs_slide_up > .tab-pane.fade {
|
||||
transform: translateY(-1rem);
|
||||
}
|
||||
&.s_tabs_slide_down > .tab-pane.fade {
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
&.s_tabs_slide_left > .tab-pane.fade {
|
||||
transform: translateX(-1rem);
|
||||
}
|
||||
&.s_tabs_slide_right > .tab-pane.fade {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
odoo.define('website.s_tabs_options', function (require) {
|
||||
'use strict';
|
||||
|
||||
const options = require('web_editor.snippets.options');
|
||||
|
||||
options.registry.NavTabs = options.Class.extend({
|
||||
isTopOption: true,
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
this._findLinksAndPanes();
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
onBuilt: function () {
|
||||
this._generateUniqueIDs();
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
onClone: function () {
|
||||
this._generateUniqueIDs();
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Creates a new tab and tab-pane.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
addTab: function (previewMode, widgetValue, params) {
|
||||
var $activeItem = this.$navLinks.filter('.active').parent();
|
||||
var $activePane = this.$tabPanes.filter('.active');
|
||||
|
||||
var $navItem = $activeItem.clone();
|
||||
var $navLink = $navItem.find('.nav-link').removeClass('active show');
|
||||
var $tabPane = $activePane.clone().removeClass('active show');
|
||||
$navItem.insertAfter($activeItem);
|
||||
$tabPane.insertAfter($activePane);
|
||||
this._findLinksAndPanes();
|
||||
this._generateUniqueIDs();
|
||||
|
||||
$navLink.tab('show');
|
||||
},
|
||||
/**
|
||||
* Removes the current active tab and its content.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
removeTab: function (previewMode, widgetValue, params) {
|
||||
var self = this;
|
||||
|
||||
var $activeLink = this.$navLinks.filter('.active');
|
||||
var $activePane = this.$tabPanes.filter('.active');
|
||||
|
||||
var $next = this.$navLinks.eq((this.$navLinks.index($activeLink) + 1) % this.$navLinks.length);
|
||||
|
||||
return new Promise(resolve => {
|
||||
$next.one('shown.bs.tab', function () {
|
||||
$activeLink.parent().remove();
|
||||
$activePane.remove();
|
||||
self._findLinksAndPanes();
|
||||
resolve();
|
||||
});
|
||||
$next.tab('show');
|
||||
});
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_computeWidgetVisibility: async function (widgetName, params) {
|
||||
if (widgetName === 'remove_tab_opt') {
|
||||
return (this.$tabPanes.length > 2);
|
||||
}
|
||||
return this._super(...arguments);
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_findLinksAndPanes: function () {
|
||||
this.$navLinks = this.$target.find('.nav:first .nav-link');
|
||||
this.$tabPanes = this.$target.find('.tab-content:first .tab-pane');
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_generateUniqueIDs: function () {
|
||||
for (var i = 0; i < this.$navLinks.length; i++) {
|
||||
var id = _.now() + '_' + _.uniqueId();
|
||||
var idLink = 'nav_tabs_link_' + id;
|
||||
var idContent = 'nav_tabs_content_' + id;
|
||||
this.$navLinks.eq(i).attr({
|
||||
'id': idLink,
|
||||
'href': '#' + idContent,
|
||||
'aria-controls': idContent,
|
||||
});
|
||||
this.$tabPanes.eq(i).attr({
|
||||
'id': idContent,
|
||||
'aria-labelledby': idLink,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
options.registry.NavTabsStyle = options.Class.extend({
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Set the style of the tabs.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
setStyle: function (previewMode, widgetValue, params) {
|
||||
const $nav = this.$target.find('.s_tabs_nav:first .nav');
|
||||
const isPills = widgetValue === 'pills';
|
||||
$nav.toggleClass('nav-tabs card-header-tabs', !isPills);
|
||||
$nav.toggleClass('nav-pills', isPills);
|
||||
this.$target.find('.s_tabs_nav:first').toggleClass('card-header', !isPills).toggleClass('mb-3', isPills);
|
||||
this.$target.toggleClass('card', !isPills);
|
||||
this.$target.find('.s_tabs_content:first').toggleClass('card-body', !isPills);
|
||||
},
|
||||
/**
|
||||
* Horizontal/vertical nav.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
setDirection: function (previewMode, widgetValue, params) {
|
||||
const isVertical = widgetValue === 'vertical';
|
||||
this.$target.toggleClass('row s_col_no_resize s_col_no_bgcolor', isVertical);
|
||||
this.$target.find('.s_tabs_nav:first .nav').toggleClass('flex-column', isVertical);
|
||||
this.$target.find('.s_tabs_nav:first > .nav-link').toggleClass('py-2', isVertical);
|
||||
this.$target.find('.s_tabs_nav:first').toggleClass('col-md-3', isVertical);
|
||||
this.$target.find('.s_tabs_content:first').toggleClass('col-md-9', isVertical);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_computeWidgetState: function (methodName, params) {
|
||||
switch (methodName) {
|
||||
case 'setStyle':
|
||||
return this.$target.find('.s_tabs_nav:first .nav').hasClass('nav-pills') ? 'pills' : 'tabs';
|
||||
case 'setDirection':
|
||||
return this.$target.find('.s_tabs_nav:first .nav').hasClass('flex-column') ? 'vertical' : 'horizontal';
|
||||
}
|
||||
return this._super(...arguments);
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
.s_text_highlight {
|
||||
padding: 12px 8px 18px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(white, 0.2);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.s_three_columns {
|
||||
.align-items-stretch .card {
|
||||
.s_three_columns:not([data-vcss]) {
|
||||
.align-items-stretch > .card {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
.s_timeline {
|
||||
.s_timeline_line {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
background-color: gray('800');
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.s_timeline_row {
|
||||
align-items: center;
|
||||
.s_timeline_content {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
~ .s_timeline_content {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
&.flex-row-reverse {
|
||||
.s_timeline_content {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
.s_timeline_date {
|
||||
z-index: 2;
|
||||
span:not(.fa) {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
}
|
||||
.fa {
|
||||
margin: 0 $grid-gutter-width/2;
|
||||
}
|
||||
}
|
||||
.s_timeline_icon {
|
||||
flex: 0 0 auto;
|
||||
margin: $grid-gutter-width/2;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
.s_title {
|
||||
.s_title:not([data-vcss]) {
|
||||
.s_title_boxed {
|
||||
> * {
|
||||
display: inline-block;
|
||||
|
||||
@@ -115,6 +115,9 @@
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_product_catalog/options.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_chart/options.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_rating/options.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_tabs/options.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_progress_bar/options.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_blockquote/options.js"/>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone_translate.js"/>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<odoo>
|
||||
|
||||
<template id="s_alert" name="Alert">
|
||||
<div class="s_alert s_alert_md alert-delta w-100 clearfix">
|
||||
<div class="s_alert s_alert_md alert-info w-100 clearfix">
|
||||
<i class="fa fa-2x fa-info-circle s_alert_icon"/>
|
||||
<div class="s_alert_content">
|
||||
<p>Explain the benefits you offer. <br/>Don't write about products or services here, write about solutions.</p>
|
||||
@@ -11,20 +11,30 @@
|
||||
</template>
|
||||
|
||||
<template id="s_alert_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-selector=".s_alert">
|
||||
<we-colorpicker string="Color"
|
||||
data-select-style="true"
|
||||
data-css-property="background-color"
|
||||
data-color-prefix="alert-"/>
|
||||
<xpath expr="//div[@id='so_width']" position="before">
|
||||
<div data-selector=".s_alert" data-js="Alert">
|
||||
<we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
|
||||
<we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
|
||||
<we-button data-select-class="fa-user-circle-o" data-trigger-value="secondary">Secondary</we-button>
|
||||
<we-button data-select-class="fa-info-circle" data-trigger-value="info">Info</we-button>
|
||||
<we-button data-select-class="fa-check-circle" data-trigger-value="success">Success</we-button>
|
||||
<we-button data-select-class="fa-exclamation-triangle" data-trigger-value="warning">Warning</we-button>
|
||||
<we-button data-select-class="fa-exclamation-circle" data-trigger-value="danger">Danger</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
|
||||
</xpath>
|
||||
<!-- Keep those options in separate xpath for options order -->
|
||||
<xpath expr="//div[@id='so_width']" position="after">
|
||||
<div data-selector=".s_alert">
|
||||
<we-select string="Size">
|
||||
<we-button data-select-class="s_alert_sm">Small</we-button>
|
||||
<we-button data-select-class="s_alert_md">Medium</we-button>
|
||||
<we-button data-select-class="s_alert_lg">Large</we-button>
|
||||
</we-select>
|
||||
<we-colorpicker string="Color" data-name="alert_colorpicker_opt"
|
||||
data-select-style="true"
|
||||
data-css-property="background-color"
|
||||
data-color-prefix="alert-"/>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Badge" id="s_badge">
|
||||
<span class="s_badge badge bg-gamma o_animable" data-name="Badge">
|
||||
<i class="fa fa-1x fa-fw fa-folder o_not-animable"/>Category
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template id="s_badge_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//div[@id='so_main_colorpicker']" position="attributes">
|
||||
<attribute name="data-selector" separator="," add=".s_badge"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@id='so_content_addition']" position="attributes">
|
||||
<attribute name="data-selector" separator="," add=".s_badge"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="_assets_snippet_s_badge_css_000_variables" inherit_id="website._assets_primary_variables">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_badge/000_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="assets_snippet_s_badge_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_badge/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -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><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>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Blockquote" id="s_blockquote">
|
||||
<blockquote class="s_blockquote s_blockquote_classic blockquote o_animable" style="background-color: rgba(239,239,239);">
|
||||
<i class="fa fa-quote-left fa-1x bg-beta rounded-0 s_blockquote_icon"/>
|
||||
<div class="s_blockquote_content">
|
||||
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
|
||||
<footer class="blockquote-footer">
|
||||
<img class="s_blockquote_avatar img rounded-circle mr-2" src="/web/image/theme_common.image_content_10" alt=""/>
|
||||
John DOE • CEO of MyCompany
|
||||
</footer>
|
||||
</div>
|
||||
</blockquote>
|
||||
</template>
|
||||
|
||||
<template id="s_blockquote_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//div[@id='so_main_colorpicker']" position="attributes">
|
||||
<attribute name="data-selector" separator="," add=".s_blockquote"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@data-js='background']" position="attributes">
|
||||
<attribute name="data-selector" separator="," add=".s_blockquote"/>
|
||||
<attribute name="data-dependencies" separator="," add="blockquote_cover_opt"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@data-js='background']" position="before">
|
||||
<div data-js="Blockquote" data-selector=".s_blockquote">
|
||||
<we-select string="Display" class="o_we_inline">
|
||||
<we-button data-select-class="s_blockquote_classic" data-display="classic">Classic</we-button>
|
||||
<we-button data-select-class="s_blockquote_cover" data-display="cover" data-name="blockquote_cover_opt">Cover</we-button>
|
||||
<we-button data-select-class="s_blockquote_minimalist" data-display="minimalist">Minimalist</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_blockquote_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_blockquote/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -1,12 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template id="s_btn" name="Button">
|
||||
<div class="s_btn text-center pt16 pb16" data-name="Buttons">
|
||||
<a href="#" class="btn btn-primary">Read more</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_btn_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_btn/000.scss"/>
|
||||
|
||||
@@ -9,11 +9,13 @@
|
||||
<h3><b>50,000+ companies</b> run Odoo to grow their businesses.</h3>
|
||||
<p class="lead">Join us and make your company a better place.</p>
|
||||
</div>
|
||||
<div class="col-lg-3 s_btn text-right pt8 pb24">
|
||||
<a href="/contactus" class="btn btn-primary btn-lg">
|
||||
<span>Contact us</span>
|
||||
<i class="fa fa-1x fa-fw fa-arrow-circle-right ml-1"/>
|
||||
</a>
|
||||
<div class="col-lg-3">
|
||||
<p class="text-right">
|
||||
<a href="/contactus" class="btn btn-primary btn-lg">
|
||||
<span>Contact us</span>
|
||||
<i class="fa fa-1x fa-fw fa-arrow-circle-right ml-1"/>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -17,14 +17,12 @@
|
||||
<div class="container">
|
||||
<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>
|
||||
</div>
|
||||
<h2><font style="font-size: 62px;">Slide Title</font></h2>
|
||||
<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">
|
||||
<p>
|
||||
<a href="/aboutus" class="btn btn-secondary flat">About us</a>
|
||||
<a href="/contactus" class="btn btn-primary flat">Contact us</a>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,9 +37,7 @@
|
||||
<hr class="s_hr_5px s_hr_dotted border-600 w-25 border-epsilon mx-auto text-center"/>
|
||||
</div>
|
||||
<p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p>
|
||||
<div class="s_btn text-center pt16 pb16" data-name="Buttons">
|
||||
<a href="/" class="btn btn-epsilon rounded-circle">Start your journey</a>
|
||||
</div>
|
||||
<p><a href="/" class="btn btn-epsilon rounded-circle">Start your journey</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Big Boxes" id="s_color_blocks_2">
|
||||
<section class="s_color_blocks_2">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 bg-alpha text-center">
|
||||
<i class="fa fa-shield fa-5x d-block mx-auto"/>
|
||||
<h2>This Is a Color Block</h2>
|
||||
<h3 class="text-muted mb16">Highlight Your Content</h3>
|
||||
<p class="text-justify mb32">Color blocks are a simple and effective way to <strong>present and highlight your content</strong>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</p>
|
||||
<a href="#" class="btn btn-info mb32">
|
||||
<i class="fa fa-1x fa-cog"/> More Details
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6 bg-gamma text-center">
|
||||
<i class="fa fa-cube fa-5x d-block mx-auto"/>
|
||||
<h2>An Other Color Block</h2>
|
||||
<h3 class="text-muted mb16">Customize Backgrounds</h3>
|
||||
<p class="text-justify mb32">Color blocks are a simple and effective way to <strong>present and highlight your content</strong>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</p>
|
||||
<a href="#" class="btn btn-info mb32">
|
||||
<i class="fa fa-1x fa-cog"/> More Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="s_color_blocks_2_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//div[@id='so_main_colorpicker']" position="attributes">
|
||||
<attribute name="data-selector" add=".s_color_blocks_2 [class*='col-']"/>
|
||||
<attribute name="data-exclude" add=".s_color_blocks_2"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@data-js='background']" position="attributes">
|
||||
<attribute name="data-selector" add=".s_color_blocks_2 [class*='col-']"/>
|
||||
<attribute name="data-exclude" add=".s_color_blocks_2"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@data-js='BackgroundPosition']" position="attributes">
|
||||
<attribute name="data-selector" add=".s_color_blocks_2 [class*='col-']"/>
|
||||
<attribute name="data-exclude" add=".s_color_blocks_2"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_color_blocks_2_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_color_blocks_2/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -1,14 +1,14 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template id="s_company_team" name="Company Team">
|
||||
<section class="s_company_team">
|
||||
<template id="s_company_team" name="Team">
|
||||
<section class="s_company_team pt48 pb48">
|
||||
<div class="container">
|
||||
<h1 style="text-align: center;">Meet the Executive Team</h1>
|
||||
<div class="row s_nb_column_fixed">
|
||||
<div class="col-lg-6 pt16 pb16">
|
||||
<div class="col-lg-6 pt32 pb16">
|
||||
<div class="row s_col_no_resize s_col_no_bgcolor">
|
||||
<div class="col-lg-4 ">
|
||||
<div class="col-lg-4">
|
||||
<img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-fluid rounded-circle d-block mx-auto shadow"/>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 pt16 pb16">
|
||||
<div class="col-lg-6 pt32 pb16">
|
||||
<div class="row s_col_no_resize s_col_no_bgcolor">
|
||||
<div class="col-lg-4">
|
||||
<img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-fluid rounded-circle d-block mx-auto shadow"/>
|
||||
@@ -36,7 +36,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 pt16 pb16">
|
||||
<div class="col-lg-6 pt32 pb16">
|
||||
<div class="row s_col_no_resize s_col_no_bgcolor">
|
||||
<div class="col-lg-4">
|
||||
<img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-fluid rounded-circle d-block mx-auto shadow"/>
|
||||
@@ -51,7 +51,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 pt16 pb16">
|
||||
<div class="col-lg-6 pt32 pb16">
|
||||
<div class="row s_col_no_resize s_col_no_bgcolor">
|
||||
<div class="col-lg-4">
|
||||
<img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-fluid rounded-circle d-block mx-auto shadow"/>
|
||||
|
||||
@@ -4,13 +4,9 @@
|
||||
<template id="s_comparisons" name="Comparisons">
|
||||
<section class="s_comparisons pt48 pb24">
|
||||
<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_thin"><font style="font-size: 62px;">Our offers</font></h1>
|
||||
</div>
|
||||
</div>
|
||||
<h1 style="text-align: center;"><font style="font-size: 62px;">Our offers</font></h1>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 s_col_no_bgcolor text-center pt16 pb16" data-name="Box">
|
||||
<div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box">
|
||||
<div class="card bg-200">
|
||||
<h4 class="card-header">Beginner</h4>
|
||||
<div class="card-body text-center">
|
||||
@@ -33,7 +29,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 s_col_no_bgcolor text-center pt16 pb16" data-name="Box">
|
||||
<div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box">
|
||||
<div class="card bg-primary">
|
||||
<h4 class="card-header">Professional</h4>
|
||||
<div class="card-body">
|
||||
@@ -56,7 +52,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 s_col_no_bgcolor text-center pt16 pb16" data-name="Box">
|
||||
<div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box">
|
||||
<div class="card bg-secondary">
|
||||
<h4 class="card-header">Expert</h4>
|
||||
<div class="card-body text-center">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<odoo>
|
||||
|
||||
<!-- Snippet template -->
|
||||
<template id="s_facebook_page" name="Facebook Page">
|
||||
<template id="s_facebook_page" name="Facebook">
|
||||
<div class="o_facebook_page"/>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -2,40 +2,31 @@
|
||||
<odoo>
|
||||
|
||||
<template id="s_faq_collapse" name="Accordion">
|
||||
<section class="s_faq_collapse pt48 pb32">
|
||||
<section class="s_faq_collapse pt32 pb32">
|
||||
<div class="container">
|
||||
<div class="row s_nb_column_fixed">
|
||||
<div class="col-lg-12 s_title pt16 pb16">
|
||||
<h1 class="s_title_thin"><font style="font-size: 62px;">FAQ</font></h1>
|
||||
<div id="myCollapse" class="accordion" role="tablist">
|
||||
<div class="card bg-white" data-name="Item">
|
||||
<a href="#" role="tab" data-toggle="collapse" aria-expanded="true" class="card-header">Terms of service</a>
|
||||
<div class="collapse show" role="tabpanel">
|
||||
<div class="card-body">
|
||||
<p class="card-text">These terms of service ("Terms", "Agreement") are an agreement between the website ("Website operator", "us", "we" or "our") and you ("User", "you" or "your"). This Agreement sets forth the general terms and conditions of your use of this website and any of its products or services (collectively, "Website" or "Services").</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row s_col_no_bgcolor">
|
||||
<div class="col-lg-12 pt16 pb16">
|
||||
<div id="myCollapse" class="accordion" role="tablist">
|
||||
<div class="card bg-white">
|
||||
<a href="#" role="tab" data-toggle="collapse" aria-expanded="true" class="card-header">Terms of service</a>
|
||||
<div class="collapse show" role="tabpanel">
|
||||
<div class="card-body">
|
||||
<p class="card-text">These terms of service ("Terms", "Agreement") are an agreement between the website ("Website operator", "us", "we" or "our") and you ("User", "you" or "your"). This Agreement sets forth the general terms and conditions of your use of this website and any of its products or services (collectively, "Website" or "Services").</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-white" data-name="Item">
|
||||
<a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Links to other Websites</a>
|
||||
<div class="collapse" role="tabpanel">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Although this Website may be linked to other websites, we are not, directly or indirectly, implying any approval, association, sponsorship, endorsement, or affiliation with any linked website, unless specifically stated herein.</p>
|
||||
<p class="card-text">You should carefully review the legal statements and other conditions of use of any website which you access through a link from this Website. Your linking to any other off-site pages or other websites is at your own risk.</p>
|
||||
</div>
|
||||
<div class="card bg-white">
|
||||
<a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Links to other Websites</a>
|
||||
<div class="collapse" role="tabpanel">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Although this Website may be linked to other websites, we are not, directly or indirectly, implying any approval, association, sponsorship, endorsement, or affiliation with any linked website, unless specifically stated herein.</p>
|
||||
<p class="card-text">You should carefully review the legal statements and other conditions of use of any website which you access through a link from this Website. Your linking to any other off-site pages or other websites is at your own risk.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-white">
|
||||
<a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Use of Cookies</a>
|
||||
<div class="collapse" role="tabpanel">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Website may use cookies to personalize and facilitate maximum navigation of the User by this site. The User may configure his / her browser to notify and reject the installation of the cookies sent by us.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-white" data-name="Item">
|
||||
<a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Use of Cookies</a>
|
||||
<div class="collapse" role="tabpanel">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Website may use cookies to personalize and facilitate maximum navigation of the User by this site. The User may configure his / her browser to notify and reject the installation of the cookies sent by us.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 pt32 pb32 text-center">
|
||||
<i class="fa fa-3x fa-gear rounded-circle bg-gamma m-3"/>
|
||||
<i class="fa fa-3x fa-gear rounded bg-gamma m-3"/>
|
||||
<h3>First Feature</h3>
|
||||
<p>Tell what's the value for the <br/>customer for this feature.</p>
|
||||
</div>
|
||||
@@ -16,7 +16,7 @@
|
||||
<p>Write what the customer would like to know, <br/>not what you want to show.</p>
|
||||
</div>
|
||||
<div class="col-lg-4 pt32 pb32 text-center">
|
||||
<i class="fa fa-3x fa-leaf rounded-leaf bg-primary m-3"/>
|
||||
<i class="fa fa-3x fa-leaf rounded bg-primary m-3"/>
|
||||
<h3>Third Feature</h3>
|
||||
<p>A small explanation of this great <br/>feature, in clear words.</p>
|
||||
</div>
|
||||
|
||||
@@ -3,28 +3,27 @@
|
||||
|
||||
<template id="s_hr" name="Separator">
|
||||
<div class="s_hr text-left pt32 pb32">
|
||||
<hr class="s_hr_1px s_hr_solid border-600 w-100 mx-auto"/>
|
||||
<hr class="border-600 w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid;"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_hr_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-selector=".s_hr" data-target="hr">
|
||||
<we-colorpicker string="Color"
|
||||
data-select-style="true"
|
||||
data-css-property="border-color"
|
||||
data-color-prefix="border-"
|
||||
data-excluded="transparent_grayscale"/>
|
||||
<we-select string="Thickness">
|
||||
<t t-foreach="range(1,6)" t-as="s_hr_thickness">
|
||||
<we-button t-attf-data-select-class="s_hr_{{s_hr_thickness}}px"><t t-esc="s_hr_thickness"/>px</we-button>
|
||||
</t>
|
||||
</we-select>
|
||||
<we-select string="Style">
|
||||
<we-button data-select-class="s_hr_solid">Solid</we-button>
|
||||
<we-button data-select-class="s_hr_dashed">Dashed</we-button>
|
||||
<we-button data-select-class="s_hr_dotted">Dotted</we-button>
|
||||
<we-button data-select-class="s_hr_double">Double</we-button>
|
||||
<we-row string="Thickness" class="o_we_inline">
|
||||
<we-colorpicker
|
||||
data-select-style="true"
|
||||
data-css-property="border-color"
|
||||
data-color-prefix="border-"
|
||||
data-excluded="transparent_grayscale"/>
|
||||
<we-input data-unit="px" data-select-style="1px"
|
||||
data-css-property="border-top-width"/>
|
||||
</we-row>
|
||||
<we-select string="Style" data-css-property="border-top-style">
|
||||
<we-button data-select-style="solid">Solid</we-button>
|
||||
<we-button data-select-style="dashed">Dashed</we-button>
|
||||
<we-button data-select-style="dotted">Dotted</we-button>
|
||||
<we-button data-select-style="double">Double</we-button>
|
||||
</we-select>
|
||||
<we-select string="Width">
|
||||
<we-button data-select-class="w-25">25%</we-button>
|
||||
|
||||
@@ -12,9 +12,7 @@
|
||||
<h2>Section Subtitle</h2>
|
||||
<p>Write one or two paragraphs describing your product or services. <br/>To be successful your content needs to be useful to your readers.</p>
|
||||
<p>Start with the customer – find out what they want and give it to them.</p>
|
||||
<div class="s_btn text-left pt16 pb16">
|
||||
<a href="#" class="btn btn-outline-primary">Discover more</a>
|
||||
</div>
|
||||
<p><a href="#" class="btn btn-outline-primary">Discover more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<!-- Template -->
|
||||
<template id="s_masonry_block" name="Masonry">
|
||||
<section class="s_masonry_block" data-vcss="001">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 bg-600 oe_img_bg text-center pb216 pt224" data-name="Masonry block"
|
||||
style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<h2>A great title</h2>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row h-100">
|
||||
<div class="col-lg-6 text-center bg-alpha" data-name="Masonry block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 text-center bg-200" data-name="Masonry block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 text-center bg-200" data-name="Masonry block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 text-center bg-beta" data-name="Masonry block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- Options -->
|
||||
<template id="s_masonry_block_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//div[@data-js='background']" position="attributes">
|
||||
<attribute name="data-selector" separator="," add=".s_masonry_block .row > *"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@data-js='BackgroundPosition']" position="attributes">
|
||||
<attribute name="data-selector" separator="," add=".s_masonry_block .row > *"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Assets -->
|
||||
<template id="_assets_snippet_s_masonry_block_css_000_variables" inherit_id="website._assets_primary_variables">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_masonry_block/000_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="assets_snippet_s_masonry_block_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_masonry_block/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_masonry_block_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_masonry_block/001.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -0,0 +1,65 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Media List" id="s_media_list">
|
||||
<section class="s_media_list bg-200 pt24 pb24">
|
||||
<div class="container">
|
||||
<div class="row" data-name="Media item">
|
||||
<div class="col-lg-4">
|
||||
<img class="img img-fluid" src="/web/image/website.s_media_list_default_image_1" alt=""/>
|
||||
</div>
|
||||
<div class="col-lg-8 s_media_list_body">
|
||||
<h3>Media heading</h3>
|
||||
<p>Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fit your needs.</p>
|
||||
<p><a href="#" class="btn btn-primary">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" data-name="Media item">
|
||||
<div class="col-lg-4">
|
||||
<img class="img img-fluid" src="/web/image/website.s_media_list_default_image_2" alt=""/>
|
||||
</div>
|
||||
<div class="col-lg-8 s_media_list_body">
|
||||
<h3>Event Heading</h3>
|
||||
<p>Speakers from all over the world will join our experts to give inspiring talks on various topics.</p>
|
||||
<p><a href="#" class="btn btn-primary">Register</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" data-name="Media item">
|
||||
<div class="col-lg-4">
|
||||
<img class="img img-fluid" src="/web/image/website.s_media_list_default_image_3" alt=""/>
|
||||
</div>
|
||||
<div class="col-lg-8 s_media_list_body">
|
||||
<h3>Post heading</h3>
|
||||
<span class="s_badge badge bg-gamma" data-name="Badge">
|
||||
<i class="fa fa-1x fa-fw fa-clock-o"/>3 months ago
|
||||
</span>
|
||||
<span class="s_badge badge bg-gamma" data-name="Badge">
|
||||
<i class="fa fa-1x fa-fw fa-user"/>by John DOE
|
||||
</span>
|
||||
<p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
|
||||
<p><a href="#">Continue reading <i class="fa fa-long-arrow-right align-middle ml-1"/></a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="s_media_list_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//div[@data-js='layout_column']" position="attributes">
|
||||
<attribute name="data-exclude" add=".s_media_list" separator=","/>
|
||||
</xpath>
|
||||
<xpath expr="." position="inside">
|
||||
<div data-selector=".s_media_list > * > .row" data-drop-near=".s_media_list > * > .row"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@data-js='SnippetMove'][contains(@data-selector,'section')]" position="attributes">
|
||||
<attribute name="data-selector" add=".s_media_list > * > .row" separator=","/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_media_list_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_media_list/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Numbers" id="s_numbers">
|
||||
<section class="s_numbers bg-200 pt24 pb24">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 text-center pt24 pb24">
|
||||
<span class="s_number display-4 text-alpha">12</span>
|
||||
<h6>Useful options</h6>
|
||||
</div>
|
||||
<div class="col-lg-3 text-center pt24 pb24">
|
||||
<span class="s_number display-4 text-alpha">45</span>
|
||||
<h6>Beautiful snippets</h6>
|
||||
</div>
|
||||
<div class="col-lg-3 text-center pt24 pb24">
|
||||
<span class="s_number display-4 text-gamma">8</span>
|
||||
<h6>Amazing pages</h6>
|
||||
</div>
|
||||
<div class="col-lg-3 text-center pt24 pb24">
|
||||
<span class="s_number display-4 text-gamma">37</span>
|
||||
<h6>Outstanding images</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- No associated CSS but there is some in theme overrides -->
|
||||
<template id="assets_snippet_s_numbers_css_000" inherit_id="website.assets_frontend">
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -2,19 +2,9 @@
|
||||
<odoo>
|
||||
|
||||
<template id="s_parallax" name="Parallax">
|
||||
<section class="s_parallax parallax s_parallax_is_fixed bg-black-50 pt160 pb160" data-scroll-background-ratio="1">
|
||||
<section class="s_parallax parallax s_parallax_is_fixed bg-black-50 pt8 pb8" data-scroll-background-ratio="1">
|
||||
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
|
||||
<div class="oe_structure">
|
||||
<section>
|
||||
<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_boxed"><font style="font-size: 62px;">Your Site Title</font></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="oe_structure oe_empty"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -4,17 +4,13 @@
|
||||
<template id="s_picture" name="Picture">
|
||||
<section class="s_picture bg-200 pt48 pb24">
|
||||
<div class="container">
|
||||
<h2 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>
|
||||
|
||||
@@ -13,16 +13,12 @@
|
||||
<div class="row s_nb_column_fixed">
|
||||
<div class="offset-lg-1 col-lg-7 bg-white jumbotron rounded pt32 pb32">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 s_title s_col_no_bgcolor">
|
||||
<h1 class="s_title_thin">
|
||||
<div class="col-lg-12 s_col_no_bgcolor">
|
||||
<h1>
|
||||
<font style="font-size: 62px;">Win 20$</font>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="col-lg-12 pt8 pb32 s_col_no_bgcolor">
|
||||
<p class="lead">Order now, and get 20$ discount on your first order with the coupon:<br/></p>
|
||||
</div>
|
||||
<div class="col-lg-12 s_btn text-left pt16 pb16">
|
||||
<button class="btn btn-epsilon rounded-circle">NEWCUSTOMER</button>
|
||||
<p><button class="btn btn-epsilon rounded-circle">NEWCUSTOMER</button></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Steps" id="s_process_steps">
|
||||
<section class="s_process_steps pt24 pb24">
|
||||
<div class="container">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-lg-3 s_process_step pt24 pb24">
|
||||
<div class="s_process_step_icon">
|
||||
<span>
|
||||
<i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-alpha"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="s_process_step_content text-center">
|
||||
<h2>Add to cart</h2>
|
||||
<p>Let your customers follow <br/>and understand your process.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 s_process_step pt24 pb24">
|
||||
<div class="s_process_step_icon">
|
||||
<span>
|
||||
<i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-beta"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="s_process_step_content text-center">
|
||||
<h2>Sign in</h2>
|
||||
<p>Click on the icon to adapt it <br/>to your purpose.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 s_process_step pt24 pb24">
|
||||
<div class="s_process_step_icon">
|
||||
<span>
|
||||
<i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-gamma"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="s_process_step_content text-center">
|
||||
<h2>Pay</h2>
|
||||
<p>Duplicate blocks <br/>to add more steps.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 s_process_step pt24 pb24">
|
||||
<div class="s_process_step_icon">
|
||||
<span>
|
||||
<i class="fa fa-plane fa-2x mx-auto rounded-circle bg-delta"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="s_process_step_content text-center">
|
||||
<h2>Get Delivered</h2>
|
||||
<p>Select and delete blocks <br/>to remove some steps.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_process_steps_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_process_steps/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -0,0 +1,72 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Products List" id="s_product_list">
|
||||
<section class="s_product_list" >
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-2 col-md-4 col-6">
|
||||
<a href="http://www.odoo.com">
|
||||
<img src="/web/image/website.s_product_list_default_image_1" alt="#" class="img img-fluid"/>
|
||||
</a>
|
||||
<div class="s_product_list_item_link">
|
||||
<a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6">
|
||||
<a href="http://www.odoo.com">
|
||||
<img src="/web/image/website.s_product_list_default_image_2" alt="#" class="img img-fluid"/>
|
||||
</a>
|
||||
<div class="s_product_list_item_link">
|
||||
<a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6">
|
||||
<a href="http://www.odoo.com">
|
||||
<img src="/web/image/website.s_product_list_default_image_3" alt="#" class="img img-fluid"/>
|
||||
</a>
|
||||
<div class="s_product_list_item_link">
|
||||
<a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6">
|
||||
<a href="http://www.odoo.com">
|
||||
<img src="/web/image/website.s_product_list_default_image_4" alt="#" class="img img-fluid"/>
|
||||
</a>
|
||||
<div class="s_product_list_item_link">
|
||||
<a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6">
|
||||
<a href="http://www.odoo.com">
|
||||
<img src="/web/image/website.s_product_list_default_image_5" alt="#" class="img img-fluid"/>
|
||||
</a>
|
||||
<div class="s_product_list_item_link">
|
||||
<a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6">
|
||||
<a href="http://www.odoo.com">
|
||||
<img src="/web/image/website.s_product_list_default_image_6" alt="#" class="img img-fluid"/>
|
||||
</a>
|
||||
<div class="s_product_list_item_link">
|
||||
<a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="_assets_snippet_s_product_list_css_000_variables" inherit_id="website._assets_primary_variables">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_product_list/000_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="assets_snippet_s_product_list_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_product_list/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Progress Bar" id="s_progress_bar">
|
||||
<div class="s_progress_bar" data-display="inline">
|
||||
<h4>We are almost done!</h4>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
|
||||
<span class="s_progress_bar_text">80% Development</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_progress_bar_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-js="progress" data-selector=".s_progress_bar" >
|
||||
<we-select string="Display">
|
||||
<we-button data-display="inline">Inline</we-button>
|
||||
<we-button data-display="below">Below Each Other</we-button>
|
||||
</we-select>
|
||||
<we-colorpicker string="Colors" data-apply-to=".progress-bar"
|
||||
data-select-style="true"
|
||||
data-css-property="background-color"
|
||||
data-color-prefix="bg-"/>
|
||||
<we-checkbox string="Striped" data-select-class="progress-bar-striped" data-apply-to=".progress-bar"/>
|
||||
<we-checkbox string="Animated" data-select-class="progress-bar-animated" data-apply-to=".progress-bar"/>
|
||||
</div>
|
||||
</xpath>
|
||||
<xpath expr="//div[@id='so_content_addition']" position="attributes">
|
||||
<attribute name="data-selector" add=".s_progress_bar" separator=","/>
|
||||
<attribute name="data-drop-near" add=".s_progress_bar" separator=","/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- No related CSS but there is some in theme overrides -->
|
||||
<template id="assets_snippet_s_progress_bar_css_000" inherit_id="website.assets_frontend">
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -2,7 +2,7 @@
|
||||
<odoo>
|
||||
|
||||
<template id="s_share" name="Share">
|
||||
<div t-attf-class="s_share #{_classes}">
|
||||
<div t-attf-class="s_share text-left #{_classes}">
|
||||
<h4 t-if="not _no_title" class="s_share_title">Share</h4>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={url}" t-attf-class="s_share_facebook #{_link_classes}" target="_blank">
|
||||
<i t-attf-class="fa fa-1x fa-facebook #{not _link_classes and 'rounded shadow-sm'}"/>
|
||||
@@ -13,12 +13,38 @@
|
||||
<a href="http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}&" t-attf-class="s_share_linkedin #{_link_classes}" target="_blank">
|
||||
<i t-attf-class="fa fa-1x fa-linkedin #{not _link_classes and 'rounded shadow-sm'}"/>
|
||||
</a>
|
||||
<a href="whatsapp://send?text={title}&url={url}" t-attf-class="s_share_whatsapp #{_link_classes}" target="_blank">
|
||||
<i t-attf-class="fa fa-1x fa-whatsapp #{not _link_classes and 'rounded shadow-sm'}"/>
|
||||
</a>
|
||||
<a href="http://pinterest.com/pin/create/button/?url={url}&description={title}" t-attf-class="s_share_pinterest #{_link_classes}" target="_blank">
|
||||
<i t-attf-class="fa fa-1x fa-pinterest #{not _link_classes and 'rounded shadow-sm'}"/>
|
||||
</a>
|
||||
<a href="mailto:?body={url}&subject={title}" t-attf-class="s_share_email #{_link_classes}">
|
||||
<i t-attf-class="fa fa-1x fa-envelope #{not _link_classes and 'rounded shadow-sm'}"/>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_share_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-selector=".s_share">
|
||||
<we-select string="Title Position" data-apply-to=".s_share_title">
|
||||
<we-button data-select-class="d-block">Top</we-button>
|
||||
<we-button data-select-class="">Left</we-button>
|
||||
<we-button data-select-class="d-none">None</we-button>
|
||||
</we-select>
|
||||
<we-select string="Icon Layout" data-apply-to=".fa">
|
||||
<we-button data-select-class="rounded shadow-sm">Square</we-button>
|
||||
<we-button data-select-class="rounded-empty-circle shadow-sm">Circle</we-button>
|
||||
<we-button data-select-class="rounded-circle shadow-sm">Disk</we-button>
|
||||
<we-button data-select-class="m-3">None</we-button>
|
||||
</we-select>
|
||||
<!-- Compatibility, keep reverse logical, don't use `icon_color` -->
|
||||
<we-checkbox string="Icon Layout Color" data-select-class="no_icon_color|"/>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_share_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_share/000.scss"/>
|
||||
|
||||
@@ -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>
|
||||
@@ -2,68 +2,58 @@
|
||||
<odoo>
|
||||
|
||||
<template id="s_tabs" name="Tabs">
|
||||
<section class="s_tabs">
|
||||
<section class="s_tabs pt48 pb48" data-vcss="001">
|
||||
<div class="container">
|
||||
<div class="row s_col_no_bgcolor">
|
||||
<div class="col-lg-8 offset-lg-2 pt48 pb48">
|
||||
<div class="card bg-white">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active"
|
||||
id="nav_tabs_link_1"
|
||||
data-toggle="tab"
|
||||
href="#nav_tabs_content_1"
|
||||
role="tab"
|
||||
aria-controls="nav_tabs_content_1"
|
||||
aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
id="nav_tabs_link_2"
|
||||
data-toggle="tab"
|
||||
href="#nav_tabs_content_2"
|
||||
role="tab"
|
||||
aria-controls="nav_tabs_content_2"
|
||||
aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
id="nav_tabs_link_3"
|
||||
data-toggle="tab"
|
||||
href="#nav_tabs_content_3"
|
||||
role="tab"
|
||||
aria-controls="nav_tabs_content_3"
|
||||
aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body tab-content">
|
||||
<div class="tab-pane fade show active"
|
||||
id="nav_tabs_content_1"
|
||||
role="tabpanel"
|
||||
aria-labelledby="nav_tabs_link_1">
|
||||
<h3>Details</h3>
|
||||
<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>
|
||||
</div>
|
||||
<div class="tab-pane fade"
|
||||
id="nav_tabs_content_2"
|
||||
role="tabpanel"
|
||||
aria-labelledby="nav_tabs_link_2">
|
||||
<h3>Shipping</h3>
|
||||
<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 class="tab-pane fade"
|
||||
id="nav_tabs_content_3"
|
||||
role="tabpanel"
|
||||
aria-labelledby="nav_tabs_link_3">
|
||||
<h3>Review</h3>
|
||||
<blockquote>
|
||||
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
|
||||
<footer>— Jane DOE, CEO of <b>MyCompany</b></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="s_tabs_main">
|
||||
<div class="s_tabs_nav mb-3">
|
||||
<ul class="nav nav-pills justify-content-center" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active"
|
||||
id="nav_tabs_link_1"
|
||||
data-toggle="tab"
|
||||
href="#nav_tabs_content_1"
|
||||
role="tab"
|
||||
aria-controls="nav_tabs_content_1"
|
||||
aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
id="nav_tabs_link_2"
|
||||
data-toggle="tab"
|
||||
href="#nav_tabs_content_2"
|
||||
role="tab"
|
||||
aria-controls="nav_tabs_content_2"
|
||||
aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
id="nav_tabs_link_3"
|
||||
data-toggle="tab"
|
||||
href="#nav_tabs_content_3"
|
||||
role="tab"
|
||||
aria-controls="nav_tabs_content_3"
|
||||
aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="s_tabs_content tab-content">
|
||||
<div class="tab-pane fade show active"
|
||||
id="nav_tabs_content_1"
|
||||
role="tabpanel"
|
||||
aria-labelledby="nav_tabs_link_1">
|
||||
<div class="oe_structure oe_empty"/>
|
||||
</div>
|
||||
<div class="tab-pane fade"
|
||||
id="nav_tabs_content_2"
|
||||
role="tabpanel"
|
||||
aria-labelledby="nav_tabs_link_2">
|
||||
<div class="oe_structure oe_empty"/>
|
||||
</div>
|
||||
<div class="tab-pane fade"
|
||||
id="nav_tabs_content_3"
|
||||
role="tabpanel"
|
||||
aria-labelledby="nav_tabs_link_3">
|
||||
<div class="oe_structure oe_empty"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,4 +61,62 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="s_tabs_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-js="NavTabs" data-selector="section.s_tabs">
|
||||
<we-button data-add-tab=""
|
||||
data-no-preview="true"
|
||||
class="fa fa-fw fa-plus"
|
||||
title="Add Tab"
|
||||
aria-label="Add Tab"/>
|
||||
<we-button data-remove-tab=""
|
||||
data-name="remove_tab_opt"
|
||||
data-no-preview="true"
|
||||
class="fa fa-fw fa-minus"
|
||||
title="Remove Tab"
|
||||
aria-label="Remove Tab"/>
|
||||
</div>
|
||||
<div data-js="NavTabsStyle" data-selector="section" data-target=".s_tabs_main">
|
||||
<we-select string="Style">
|
||||
<we-button data-set-style="tabs" data-name="tabs_opt" data-trigger="horizontal_opt">Tabs</we-button>
|
||||
<we-button data-set-style="pills" data-name="pills_opt" data-trigger="tabs_color_opt" data-trigger-value="">Buttons</we-button>
|
||||
</we-select>
|
||||
<we-colorpicker string="Tabs color"
|
||||
data-dependencies="tabs_opt"
|
||||
data-name="tabs_color_opt"
|
||||
data-select-style="true"
|
||||
data-css-property="background-color"
|
||||
data-color-prefix="bg-"/>
|
||||
<we-select string="Direction" data-dependencies="pills_opt">
|
||||
<we-button data-set-direction="horizontal" data-name="horizontal_opt">Horizontal</we-button>
|
||||
<we-button data-set-direction="vertical" data-trigger="left_alignment_opt">Vertical</we-button>
|
||||
</we-select>
|
||||
<we-select string="Alignment" data-apply-to=".s_tabs_nav:first .nav" data-dependencies="horizontal_opt">
|
||||
<we-button data-select-class="" data-name="left_alignment_opt">Left</we-button>
|
||||
<we-button data-select-class="justify-content-center">Center</we-button>
|
||||
<we-button data-select-class="justify-content-end">Right</we-button>
|
||||
</we-select>
|
||||
<we-select string="Fill and justify" data-apply-to=".s_tabs_nav:first .nav" data-dependencies="horizontal_opt">
|
||||
<we-button data-select-class="">Regular</we-button>
|
||||
<we-button data-select-class="nav-fill">Fill</we-button>
|
||||
<we-button data-select-class="nav-justified">Justified</we-button>
|
||||
</we-select>
|
||||
<we-divider/>
|
||||
<we-select string="Transition" data-apply-to=".s_tabs_content:first">
|
||||
<we-button data-select-class="">No Slide Effect</we-button>
|
||||
<we-button data-select-class="s_tabs_slide_up">Slide Up</we-button>
|
||||
<we-button data-select-class="s_tabs_slide_down">Slide Down</we-button>
|
||||
<we-button data-select-class="s_tabs_slide_left">Slide Left</we-button>
|
||||
<we-button data-select-class="s_tabs_slide_right">Slide Right</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_tabs_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_tabs/001.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template id="s_text_block" name="Text block">
|
||||
<template id="s_text_block" name="Text">
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Text Highlight" id="s_text_highlight">
|
||||
<div class="s_text_highlight bg-gamma o_animation mt32 mb32 text-center w-100">
|
||||
<div class="container">
|
||||
<h3>Text Highlight</h3>
|
||||
<h4>Change the color of this box</h4>
|
||||
<p>Put the focus on what you have to say!</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_text_highlight_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//div[@id='so_main_colorpicker']" position="attributes">
|
||||
<attribute name="data-selector" add=".s_text_highlight"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@id='so_width']" position="attributes">
|
||||
<attribute name="data-selector" add=".s_text_highlight"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@id='so_text_align']" position="attributes">
|
||||
<attribute name="data-selector" add=".s_text_highlight"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@data-js='background']" position="before">
|
||||
<div data-selector=".s_text_highlight">
|
||||
<we-select string="Position">
|
||||
<we-button data-select-class="">Left</we-button>
|
||||
<we-button data-select-class="mx-auto">Center</we-button>
|
||||
<we-button data-select-class="ml-auto">Right</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_text_highlight_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_text_highlight/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -9,9 +9,7 @@
|
||||
<h2>A Section Subtitle</h2>
|
||||
<p>Write one or two paragraphs describing your product or services. <br/>To be successful your content needs to be useful to your readers.</p>
|
||||
<p>Start with the customer – find out what they want and give it to them.</p>
|
||||
<div class="s_btn text-left pt16 pb16" data-name="Buttons">
|
||||
<a href="#" class="btn btn-primary">Learn more</a>
|
||||
</div>
|
||||
<p><a href="#" class="btn btn-primary">Learn more</a></p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt16 pb16">
|
||||
<img src="/web/image/website.s_text_image_default_image" class="img img-fluid mx-auto" alt="Odoo • Text and Image"/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Timeline" id="s_timeline">
|
||||
<section class="s_timeline pt24 pb48">
|
||||
<div class="container s_timeline_line">
|
||||
<div class="s_timeline_row d-flex flex-row">
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Your title</h5>
|
||||
<p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fa fa-1x fa-child bg-beta rounded-circle s_timeline_icon"/>
|
||||
</div>
|
||||
<div class="s_timeline_date"><span class="bg-white"><b>2019</b></span></div>
|
||||
<div class="s_timeline_content"/>
|
||||
</div>
|
||||
<div class="s_timeline_row d-flex flex-row">
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text">You can edit, duplicate...</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fa fa-1x fa-graduation-cap bg-gamma rounded-circle s_timeline_icon"/>
|
||||
</div>
|
||||
<div class="s_timeline_date"><span class="bg-white"><b>2018</b></span></div>
|
||||
<div class="s_timeline_content d-flex">
|
||||
<i class="fa fa-1x fa-asterisk bg-alpha rounded-circle s_timeline_icon"/>
|
||||
<div class="s_card card bg-white w-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text">...and switch the timeline contents to fit your needs.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="s_timeline_row d-flex flex-row-reverse">
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fa fa-1x fa-bolt bg-gamma rounded s_timeline_icon"/>
|
||||
</div>
|
||||
<div class="s_timeline_date"><span class="bg-white"><b>2015</b></span></div>
|
||||
<div class="s_timeline_content"/>
|
||||
</div>
|
||||
<div class="s_timeline_row d-flex flex-row">
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Edit this text and change it with your content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="s_timeline_date"><i class="fa fa-1x fa-edit img-thumbnail text-primary"/></div>
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text" style="text-align: right;">Double-click an icon to change it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="options_s_timeline" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row">
|
||||
<we-select string="Position">
|
||||
<we-button data-select-class="flex-row">Left</we-button>
|
||||
<we-button data-select-class="flex-row-reverse">Right</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_timeline_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_timeline/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -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"/>
|
||||
|
||||
@@ -26,10 +26,17 @@
|
||||
<t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_text.png"/>
|
||||
<t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/snippets_thumbs/s_title.png"/>
|
||||
<t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png"/>
|
||||
<t t-snippet="website.s_numbers" t-thumbnail="/website/static/src/img/snippets_thumbs/s_numbers.png"/>
|
||||
<t t-snippet="website.s_picture" t-thumbnail="/website/static/src/img/snippets_thumbs/s_picture.png"/>
|
||||
<t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.png"/>
|
||||
<t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features.png"/>
|
||||
<t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/snippets_thumbs/s_three_columns.png"/>
|
||||
<t t-snippet="website.s_color_blocks_2" t-thumbnail="/website/static/src/img/snippets_thumbs/s_color_blocks_2.png"/>
|
||||
<t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features.png"/>
|
||||
<t t-snippet="website.s_masonry_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_masonry_block.png"/>
|
||||
<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"/>
|
||||
<t t-snippet="website.s_showcase" t-thumbnail="/website/static/src/img/snippets_thumbs/s_showcase.png"/>
|
||||
<t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/snippets_thumbs/s_parallax.png"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,27 +45,40 @@
|
||||
<i class="fa fa-diamond"/> Features
|
||||
</div>
|
||||
<div class="o_panel_body">
|
||||
<t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.png"/>
|
||||
<t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/snippets_thumbs/s_comparison.png"/>
|
||||
<t t-snippet="website.s_company_team" t-thumbnail="/website/static/src/img/snippets_thumbs/s_company_team.png"/>
|
||||
<t t-snippet="website.s_call_to_action" t-thumbnail="/website/static/src/img/snippets_thumbs/s_call_to_action.png"/>
|
||||
<t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/snippets_thumbs/s_references.png"/>
|
||||
<t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/snippets_thumbs/s_faq.png"/>
|
||||
<t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/snippets_thumbs/s_faq_collapse.png"/>
|
||||
<t t-snippet="website.s_features_grid" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features_grid.png"/>
|
||||
<t t-snippet="website.s_popup" t-thumbnail="/website/static/src/img/snippets_thumbs/s_popup.png"/>
|
||||
<t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.png"/>
|
||||
<t t-snippet="website.s_countdown" t-thumbnail="/website/static/src/img/snippets_thumbs/s_countdown.png"/>
|
||||
<t t-snippet="website.s_product_catalog" t-thumbnail="/website/static/src/img/snippets_thumbs/s_product_catalog.png"/>
|
||||
<t t-snippet="website.s_product_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_product_list.png"/>
|
||||
<t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.png"/>
|
||||
<t t-snippet="website.s_timeline" t-thumbnail="/website/static/src/img/snippets_thumbs/s_timeline.png"/>
|
||||
<t t-snippet="website.s_process_steps" t-thumbnail="/website/static/src/img/snippets_thumbs/s_process_steps.png"/>
|
||||
<t t-snippet="website.s_quotes_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_quotes_carousel.png"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="snippet_effect" class="o_panel">
|
||||
<div class="o_panel_header">
|
||||
<i class="fa fa-magic icon-fix"/> Effects
|
||||
<i class="fa fa-magic icon-fix"/> Dynamic Content
|
||||
</div>
|
||||
<div class="o_panel_body">
|
||||
<t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/snippets_thumbs/s_parallax.png"/>
|
||||
<t t-snippet="website.s_quotes_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_quotes_carousel.png"/>
|
||||
<t id="form_form_hook"/>
|
||||
<t id="sale_recently_viewed_product_hook"/>
|
||||
<t id="sale_product_search_section_hook"/>
|
||||
<t id="blog_latest_posts_list_hook"/>
|
||||
<t id="blog_latest_posts_big_hook"/>
|
||||
<t id="event_local_events_hook"/>
|
||||
<t id="snippet_google_map_hook"/>
|
||||
<t id="mass_mailing_newsletter_block_hook"/>
|
||||
<t id="mass_mailing_newsletter_popup_hook"/>
|
||||
<t t-snippet="website.s_popup" t-thumbnail="/website/static/src/img/snippets_thumbs/s_popup.png"/>
|
||||
<t t-snippet="website.s_facebook_page" t-thumbnail="/website/static/src/img/snippets_thumbs/s_facebook_page.png"/>
|
||||
<t t-snippet="website.s_countdown" t-thumbnail="/website/static/src/img/snippets_thumbs/s_countdown.png"/>
|
||||
<t id="mail_channel_discussion_group_hook"/>
|
||||
<t id="twitter_favorite_tweets_hook"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -67,14 +87,19 @@
|
||||
<i class="fa fa-indent"/> Inner content
|
||||
</div>
|
||||
<div class="o_panel_body">
|
||||
<t t-snippet="website.s_btn" t-thumbnail="/website/static/src/img/snippets_thumbs/s_button.png"/>
|
||||
<t t-snippet="website.s_hr" t-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png"/>
|
||||
<t t-snippet="website.s_hr" t-thumbnail="/website/static/src/img/snippets_thumbs/s_hr.png"/>
|
||||
<t t-snippet="website.s_alert" t-thumbnail="/website/static/src/img/snippets_thumbs/s_alert.png"/>
|
||||
<t t-snippet="website.s_rating" t-thumbnail="/website/static/src/img/snippets_thumbs/s_rating.png"/>
|
||||
<t t-snippet="website.s_card" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
|
||||
<t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/snippets_thumbs/s_share.png"/>
|
||||
<t t-snippet="website.s_facebook_page" t-thumbnail="/website/static/src/img/snippets_thumbs/s_facebook_page.png"/>
|
||||
<t t-snippet="website.s_rating" t-thumbnail="/website/static/src/img/snippets_thumbs/s_rating.png"/>
|
||||
<t id="sale_product_search_input_hook"/>
|
||||
<t id="mass_mailing_newsletter_hook"/>
|
||||
<t t-snippet="website.s_text_highlight" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_highlight.png"/>
|
||||
<t t-snippet="website.s_chart" t-thumbnail="/website/static/src/img/snippets_thumbs/s_chart.png"/>
|
||||
<t t-snippet="website.s_progress_bar" t-thumbnail="/website/static/src/img/snippets_thumbs/s_progress_bar.png"/>
|
||||
<t t-snippet="website.s_badge" t-thumbnail="/website/static/src/img/snippets_thumbs/s_badge.png"/>
|
||||
<t t-snippet="website.s_blockquote" t-thumbnail="/website/static/src/img/snippets_thumbs/s_blockquote.png"/>
|
||||
<t id="event_speaker_bio_hook"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
@@ -86,32 +111,43 @@
|
||||
</template>
|
||||
|
||||
<template id="external_snippets" inherit_id="website.snippets" priority="8">
|
||||
<xpath expr="//div[@id='snippet_feature']//t[@t-snippet][last()]" position="after">
|
||||
<xpath expr="//div[@id='snippet_effect']//t[@t-snippet][last()]" position="after">
|
||||
<t t-install="website_form" string="Form Builder" t-thumbnail="/website/static/src/img/snippets_thumbs/s_website_form.png"/>
|
||||
<t id="newsletter_popup_snippet" t-install="mass_mailing" string="Newsletter Popup" t-thumbnail="/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.png"/>
|
||||
<t id="newsletter_block_snippet" t-install="mass_mailing" string="Newsletter Block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_block.png"/>
|
||||
<t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_channel.png"/>
|
||||
<t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/snippets_thumbs/s_twitter_scroll.png"/>
|
||||
<t t-install="website_form" string="Form Builder" t-thumbnail="/website/static/src/img/s_website_form.png"/>
|
||||
<t id="s_products_searchbar" t-install="website_sale" string="Products Search" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_searchbar.png"/>
|
||||
<t id="s_products_recently_viewed" t-install="website_sale" string="Products Recently Viewed" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_recently_viewed.png"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
|
||||
<t t-install="website_event" string="Local Events" t-thumbnail="/website/static/src/img/snippets_thumbs/s_local_events.png"/>
|
||||
<t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png"/>
|
||||
<t id="newsletter_snippet" t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.png"/>
|
||||
<t id="s_products_searchbar_input" t-install="website_sale" string="Products Search Input" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_searchbar.png"/>
|
||||
</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 -->
|
||||
<div data-selector=".s_three_columns .row > div, .s_comparisons .row > div, .s_tabs .row > div"
|
||||
<!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
|
||||
<div data-selector=".s_three_columns .row > div, .s_comparisons .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 -->
|
||||
@@ -122,8 +158,8 @@
|
||||
data-color-prefix="bg-"/>
|
||||
</div>
|
||||
|
||||
<!-- H-ALIGN | .s_btn -->
|
||||
<div data-selector=".s_btn, .s_share">
|
||||
<!-- H-ALIGN -->
|
||||
<div id="so_text_align" data-selector=".s_share">
|
||||
<we-select string="Alignment">
|
||||
<we-button data-select-class="text-left">Left</we-button>
|
||||
<we-button data-select-class="text-center">Center</we-button>
|
||||
@@ -131,7 +167,7 @@
|
||||
</we-select>
|
||||
</div>
|
||||
|
||||
<div data-selector=".s_alert, .s_card">
|
||||
<div id="so_width" data-selector=".s_alert, .s_card">
|
||||
<we-select string="Width">
|
||||
<we-button data-select-class="w-25">25%</we-button>
|
||||
<we-button data-select-class="w-50">50%</we-button>
|
||||
@@ -170,11 +206,6 @@
|
||||
<we-button data-remove-slide="true" data-no-preview="true" class="fa fa-fw fa-minus"/>
|
||||
</div>
|
||||
|
||||
<div data-js="navTabs" data-selector="section .row > div" data-target=".nav-tabs">
|
||||
<we-button data-add-tab="1" data-no-preview="true">Add Tab</we-button>
|
||||
<we-button data-remove-tab="1" data-name="remove_tab_opt" data-no-preview="true">Remove Tab</we-button>
|
||||
</div>
|
||||
|
||||
<!-- Accordion -->
|
||||
<div data-js="collapse"
|
||||
data-selector='.accordion > .card'
|
||||
@@ -195,12 +226,12 @@
|
||||
|
||||
<!-- Move snippets around -->
|
||||
<div data-js="SnippetMove"
|
||||
data-selector="section">
|
||||
data-selector="section, .accordion > .card">
|
||||
<we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true"/>
|
||||
<we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true"/>
|
||||
</div>
|
||||
<div data-js="SnippetMove"
|
||||
data-selector=".row:not(.s_col_no_resize) > div">
|
||||
data-selector=".row:not(.s_col_no_resize) > div, .nav-item">
|
||||
<we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true"/>
|
||||
<we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true"/>
|
||||
</div>
|
||||
@@ -232,7 +263,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 +286,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,38 +305,20 @@
|
||||
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>
|
||||
|
||||
<div data-js="sizing_y"
|
||||
data-selector="section, .row > div, .parallax, .s_hr, .s_btn, .carousel-item, .s_rating"
|
||||
data-exclude="section:has(> .carousel), .o_gallery .carousel-item"/>
|
||||
data-selector="section, .row > div, .parallax, .s_hr, .carousel-item, .s_rating"
|
||||
data-exclude="section:has(> .carousel), .o_gallery .carousel-item, .s_col_no_resize.row > div"/>
|
||||
|
||||
<div data-js="sizing_x"
|
||||
data-selector=".row > div"
|
||||
data-drop-near=".row > div"
|
||||
data-drop-near=".row:not(.s_col_no_resize) > div"
|
||||
data-exclude=".s_col_no_resize.row > div"/>
|
||||
|
||||
<t t-set="so_snippet_addition_selector" t-translation="off">section, .parallax, .s_popup</t>
|
||||
@@ -313,10 +326,10 @@
|
||||
t-att-data-selector="so_snippet_addition_selector"
|
||||
data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"/>
|
||||
|
||||
<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>
|
||||
<t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge</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"
|
||||
@@ -360,7 +373,7 @@
|
||||
<!-- Anchor Name -->
|
||||
<div data-js="anchor"
|
||||
data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"
|
||||
data-exclude=".modal *">
|
||||
data-exclude=".modal *, .oe_structure .oe_structure *, [data-oe-type=html] .oe_structure *">
|
||||
<we-button class="fa fa-fw fa-link"
|
||||
title="Create a link to target this section"
|
||||
data-no-preview="true"/>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
<template id="website_blog" inherit_id="website.snippets" name="Snippet Blog">
|
||||
<xpath expr="//div[@id='snippet_feature']/div[hasclass('o_panel_body')]/t" position="before">
|
||||
<xpath expr="//t[@id='blog_latest_posts_list_hook']" position="replace">
|
||||
<t t-snippet="website_blog.s_latest_posts" t-thumbnail="/website_blog/static/src/img/s_latest_posts.jpg"/>
|
||||
</xpath>
|
||||
<xpath expr="//t[@id='blog_latest_posts_big_hook']" position="replace">
|
||||
<t t-snippet="website_blog.s_latest_posts_big_picture" t-thumbnail="/website_blog/static/src/img/s_latest_posts_big_picture.jpg"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
Before Width: | Height: | Size: 852 B After Width: | Height: | Size: 852 B |
|
Before Width: | Height: | Size: 841 B After Width: | Height: | Size: 841 B |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@@ -46,15 +46,13 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Replace snippet demo with actual snippet and options -->
|
||||
<template id="remove_external_snippets" inherit_id="website.external_snippets">
|
||||
<xpath expr="//t[@t-install='website_event']" position="replace"/>
|
||||
</template>
|
||||
|
||||
<!-- Snippets and options -->
|
||||
<template id="snippets" inherit_id="website.snippets">
|
||||
<xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
|
||||
<t t-snippet="website_event.s_country_events" t-thumbnail="/website_event/static/src/img/world_map.jpg"/>
|
||||
<t t-snippet="website_event.s_speaker_bio" t-thumbnail="/website_event/static/src/img/s_country_events.png"/>
|
||||
<xpath expr="//t[@id='event_local_events_hook']" position="replace">
|
||||
<t t-snippet="website_event.s_country_events" t-thumbnail="/website_event/static/src/img/snippets_thumbs/s_country_events.png"/>
|
||||
</xpath>
|
||||
<xpath expr="//t[@id='event_speaker_bio_hook']" position="replace">
|
||||
<t t-snippet="website_event.s_speaker_bio" t-thumbnail="/website_event/static/src/img/snippets_thumbs/s_speaker_bio.png"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -705,13 +705,9 @@
|
||||
<!-- Multipage event - Default template for the Introduction page -->
|
||||
<template id="template_intro">
|
||||
<t t-call="website_event.layout">
|
||||
<section>
|
||||
<section class="s_title pt48 pb48" data-vcss="001">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 s_title pt48 pb48" data-name="Title">
|
||||
<h1>Introduction</h1>
|
||||
</div>
|
||||
</div>
|
||||
<h1>Introduction</h1>
|
||||
</div>
|
||||
</section>
|
||||
<div class="oe_structure oe_empty" id="oe_structure_website_event_intro_1"/>
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
</template>
|
||||
|
||||
<template id="register_s_website_form" inherit_id="website.snippets" name="Snippet Form Builder">
|
||||
<xpath expr="//div[@id='snippet_feature']//t[@t-snippet][last()]" position="after">
|
||||
<t t-snippet="website_form.s_website_form" t-thumbnail="/website/static/src/img/s_website_form.png"/>
|
||||
<xpath expr="//t[@id='form_form_hook']" position="replace">
|
||||
<t t-snippet="website_form.s_website_form" t-thumbnail="/website/static/src/img/snippets_thumbs/s_website_form.png"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -54,8 +54,8 @@
|
||||
<span t-if="forum.image_1920" class="s_parallax_bg oe_img_bg" t-attf-style="background-image: url('#{website.image_url(forum, 'image_1920')}'); background-position: center;"/>
|
||||
<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 o_default_snippet_text text-center"><t t-esc="forum.name"></t></h1>
|
||||
<div class="col-lg-12">
|
||||
<h1 class="o_default_snippet_text text-center"><t t-esc="forum.name"></t></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div t-if="editable or (is_public_user and not forum_welcome_message)" t-att-class="'css_non_editable_mode_hidden' if editable else 'forum_intro'">
|
||||
@@ -470,10 +470,8 @@
|
||||
<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 o_default_snippet_text text-center">Our forums</h1>
|
||||
</div>
|
||||
<div class="col-lg-12 s_text" data-name="Text">
|
||||
<div class="col-lg-12">
|
||||
<h1 class="o_default_snippet_text text-center">Our forums</h1>
|
||||
<p class="lead o_default_snippet_text mb-0" style="text-align: center;">
|
||||
This community is for professional and enthusiast users, partners and programmers.
|
||||
</p>
|
||||
|
||||
@@ -10,7 +10,9 @@ Visitors can join public mail channels managed in the Discuss app in order to ge
|
||||
'depends': ['website_mail'],
|
||||
'data': [
|
||||
'data/mail_template_data.xml',
|
||||
'views/assets.xml',
|
||||
'views/snippets/s_channel.xml',
|
||||
'views/snippets/snippets.xml',
|
||||
'views/website_mail_channel_templates.xml',
|
||||
'views/snippets.xml',
|
||||
],
|
||||
}
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
odoo.define('website_mail_channel.editor', function (require) {
|
||||
'use strict';
|
||||
|
||||
var core = require('web.core');
|
||||
var options = require('web_editor.snippets.options');
|
||||
var wUtils = require('website.utils');
|
||||
|
||||
var _t = core._t;
|
||||
|
||||
options.registry.subscribe = options.Class.extend({
|
||||
select_mailing_list: function (previewMode, value) {
|
||||
var self = this;
|
||||
return wUtils.prompt({
|
||||
id: "editor_new_subscribe_button",
|
||||
window_title: _t("Add a Subscribe Button"),
|
||||
select: _t("Discussion List"),
|
||||
init: function (field) {
|
||||
return self._rpc({
|
||||
model: 'mail.channel',
|
||||
method: 'name_search',
|
||||
args: ['', [['public', '=', 'public']]],
|
||||
});
|
||||
},
|
||||
}).then(function (result) {
|
||||
self.$target.attr("data-id", result.val);
|
||||
});
|
||||
},
|
||||
onBuilt: function () {
|
||||
var self = this;
|
||||
this._super();
|
||||
this.select_mailing_list("click").guardedCatch(function () {
|
||||
self.getParent().removeSnippet();
|
||||
});
|
||||
},
|
||||
cleanForSave: function () {
|
||||
this.$target.addClass('d-none');
|
||||
},
|
||||
});
|
||||
});
|
||||
+78
-53
@@ -1,11 +1,19 @@
|
||||
odoo.define('website_mail_channel.snippet', function (require) {
|
||||
odoo.define('website_mail_channel.s_channel', function (require) {
|
||||
'use strict';
|
||||
|
||||
var publicWidget = require('web.public.widget');
|
||||
|
||||
publicWidget.registry.follow_alias = publicWidget.Widget.extend({
|
||||
selector: ".js_follow_alias",
|
||||
publicWidget.registry.Channel = publicWidget.Widget.extend({
|
||||
selector: '.s_channel',
|
||||
disabledInEditableMode: false,
|
||||
read_events: {
|
||||
'click .js_follow_btn, .js_unfollow_btn': '_onFollowUnFollowBtnClick',
|
||||
'click .js_follow_btn': '_onFollowBtnClick',
|
||||
},
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
var self = this;
|
||||
this.is_user = false;
|
||||
@@ -18,7 +26,7 @@ publicWidget.registry.follow_alias = publicWidget.Widget.extend({
|
||||
if (unsubscribePage && self.is_user) {
|
||||
self.$target.find(".js_mg_follow_form").remove();
|
||||
}
|
||||
self.toggle_subscription(data.is_member ? 'on' : 'off', data.email);
|
||||
self._toggleSubscription(data.is_member ? 'on' : 'off', data.email);
|
||||
self.$target.removeClass('d-none');
|
||||
};
|
||||
|
||||
@@ -35,51 +43,39 @@ publicWidget.registry.follow_alias = publicWidget.Widget.extend({
|
||||
if (!this.editableMode) {
|
||||
this.$('> .alert').addClass('d-none');
|
||||
this.$('> .input-group-append.d-none').removeClass('d-none');
|
||||
this.$('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
|
||||
event.preventDefault();
|
||||
self._onClick();
|
||||
});
|
||||
|
||||
this.$('.js_follow_btn').on('click', function (ev) {
|
||||
if ($(ev.currentTarget).closest('.js_mg_follow_form').length) {
|
||||
self.$('.js_follow_email').val($(ev.currentTarget).closest('.js_mg_follow_form').find('.js_follow_email').val());
|
||||
}
|
||||
});
|
||||
}
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
_onClick: function () {
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getAliasInfo: function () {
|
||||
var self = this;
|
||||
var $email = this.$target.find(".js_follow_email");
|
||||
|
||||
if ($email.length && !$email.val().match(/.+@.+/)) {
|
||||
this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
|
||||
return false;
|
||||
if (! this.$target.data('id')) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
|
||||
|
||||
var subscription_action = this.$target.attr("data-follow") || "off";
|
||||
if (window.location.search.slice(1).split('&').indexOf("unsubscribe") >= 0) {
|
||||
// force unsubscribe mode via URI /groups?unsubscribe
|
||||
subscription_action = 'on';
|
||||
}
|
||||
this._rpc({
|
||||
route: '/groups/subscription',
|
||||
params: {
|
||||
'channel_id': +this.$target.data('id'),
|
||||
'object': this.$target.data('object'),
|
||||
'subscription': subscription_action,
|
||||
'email': $email.length ? $email.val() : false,
|
||||
},
|
||||
}).then(function (follow) {
|
||||
self.toggle_subscription(follow, self.email);
|
||||
return this._rpc({route: '/groups/' + this.$target.data('id') + '/get_alias_info'}).then(function (data) {
|
||||
if (data.alias_name) {
|
||||
self.$target.find('.js_mg_email').attr('href', 'mailto:' + data.alias_name);
|
||||
self.$target.find('.js_mg_email').removeClass('d-none');
|
||||
} else {
|
||||
self.$target.find('.js_mg_email').addClass('d-none');
|
||||
}
|
||||
});
|
||||
},
|
||||
toggle_subscription: function (follow, email) {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_toggleSubscription: function (follow, email) {
|
||||
// .js_mg_follow_form contains subscribe form
|
||||
// .js_mg_details contains send/archives/unsubscribe links
|
||||
// .js_mg_confirmation contains message warning has been sent
|
||||
var alias_done = this.get_alias_info();
|
||||
var aliasDone = this._getAliasInfo();
|
||||
if (follow === "on") {
|
||||
// user is connected and can unsubscribe
|
||||
this.$target.find(".js_mg_follow_form").addClass('d-none');
|
||||
@@ -102,22 +98,51 @@ publicWidget.registry.follow_alias = publicWidget.Widget.extend({
|
||||
.val(email ? email : "")
|
||||
.attr("disabled", follow === "on" || (email.length && this.is_user) ? "disabled" : false);
|
||||
this.$target.attr("data-follow", follow);
|
||||
return Promise.resolve(alias_done);
|
||||
return Promise.resolve(aliasDone);
|
||||
},
|
||||
get_alias_info: function () {
|
||||
var self = this;
|
||||
if (! this.$target.data('id')) {
|
||||
return Promise.resolve();
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Handlers
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onFollowBtnClick: function (ev) {
|
||||
if ($(ev.currentTarget).closest('.js_mg_follow_form').length) {
|
||||
this.$('.js_follow_email').val($(ev.currentTarget).closest('.js_mg_follow_form').find('.js_follow_email').val());
|
||||
}
|
||||
return this._rpc({route: '/groups/' + this.$target.data('id') + '/get_alias_info'}).then(function (data) {
|
||||
if (data.alias_name) {
|
||||
self.$target.find('.js_mg_email').attr('href', 'mailto:' + data.alias_name);
|
||||
self.$target.find('.js_mg_email').removeClass('d-none');
|
||||
}
|
||||
else {
|
||||
self.$target.find('.js_mg_email').addClass('d-none');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onFollowUnFollowBtnClick: function (ev) {
|
||||
ev.preventDefault();
|
||||
var self = this;
|
||||
var $email = this.$target.find(".js_follow_email");
|
||||
|
||||
if ($email.length && !$email.val().match(/.+@.+/)) {
|
||||
this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
|
||||
return false;
|
||||
}
|
||||
this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
|
||||
|
||||
var subscriptionAction = this.$target.attr("data-follow") || "off";
|
||||
if (window.location.search.slice(1).split('&').indexOf("unsubscribe") >= 0) {
|
||||
// force unsubscribe mode via URI /groups?unsubscribe
|
||||
subscriptionAction = 'on';
|
||||
}
|
||||
this._rpc({
|
||||
route: '/groups/subscription',
|
||||
params: {
|
||||
'channel_id': +this.$target.data('id'),
|
||||
'object': this.$target.data('object'),
|
||||
'subscription': subscriptionAction,
|
||||
'email': $email.length ? $email.val() : false,
|
||||
},
|
||||
}).then(function (follow) {
|
||||
self._toggleSubscription(follow, self.email);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
odoo.define('website_mail_channel.s_channel_options', function (require) {
|
||||
'use strict';
|
||||
|
||||
var core = require('web.core');
|
||||
var options = require('web_editor.snippets.options');
|
||||
var wUtils = require('website.utils');
|
||||
|
||||
var _t = core._t;
|
||||
|
||||
options.registry.Channel = options.Class.extend({
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
cleanForSave: function () {
|
||||
this.$target.addClass('d-none');
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Creates a new mail.channel through a modal prompt.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
createChannel: function (previewMode, widgetValue, params) {
|
||||
var self = this;
|
||||
return wUtils.prompt({
|
||||
id: "editor_new_mail_channel_subscribe",
|
||||
window_title: _t("New Mail Channel"),
|
||||
input: _t("Name"),
|
||||
}).then(function (result) {
|
||||
var name = result.val;
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
return self._rpc({
|
||||
model: 'mail.channel',
|
||||
method: 'create',
|
||||
args: [{
|
||||
name: name,
|
||||
public: 'public',
|
||||
}],
|
||||
}).then(function (id) {
|
||||
self.$target.attr("data-id", id);
|
||||
return self._rerenderXML();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_renderCustomXML: function (uiFragment) {
|
||||
return this._rpc({
|
||||
model: 'mail.channel',
|
||||
method: 'name_search',
|
||||
args: ['', [['public', '=', 'public']]],
|
||||
}).then(channels => {
|
||||
const menuEl = uiFragment.querySelector('.select_discussion_list');
|
||||
for (const channel of channels) {
|
||||
const el = document.createElement('we-button');
|
||||
el.dataset.selectDataAttribute = channel[0];
|
||||
el.textContent = channel[1];
|
||||
menuEl.appendChild(el);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template id="assets_frontend" inherit_id="website.assets_frontend">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" href="/website_mail_channel/static/src/css/website_mail_channel.css"/>
|
||||
</xpath>
|
||||
<xpath expr="//script[last()]" position="after">
|
||||
<script type="text/javascript" src="/website_mail_channel/static/src/js/website_mail_channel.js"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_wysiwyg" inherit_id="website.assets_wysiwyg" name="Website Mail Channel Editor Assets">
|
||||
<xpath expr="//script[last()]" position="after">
|
||||
<script type="text/javascript" src="/website_mail_channel/static/src/snippets/s_channel/options.js"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user