[IMP] website: xml snippets server side + improve loading speed

bzr revid: chm@openerp.com-20131004104133-q1p2fdf153izeqyj
This commit is contained in:
Christophe Matthieu 2013-10-04 12:41:33 +02:00
parent 94887c5cb8
commit 865a7cb53a
9 changed files with 81 additions and 842 deletions

View File

@ -13,6 +13,7 @@ OpenERP Website CMS
'installable': True,
'data': [
'views/views.xml',
'views/snippets.xml',
'views/themes.xml',
'website_data.xml',
'website_view.xml',

View File

@ -111,6 +111,10 @@ class Website(openerp.addons.web.controllers.main.Home):
return request.website.render('website.themes', {'theme_changed': True})
@website.route(['/website/snippets'], type='json', auth="public")
def snippets(self):
return request.website.render('website.snippets')
@website.route('/page/<path:path>', type='http', auth="public", multilang=True)
def page(self, path, **kwargs):
values = {

View File

@ -1,4 +1,4 @@
@charset "UTF-8";
@charset "utf-8";
/* ---- CKEditor Minimal Reset ---- */
.navbar.navbar-inverse .cke_chrome {
border: none;
@ -183,6 +183,7 @@ table.editorbar-panel td.selected {
#oe_snippets .nav {
position: fixed;
z-index: 1;
border: 0;
}
#oe_snippets .nav > li {
display: inline-block;
@ -193,24 +194,24 @@ table.editorbar-panel td.selected {
padding: 2px 10px !important;
width: 100%;
display: block;
border: 0;
}
#oe_snippets .pill-content {
#oe_snippets .tab-content {
margin-top: 24px;
display: inline-block;
white-space: nowrap;
}
#oe_snippets .pill-content > div {
display: inline-block;
#oe_snippets .tab-content > div {
background: black;
padding: 5px;
}
#oe_snippets .pill-content > div label {
#oe_snippets .tab-content > div label {
width: 44px;
height: 100%;
color: white;
padding-left: 10px;
}
#oe_snippets .pill-content > div label div {
#oe_snippets .tab-content > div label div {
width: 100px;
text-align: center;
-webkit-transform: translate(-39px, 44px);

View File

@ -156,14 +156,15 @@ table.editorbar-panel
padding: 2px 10px !important
width: 100%
display: block
border: 0
position: fixed
z-index: 1
.pill-content
border: 0
.tab-content
margin-top: 24px
display: inline-block
white-space: nowrap
> div
display: inline-block
background: rgb(0,0,0)
padding: 5px
label

View File

@ -255,6 +255,7 @@ footer {
.carousel-inner .item {
height: 100%;
background-size: 100%;
}
.carousel.oe_small .carousel-inner {
@ -348,10 +349,9 @@ footer {
background: #eeeeee bottom center repeat fixed;
min-height: 650px;
width: 100%;
background-size: 100%;
}
/* overflow: hidden
* position: relative */
/* -- Hack for removing double scrollbar from mobile preview -- */
div#mobile-preview.modal {
overflow: hidden;

View File

@ -185,7 +185,7 @@ footer
.carousel-inner .item
height: 100%
background-size: 100%
.carousel
&.oe_small .carousel-inner
@ -267,9 +267,7 @@ footer
background: #eee bottom center repeat fixed
min-height: 650px
width: 100%
/*
overflow: hidden
position: relative */
background-size: 100%
/* -- Hack for removing double scrollbar from mobile preview -- */
div#mobile-preview.modal

View File

@ -18,13 +18,8 @@
},
edit: function () {
$("body").off('click');
var self = this;
self.on('rte:ready', this, function () {
window.snippets = self.snippets = new website.snippet.BuildingBlock(this);
self.snippets.appendTo(self.$el);
});
window.snippets = this.snippets = new website.snippet.BuildingBlock(this);
this.snippets.appendTo(this.$el);
return this._super.apply(this, arguments);
},
save: function () {
@ -85,21 +80,25 @@
hack_to_add_snippet_id();
$("body").on('DOMNodeInserted', hack_to_add_snippet_id);
},
dom_filter: function (dom) {
dom_filter: function (dom, sibling) {
console.log(dom, sibling);
if (typeof dom === "string") {
var include = "[data-oe-model]";
var sdom = dom.split(',');
dom = "";
_.each(sdom, function (val) {
val = val.replace(/^\s+|\s+$/g, '');
dom += "body " + include + " " + val + ", ";
val = val.split(" ");
dom += "body "+ val.shift() + include + val.join(" ") + ", ";
dom += include + " " + val + ", ";
if (!sibling) {
val = val.split(" ");
dom += val.shift() + include + val.join(" ") + ", ";
}
});
dom = dom.replace(/,\s*$/g, '');
console.log($(dom));
return $(dom);
} else {
return $(dom).is("[data-oe-model]") || $(dom).parents("[data-oe-model]").length ? $(dom) : $("");
return (!sibling && $(dom).is("[data-oe-model]")) || $(dom).parents("[data-oe-model]").length ? $(dom) : $("");
}
},
start: function() {
@ -115,11 +114,8 @@
this.fetch_snippet_templates();
this.bind_selected_manipulator();
this.bind_snippet_click_editor();
this.activate_overlay_zones();
this.scrollspy();
this.$el.addClass("hidden");
this.$modal = $(openerp.qweb.render('website.snippets_modal'));
@ -129,59 +125,28 @@
var self = this;
this.style_templates = {};
_.each(openerp.qweb.compiled_templates, function (val, key) {
if (key.indexOf('website.snippets.') === 0) {
var $snippet = $(openerp.qweb.render(key)).addClass("oe_snippet");
var snipped_id = $snippet.data("snippet-id");
if (snipped_id) {
openerp.jsonRpc("/website/snippets", 'call', {})
.then(function (html) {
var $html = $(html);
if ($snippet.data('category') === 'style') {
self.style_templates[snipped_id] = {
'snipped-id' : snipped_id,
'selector': $snippet.data('selector'),
'class': $snippet.find(".oe_snippet_class").text(),
'label': $snippet.find(".oe_snippet_label").text(),
'$el': $snippet
};
}
if ($snippet.find(".oe_snippet_thumbnail").length) {
self.$el.find('#snippet_' + $snippet.data('category')).append($snippet);
self.make_snippet_draggable($snippet);
}
}
}
});
},
scrollspy: function (){
var self = this;
var $ul = this.$("ul");
var $pill = self.$(".pill-content");
var padding = parseInt($pill.css("padding-left"));
var $scroll = this.$(".scroll");
$scroll.scroll(function () {
$pill.find("> div").each(function () {
/*
if ($(this).position().left <= padding) {
$ul.find("> li").removeClass('active');
$ul.find("a[href='#" + $(this).attr("id") + "']").parent("li").addClass('active');
}*/
var $styles = $html.find("#snippet_styles");
$styles.find("> [data-snippet-id]").each(function () {
var $style = $(this);
var snipped_id = $style.data('snippet-id');
self.style_templates[snipped_id] = {
'snipped-id' : snipped_id,
'selector': $style.data('selector'),
'class': $style.find(".oe_snippet_class").text(),
'label': $style.find(".oe_snippet_label").text()
};
});
$styles.remove();
self.$snippets = $html.find(".tab-content > div > div").addClass("oe_snippet");
self.$el.append($html);
self.make_snippet_draggable(self.$snippets);
});
});
$ul.find("a").click(function (event) {
event.preventDefault();
$pill.find("> div").hide();
$pill.find( $(event.currentTarget).attr('href')).show();
$ul.find('> li').removeClass('active');
$(event.currentTarget).parent().addClass('active');
return false;
});
// $pill.css("padding-right", self.$el.outerWidth() - padding + 10 - $pill.find("> div:last").outerWidth());
$pill.find("> div").hide();
$pill.find("div:first").show();
$ul.find("> li:first").addClass('active');
},
cover_target: function ($el, $target){
var pos = $target.offset();
@ -260,7 +225,8 @@
},
create_overlay: function ($snipped_id) {
if (typeof $snipped_id.data("snippet-editor") === 'undefined') {
this.activate_overlay_zones($snipped_id);
var $targets = this.activate_overlay_zones($snipped_id);
if (!$targets.length) return;
var editor = website.snippet.editorRegistry[$snipped_id.data("snippet-id")] || website.snippet.editorRegistry.resize;
$snipped_id.data("snippet-editor", new editor(this, $snipped_id));
}
@ -276,35 +242,17 @@
return obj;
},
bind_selected_manipulator: function () {
var self = this;
var $selected_target = null;
$("body").mouseover(function (event){
var $target = $(event.srcElement).parents("[data-snippet-id]:first");
$target = self.dom_filter($target);
if($target.length && !self.editor_busy) {
if($selected_target != $target){
if($selected_target && $selected_target.data('overlay')){
$selected_target.data('overlay').removeClass('oe_hover');
}
$selected_target = $target;
self.create_overlay($target);
$target.data('overlay').addClass('oe_hover');
}
} else if($selected_target && $selected_target.data('overlay')) {
$selected_target.data('overlay').removeClass('oe_hover');
}
});
},
// activate drag and drop for the snippets in the snippet toolbar
make_snippet_draggable: function($snippet){
make_snippet_draggable: function($snippets){
var self = this;
var $toInsert = false;
var $tumb = $snippet.find(".oe_snippet_thumbnail");
var $tumb = $snippets.find(".oe_snippet_thumbnail:first");
var left = $tumb.outerWidth()/2;
var top = $tumb.outerHeight()/2;
var dropped = false;
var $snippet = false;
$snippet.draggable({
$snippets.draggable({
greedy: true,
helper: 'clone',
zIndex: '1000',
@ -312,12 +260,13 @@
cursor: "move",
handle: ".oe_snippet_thumbnail",
cursorAt: {
'left': $tumb.outerWidth()/2,
'top': $tumb.outerHeight()/2
'left': left,
'top': top
},
start: function(){
self.hide();
dropped = false;
$snippet = $(this);
var snipped_id = $snippet.data('snippet-id');
var action = $snippet.find('.oe_snippet_body').size() ? 'insert' : 'mutate';
if( action === 'insert'){
@ -462,7 +411,7 @@
}
if(sibling_selector){
self.dom_filter(sibling_selector).each(function (){
self.dom_filter(sibling_selector, true).each(function (){
var $zone = $(this);
if($zone.prev('.oe_drop_zone:visible').length === 0){
$zone.before(zone_template);
@ -513,6 +462,11 @@
activate_overlay_zones: function(selector){
var $targets = this.dom_filter(selector || '[data-snippet-id]');
var self = this;
if (typeof selector !== 'string' && !$targets.length) {
console.debug( "A good node must have a [data-oe-model] attribute or must have at least one parent with [data-oe-model] attribute.");
console.debug( "Wrong node(s): ", selector);
}
function is_visible($el){
return $el.css('display') != 'none'
@ -536,6 +490,7 @@
$zone.appendTo('#oe_manipulators');
$zone.data('target',$target);
$target.data('overlay',$zone);
console.log($target[0], $zone);
$target.on("DOMNodeInserted DOMNodeRemoved DOMSubtreeModified", function () {
self.cover_target($zone, $target);
@ -602,19 +557,10 @@
* this.$editor :
* content of .oe_snippet_options
* Displayed into the overlay options on focus
* this.$thumbnail :
* content of .oe_snippet_thumbnail
* Displayed in bottom editor menu, when the user click on "Building Blocks"
* this.$body :
* content of .oe_snippet_body
* Insert into the view when the thumbnail is drag and droped into a drop zone
*/
_readXMLData: function() {
this.$el = $(openerp.qweb.render("website.snippets." + this.snippet_id, {widget: this}).trim());
this.$el = this.parent.$snippets.siblings("[data-snippet-id='"+this.snippet_id+"']").clone();
this.$editor = this.$el.find(".oe_snippet_options");
this.$thumbnail = this.$el.find(".oe_snippet_thumbnail");
this.$body = this.$el.find(".oe_snippet_body");
var $options = this.$overlay.find(".oe_overlay_options");
this.$editor.prependTo($options.find(".oe_options ul"));
if ($options.find(".oe_options ul li").length) {

View File

@ -54,22 +54,7 @@
</t>
<t t-name="website.snippets">
<div id='oe_snippets'>
<div class="scroll">
<ul class="nav navbar-nav">
<li><a href="#snippet_structure">Structure</a></li>
<li><a href="#snippet_content">Content</a></li>
<li><a href="#snippet_business">Business</a></li>
<li><a href="#snippet_effect">Effects</a></li>
</ul>
<div class="pill-content">
<div id="snippet_structure"></div>
<div id="snippet_content"></div>
<div id="snippet_business"></div>
<div id="snippet_effect"></div>
</div>
</div>
</div>
<div id='oe_snippets'></div>
</t>
<t t-name="website.snippet_overlay">
@ -108,703 +93,4 @@
<div t-name="website.snippets.colmd" data-snippet-id='colmd' data-selector-vertical-children='.row'></div>
<!-- Structure Snippets -->
<div t-name="website.snippets.carousel" data-snippet-id='carousel' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<!-- editor bar to display inside the top edit bar -->
<li class='oe_snippet_options dropdown-submenu'>
<a tabindex="-1" href="#">Size</a>
<ul class="dropdown-menu" name="carousel-size">
<li data-value="oe_small"><a>Small</a></li>
<li data-value="oe_medium"><a>Medium</a></li>
<li data-value="oe_big"><a>Big</a></li>
</ul>
</li>
<li class="oe_snippet_options dropdown-submenu">
<a tabindex="-1" href="#">Background</a>
<ul class="dropdown-menu" name="carousel-background">
<li data-value="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
<li data-value="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
<li data-value="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
<li data-value="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
<li data-value="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
<li data-value="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
<li data-value="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
<li data-value="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
<li data-value="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
<li data-value="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
<li data-value="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
<li data-value="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
<li data-value="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
<li data-value="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
<li data-value="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
<li class="oe_custom_bg"><a><b>Chose your picture</b></a></li>
</ul>
</li>
<li class='oe_snippet_options dropdown-submenu'>
<a tabindex="-1" href="#">Style</a>
<ul class="dropdown-menu" name="carousel-style">
<li data-value="text_only"><a>Text Only</a></li>
<li data-value="image_text"><a>Image - Text</a></li>
<li data-value="text_image"><a>Text - Image</a></li>
</ul>
</li>
<li class="oe_snippet_options divider"></li>
<li class='oe_snippet_options'>
<a href="#" class="button js_add">Add Slide</a>
</li>
<li class='oe_snippet_options'>
<a href="#" class="button js_remove">Remove Slide</a>
</li>
<!-- thumbnail to display inside the bottom widget list editor -->
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_banner.png"/>
<span class="oe_snippet_thumbnail_title">Banner</span>
</div>
<!-- body to insert after drag and drop thumbnail -->
<div id="myCarousel" class="oe_snippet_body carousel slide oe_medium mb32" data-interval="10000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item image_text active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
<div class="container">
<div class="carousel-caption content">
<h2>Set Your Banner Title</h2>
<h3>Customize with the top-left menu</h3>
<p>
<a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
</p>
</div>
<div class="carousel-image hidden-xs">
<img src="/website/static/src/img/banner/banner_picture.png" alt="Banner OpenERP Image"/>
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left hidden" href="#myCarousel" data-slide="prev" style="width: 10%"><span class="glyphicon glyphicon-circle-arrow-left"><span class="hidden">.</span></span></a>
<a class="carousel-control right hidden" href="#myCarousel" data-slide="next" style="width: 10%"><span class="glyphicon glyphicon-circle-arrow-right"><span class="hidden">.</span></span></a>
</div>
</div>
<div t-name="website.snippets.darken" data-snippet-id='darken' data-category='style' data-selector='section'>
<div class='oe_snippet_label'>Darken</div>
<div class='oe_snippet_class'>dark</div>
</div>
<div t-name="website.snippets.well" data-snippet-id='well' data-category='content' data-selector-siblings='p, h1, h2, h3, blockquote'>
<div class='oe_snippet_thumbnail'>
<span class="oe_snippet_thumbnail_title">Well</span>
</div>
<div class="oe_snippet_body well">
Manage your sales funnel with no effort with OpenERP CRM. Attract
leads, follow-up on phone calls and meetings. Analyse the quality
of your leads to make informed decisions.
</div>
</div>
<div t-name="website.snippets.quote" data-snippet-id='quote' data-category='content' data-selector-siblings='p, h1, h2, h3, blockquote'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quote.png"/>
<span class="oe_snippet_thumbnail_title">Quote</span>
</div>
<blockquote class="oe_snippet_body">
<p>
OpenERP provides essential platform for our project management.
Things are better organized and more visible with it.
</p>
<small>John Doe, CEO</small>
</blockquote>
</div>
<div t-name="website.snippets.panel" data-snippet-id='panel' data-category='content' data-selector-siblings='p, h1, h2, h3, blockquote'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_panel.png"/>
<span class="oe_snippet_thumbnail_title">Panel</span>
</div>
<div class="oe_snippet_body panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">OpenERP Features</h3>
</div>
<div class="panel-body">
OpenERP's collaborative and realtime project management helps
your team get work done. Keep track of everything, from the big
picture to the minute details, from the customer contract to
the billing.
</div>
</div>
</div>
<div t-name="website.snippets.surprise" data-snippet-id='surprise' data-category='content' data-selector-children='.oe_structure'>
<div class="oe_snippet_body" style="height: 0; position: absolute;"></div>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_surprise.png"/>
<span class="oe_snippet_thumbnail_title">Surprise!</span>
</div>
</div>
<div t-name="website.snippets.text-image" data-snippet-id='text-image' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
<span class="oe_snippet_thumbnail_title">Text-Image</span>
</div>
<section class="oe_snippet_body">
<div class="container">
<div class="row">
<div class="col-md-6 mt32">
<h3>Enterprise Social Network</h3>
<p>
Make every employee feel more connected and engaged
with twitter-like features for your own company. Follow
people, share best practices, 'like' top ideas, etc.
</p><p>
Connect with experts, follow what interests you, share
documents and promote best practices with OpenERP
Social application. Get work done with effective
collaboration across departments, geographies
and business applications.
</p>
</div>
<div class="col-md-6 mt16 mb16">
<img class="img-responsive shadow" src="/website/static/src/img/text_image.png"/>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.image-text" data-snippet-id='image-text' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_text.png"/>
<span class="oe_snippet_thumbnail_title">Image-Text</span>
</div>
<section class="oe_snippet_body">
<div class="container">
<div class="row">
<div class="col-md-6 mt16 mb16">
<img class="img-responsive shadow" src="/website/static/src/img/image_text.jpg"/>
</div>
<div class="col-md-6 mt32">
<h3>Manage Your Shops</h3>
<p>
OpenERP's Point of Sale introduces a super clean
interface with no installation required that runs
online and offline on modern hardwares.
</p><p>
It's full integration with the company inventory
and accounting, gives you real time statistics and
consolidations amongst all shops without the hassle
of integrating several applications.
</p>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.jumbotron" data-snippet-id='jumbotron' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_jumbotron.png"/>
<span class="oe_snippet_thumbnail_title">Jumbotron</span>
</div>
<section class="oe_snippet_body jumbotron mt16 mb16">
<div class="container">
<h1>Sell Online. Easily.</h1>
<p>
Get your online shop ready in a few clicks with OpenERP Commerce.
</p>
<p>
<a class="btn btn-primary btn-lg" href="/website.contactus">
Contact us
</a>
</p>
</div>
</section>
</div>
<div t-name="website.snippets.text-block" data-snippet-id='text-block' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_block.png"/>
<span class="oe_snippet_thumbnail_title">Text Block</span>
</div>
<section class="oe_snippet_body mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb32">
<h2>
OpenERP Project Management
</h2>
<h3 class="text-muted">Infinitely flexible. Incredibly easy to use.</h3>
</div>
<div class="col-md-12 mb16 mt16">
<p>
OpenERP's <b>collaborative and realtime</b> project
management helps your team get work done. Keep
track of everything, from the big picture to the
minute details, from the customer contract to the
billing.
</p><p>
Organize projects around <b>your own processes</b>. Work
on tasks and issues using the kanban view, schedule
tasks using the gantt chart and control deadlines
in the calendar view. Every project may have it's
own stages allowing teams to optimize their job.
</p>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.title" data-snippet-id='title' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class="oe_snippet_thumbnail">
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_title.png"/>
<span class="oe_snippet_thumbnail_title">Title</span>
</div>
<section class="oe_snippet_body">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Your Website Title</h1>
<h3 class="text-muted text-center">Great products for great people</h3>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.hr" data-snippet-id='hr' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class="oe_snippet_thumbnail">
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_separator.png"/>
<span class="oe_snippet_thumbnail_title">Separator</span>
</div>
<hr class="oe_snippet_body"/>
</div>
<div t-name="website.snippets.big-picture" data-snippet-id='big-picture' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_big_picture.png"/>
<span class="oe_snippet_thumbnail_title">Big Picture</span>
</div>
<section class="oe_snippet_body dark mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt32 mb32">
<h2>Work with the hardware you already have...</h2>
</div>
<div class="col-md-12">
<img class="img-responsive" src="/website/static/src/img/big_picture.png" style="margin: 0 auto;"/>
</div>
<div class="col-md-6 col-md-offset-3 mb16 mt16">
<p class="text-center">
<b>No installation required</b>
</p>
<p class="text-center">
OpenERP's Point of Sale introduces a super clean
interface with no installation required that runs
online and offline on modern hardware. Laptops,
tablets, industrial POS, it runs on everything.
</p>
<p class="text-center">
<a href="/page/website.contactus">Get more information »</a>
</p>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.three-columns" data-snippet-id='three-columns' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class="oe_snippet_thumbnail">
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_three_columns.png"/>
<span class="oe_snippet_thumbnail_title">Three Columns</span>
</div>
<section class="oe_snippet_body mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb16">
<h2>OpenERP HR Features</h2>
<h3 class="text-muted">Manage your company most important asset: People</h3>
</div>
<div class="col-md-4">
<img class="img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>
<h4 class="mt16">Streamline Recruitments</h4>
<p>
Post job offers and keep track of each application
received. Follow applicants in your recruitment process
with the smart kanban view.
</p><p>
Save time by automating some communications with email
templates. Resumes are indexed automatically, allowing
you to easily find for specific profiles.
</p>
</div>
<div class="col-md-4">
<img class="img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
<h4 class="mt16">Enterprise Social Network</h4>
<p>
Break down information silos. Share knowledge and best
practices amongst all employees. Follow specific people
or documents and join groups of interests to share
expertise and documents.
</p><p>
Interact with your collegues in real time with live chat.
</p>
</div>
<div class="col-md-4">
<img class="img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
<h4 class="mt16">Leaves Management</h4>
<p>
Keep track of the vacation days accrued by each
employee. Employees enter their requests (paid
holidays, sick leave, etc), for managers to approve and
validate. It's all done in just a few clicks. The
agenda of each employee is updated accordingly.
</p>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.portfolio" data-snippet-id='portfolio' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_portfolio.png"/>
<span class="oe_snippet_thumbnail_title">Portfolio</span>
</div>
<section class="oe_snippet_body">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb32">
<h2>Our Porfolio</h2>
<h4 class="text-muted">More than 500 successful projects</h4>
</div>
<div class="col-md-4">
<img class="img-thumbnail img-responsive" src="/website/static/src/img/deers.jpg"/>
<img class="img-thumbnail img-responsive" src="/website/static/src/img/desert.jpg"/>
<img class="img-thumbnail img-responsive" src="/website/static/src/img/china.jpg"/>
</div>
<div class="col-md-4">
<img class="img-thumbnail img-responsive" src="/website/static/src/img/desert.jpg"/>
<img class="img-thumbnail img-responsive" src="/website/static/src/img/china.jpg"/>
<img class="img-thumbnail img-responsive" src="/website/static/src/img/deers.jpg"/>
</div>
<div class="col-md-4">
<img class="img-thumbnail img-responsive" src="/website/static/src/img/landscape.jpg"/>
<img class="img-thumbnail img-responsive" src="/website/static/src/img/china.jpg"/>
<img class="img-thumbnail img-responsive" src="/website/static/src/img/desert.jpg"/>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.image-gallery" data-snippet-id='image-gallery' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_gallery.png"/>
<span class="oe_snippet_thumbnail_title">Image Gallery</span>
</div>
<section class="oe_snippet_body">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb32">
<h2>Our Customer References</h2>
<h4 class="text-muted">More than 500 successful projects</h4>
</div>
<div class="col-md-6">
<img class="img-thumbnail img-responsive mb16" src="/website/static/src/img/desert.jpg"/>
</div>
<div class="col-md-3">
<img class="img-thumbnail img-responsive mb16" src="/website/static/src/img/china_thumb.jpg"/>
</div>
<div class="col-md-3">
<img class="img-thumbnail img-responsive mb16" src="/website/static/src/img/deers_thumb.jpg"/>
</div>
<div class="col-md-3">
<img class="img-thumbnail img-responsive mb16" src="/website/static/src/img/desert_thumb.jpg"/>
</div>
<div class="col-md-3">
<img class="img-thumbnail img-responsive mb16" src="/website/static/src/img/china_thumb.jpg"/>
</div>
<div class="col-md-3">
<img class="img-thumbnail img-responsive mb16" src="/website/static/src/img/deers_thumb.jpg"/>
</div>
<div class="col-md-6">
<img class="img-thumbnail img-responsive mb16" src="/website/static/src/img/landscape.jpg"/>
</div>
<div class="col-md-3">
<img class="img-thumbnail img-responsive mb16" src="/website/static/src/img/china_thumb.jpg"/>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.pricing" data-snippet-id='pricing' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_comparison.png"/>
<span class="oe_snippet_thumbnail_title">Comparisons</span>
</div>
<section class="oe_snippet_body">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb32">
<h2>Our Offers</h2>
</div>
<div class="col-md-4">
<div class="panel panel-info">
<!-- Default panel contents -->
<div class="panel-heading text-center">
<h2 style="margin: 0">Beginner</h2>
<p style="margin: 0" class="text-muted">
Starter package
</p>
</div>
<div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
<h2 style="margin: 0"><span>$</span><b style="font-size: 60px">450</b><small>.00</small></h2>
<div>per month</div>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Battery: 8 hours</li>
<li class="list-group-item">Screen: 2.5 inch</li>
<li class="list-group-item">Weight: 1.1 ounces</li>
<li class="list-group-item">No support</li>
</ul>
<div class="panel-footer text-center">
<p class="text-muted">
<i>Free shipping, satisfied or reimbursed.</i>
</p>
<a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading text-center">
<h2 style="margin: 0">Professional</h2>
<p style="margin: 0">
Enterprise package
</p>
</div>
<div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
<h2 style="margin: 0"><span>$</span><b style="font-size: 60px">590</b><small>.00</small></h2>
<div>per month</div>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Battery: 12 hours</li>
<li class="list-group-item">Screen: 2.8 inch</li>
<li class="list-group-item">Weight: 1.2 ounces</li>
<li class="list-group-item">Limited support</li>
</ul>
<div class="panel-footer text-center">
<p class="text-muted">
<i>Free shipping, satisfied or reimbursed.</i>
</p>
<a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-info">
<!-- Default panel contents -->
<div class="panel-heading text-center">
<h2 style="margin: 0">Expert</h2>
<p style="margin: 0" class="text-muted">
The top of the top
</p>
</div>
<div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
<h2 style="margin: 0"><span>$</span><b style="font-size: 60px">890</b><small>.00</small></h2>
<div>per month</div>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Battery: 20 hours</li>
<li class="list-group-item">Screen: 2.8 inch</li>
<li class="list-group-item">Weight: 1.2 ounces</li>
<li class="list-group-item">Unlimited support</li>
</ul>
<div class="panel-footer text-center">
<p class="text-muted">
<i>Free shipping, satisfied or reimbursed.</i>
</p>
<a href="/page/website.contactus" class="btn btn-primary btn-lg">Contact us</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.cta" data-snippet-id='cta' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>
<span class="oe_snippet_thumbnail_title">Button</span>
</div>
<section class="oe_snippet_body dark">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb16">
<a href="/shop" class="btn btn-info btn-lg">View Products</a>
<a href="/page/website.contactus" class="btn btn-primary btn-lg">Contact us</a>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.faq" data-snippet-id='faq' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_faq.png"/>
<span class="oe_snippet_thumbnail_title">FAQ</span>
</div>
<section class="oe_snippet_body">
<div class="container">
<h2 class="page-header">
Point of Sale Questions <small>v7</small>
</h2>
<h3>
Which hardware does OpenERP POS support?
</h3>
<p>
OpenERP's POS is a web application that can run on any device that
can display websites with little to no setup required.
</p><p>
The Point of Sale works perfectly on any kind of touch enabled
device, whether it's multi-touch tablets like an iPad or
keyboardless resistive touchscreen terminals.
</p>
<h3>
Does it works offline?
</h3>
<p>
Deploy new stores with just an internet connection: no
installation, no specific hardware required. It works with any
iPad, Tablet PC, laptop or industrial POS machine.
</p><p>
While an internet connection is required to start the Point of
Sale, it will stay operational even after a complete disconnection.
</p>
<h2 class="page-header">
Project Management Questions <small>v7</small>
</h2>
<h3>
Can I use it to manage projects based on agile methodologies?
</h3>
<p>
Yes.
</p>
</div>
</section>
</div>
<div t-name="website.snippets.references" data-snippet-id='references' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_references.png"/>
<span class="oe_snippet_thumbnail_title">References</span>
</div>
<section class="oe_snippet_body mb32 mt16">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">
Our References
</h1>
<h3 class="text-muted text-center">
More than 500 happy customers.
</h3>
</div>
<div class="col-md-4 col-md-offset-1 mt16 mb32">
<blockquote data-snippet-id="quote">
<p>
OpenERP provides essential platform for our project management.
Things are better organized and more visible with it.
</p>
<small>John Doe, CEO</small>
</blockquote>
</div>
<div class="col-md-4 col-md-offset-2 mt16 mb32">
<blockquote data-snippet-id="quote">
<p>
OpenERP provides essential platform for our project management.
Things are better organized and more visible with it.
</p>
<small>John Doe, CEO</small>
</blockquote>
</div>
<div class="col-md-2 col-md-offset-1">
<img src="/website/static/src/img/openerp_logo.png" class="img-responsive img-thumbnail"/>
</div>
<div class="col-md-2">
<img src="/website/static/src/img/openerp_logo.png" class="img-responsive img-thumbnail"/>
</div>
<div class="col-md-2">
<img src="/website/static/src/img/openerp_logo.png" class="img-responsive img-thumbnail"/>
</div>
<div class="col-md-2">
<img src="/website/static/src/img/openerp_logo.png" class="img-responsive img-thumbnail"/>
</div>
<div class="col-md-2">
<img src="/website/static/src/img/openerp_logo.png" class="img-responsive img-thumbnail"/>
</div>
</div>
</div>
</section>
</div>
<div t-name="website.snippets.parallax" data-snippet-id='parallax' data-category='effect' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_parallax.png"/>
<span class="oe_snippet_thumbnail_title">Parallax</span>
</div>
<li class="oe_snippet_options dropdown-submenu">
<a tabindex="-1" href="#">Background</a>
<ul class="dropdown-menu" name="parallax-background">
<li data-value="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
<li data-value="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
<li data-value="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
<li data-value="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
<li data-value="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
<li data-value="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
<li data-value="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
<li data-value="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
<li data-value="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
<li data-value="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
<li data-value="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
<li data-value="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
<li data-value="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
<li data-value="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
<li data-value="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
<li class="oe_custom_bg"><a><b>Chose your picture</b></a></li>
</ul>
</li>
<section class="oe_snippet_body parallax_full oe_structure" style="background-image: url('/website/static/src/img/banner/greenfields.jpg')">
<div class="container">
<div class="row">
<div class="col-md-12 mt128 mb32">
<h1 class="text-center">
<b>OpenERP Events Management</b>
</h1>
<h3 class="text-center">
Sell tickets online with the Event app
</h3>
</div>
</div>
</div>
</section>
</div>
</templates>

View File

@ -135,15 +135,17 @@
<span t-field="res_company.name">Your Company</span>
<small> - <a t-href="/page/website.aboutus">About us</a></small>
</h4>
<p>
We are a team of passionated people whose goal is to improve everyone's
life through disruptive products. We build great products to solve your
business problems.
</p>
<p>
Our products are designed for small to medium companies willing to optimize
their performance.
</p>
<span class="">
<p>
We are a team of passionated people whose goal is to improve everyone's
life through disruptive products. We build great products to solve your
business problems.
</p>
<p>
Our products are designed for small to medium companies willing to optimize
their performance.
</p>
</span>
</div>
</div>
</div>