[IMP] Promo Ribbon for shop

bzr revid: fp@openerp.com-20130929153420-k01nqjj234tp6ovc
This commit is contained in:
Fabien Pinckaers 2013-09-29 17:34:20 +02:00
parent db45a1fafc
commit 97c0c0d641
8 changed files with 190 additions and 6 deletions

View File

@ -1,5 +1,5 @@
/* add CSS for bootstrap dropdown multi level */
.dropdown-submenu{position:relative;}
.dropdown-submenu{position:relative; z-index: 1000}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}

View File

@ -1,8 +1,8 @@
<section class="oe_container">
<div class="oe_row oe_spaced">
<div class="oe_span12">
<h2 class="oe_slogan">Awesome Open Source Blogging Systems</h2>
<h3 class="oe_slogan">Express yourself with beautiful blogs</h3>
<h2 class="oe_slogan">Awesome Open Source Blogging Plateform</h2>
<h3 class="oe_slogan">Write, Design, Promote, Engage</h3>
</div>
<div class="oe_span6">
<div class="oe_demo oe_picture oe_screenshot">
@ -14,7 +14,9 @@
</div>
<div class="oe_span6">
<p class='oe_mt32'>
Express yourself with the OpenERP enterprise grade blogging
plateform. Write beautiful blog posts, engage with visitors,
translate content and moderate social streams.
</p>
<div class="oe_centeralign oe_websiteonly">
<a href="http://www.openerp.com/start?app=website_sale" class="oe_button oe_big oe_tacky">Start your <span class="oe_emph">free</span> online store</a>

View File

@ -44,7 +44,7 @@
<t t-call="website.publish_management"><t t-set="object" t-value="blog_post"/></t>
</div><div class="clearfix"/>
<h2 class="text-center" t-field="blog_post.name"/>
<h1 class="text-center" t-field="blog_post.name"/>
<p class="post-meta text-muted text-center">
<span class="icon-calendar"> <span t-field="blog_post.create_date"/></span> &amp;nbsp;
<span class="icon-user"> By <span t-field="blog_post.create_uid"/> &amp;nbsp;</span>

View File

@ -138,6 +138,7 @@
height: 288px;
}
}
@media (min-width: 1200px) {
.col-md-12 .oe-height-1 {
height: 125px;
@ -165,6 +166,7 @@
height: 380px;
}
}
/* ---- Product list style ---- */
.oe_list_products {
border: none;
@ -226,3 +228,44 @@
.cke_editable #products_grid td:hover > .css_options {
display: block;
}
/* Ribbon for promotionso on products */
.oe_ribbon_promo .ribbon-wrapper {
display: block;
}
.ribbon-wrapper {
display: none;
width: 85px;
height: 88px;
z-index: 5;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
.ribbon {
font: bold 15px Sans-Serif;
color: white;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #aa0000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#880000), to(#aa0000));
background-image: -webkit-linear-gradient(top, #880000, #aa0000);
background-image: -moz-linear-gradient(top, #880000, #aa0000);
background-image: -ms-linear-gradient(top, #880000, #aa0000);
background-image: -o-linear-gradient(top, #880000, #aa0000);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}

View File

@ -196,4 +196,44 @@
.cke_editable
#products_grid td:hover > .css_options
display: block
display: block
/* Ribbon for promotionso on products */
.oe_ribbon_promo
.ribbon-wrapper
display: block
.ribbon-wrapper
display: none
width: 85px
height: 88px
z-index: 5
overflow: hidden
position: absolute
top: 0
right: 0
.ribbon
font: bold 15px Sans-Serif
color: white
text-align: center
text-shadow: rgba(0,0,0,0.5) 0px 1px 0px
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
position: relative
padding: 7px 0
left: -5px
top: 15px
width: 120px
background-color: #a00
background-image: -webkit-gradient(linear, left top, left bottom, from(#800), to(#a00))
background-image: -webkit-linear-gradient(top, #800, #a00)
background-image: -moz-linear-gradient(top, #800, #a00)
background-image: -ms-linear-gradient(top, #800, #a00)
background-image: -o-linear-gradient(top, #800, #a00)
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3)
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3)
box-shadow: 0px 0px 3px rgba(0,0,0,0.3)

View File

@ -83,6 +83,9 @@
<!-- Product list -->
<template id="products_cart">
<div class="ribbon-wrapper">
<div class="ribbon">Promo</div>
</div>
<div class="oe_product_description">
<a t-href="/shop/product/#{ product.id }/?#{ search and ('search=%s' % search) or ''}#{ category_id and ('&amp;category_id=%s' % category_id) or ''}">
<b t-field="product.name"/>

View File

@ -12,6 +12,10 @@
<field name="state">open</field>
</record>
<record id="website_sale.image_promo" model="website.product.style">
<field name="name">Promo Ribbon</field>
<field name="html_class">oe_ribbon_promo</field>
</record>
<record id="website_sale.image_full" model="website.product.style">
<field name="name">Image Full</field>
<field name="html_class">oe_image_full</field>

View File

@ -61,6 +61,52 @@
<record id="product.product_product_5" model="product.product">
<field name="website_published" eval="True"/>
<field name="website_size_x">2</field>
<field name="website_style_ids" eval="[(6,0,[ref('website_sale.image_promo')])]"/>
<field name="website_description" type="html">
<section snippet-id="text-image" class="mt16 mb16 dark">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1 mt64">
<h3>Why you'll love an iPad.</h3>
<p>
Right from the start, theres a lot to love about
iPad. Its simple yet powerful. Thin and light yet
full-featured. It can do just about everything and
be just about anything.
</p><p>
And because its so easy to use, its easy to love.
</p>
</div>
<div class="col-md-5 mt16 mb16">
<img class="img img-responsive" src="/website_sale/static/src/img/ipad_why.png"/>
</div>
</div>
</div>
</section>
<section snippet-id="image-text" class="mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<img class="img img-responsive" src="/website_sale/static/src/img/ipad_experience.png"/>
</div>
<div class="col-md-6 mt64">
<h3>The full iPad experience.</h3>
<h4 class="small">There is less of it, but no less to it.</h4>
<p>
Everything you love about iPad — the beautiful
screen, fast and fluid performance, FaceTime and
iSight cameras, thousands of amazing apps, 10-hour
battery life* — is everything youll love about
iPad mini, too. And you can hold it in one hand.
</p>
<p>
<a href="http://openerp.com">Learn more »</a>
</p>
</div>
</div>
</div>
</section>
</field>
</record>
<record id="product.product_product_6" model="product.product">
<field name="website_published" eval="True"/>
@ -80,6 +126,52 @@
<field name="website_published" eval="True"/>
<field name="website_sequence">3</field>
<field name="website_size_y">2</field>
<field name="website_style_ids" eval="[(6,0,[ref('website_sale.image_promo')])]"/>
<field name="website_description" type="html">
<section snippet-id="text-image" class="mt16 mb16 dark">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1 mt64">
<h3>Why you'll love an iPad.</h3>
<p>
Right from the start, theres a lot to love about
iPad. Its simple yet powerful. Thin and light yet
full-featured. It can do just about everything and
be just about anything.
</p><p>
And because its so easy to use, its easy to love.
</p>
</div>
<div class="col-md-5 mt16 mb16">
<img class="img img-responsive" src="/website_sale/static/src/img/ipad_why.png"/>
</div>
</div>
</div>
</section>
<section snippet-id="image-text" class="mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<img class="img img-responsive" src="/website_sale/static/src/img/ipad_experience.png"/>
</div>
<div class="col-md-6 mt64">
<h3>The full iPad experience.</h3>
<h4 class="small">There is less of it, but no less to it.</h4>
<p>
Everything you love about iPad — the beautiful
screen, fast and fluid performance, FaceTime and
iSight cameras, thousands of amazing apps, 10-hour
battery life* — is everything youll love about
iPad mini, too. And you can hold it in one hand.
</p>
<p>
<a href="http://openerp.com">Learn more »</a>
</p>
</div>
</div>
</div>
</section>
</field>
</record>
<record id="item1" model="product.pricelist.item">