[IMP] website_sale: css
bzr revid: chm@openerp.com-20130710131111-7ll30ij7279ubcpu
This commit is contained in:
Christophe Matthieu
parent
17536f7a15
commit
1bf0661f69
|
|
@ -0,0 +1,2 @@
|
|||
sass:
|
||||
sass --compass --trace -t expanded ecommerce.sass ecommerce.css
|
||||
|
|
@ -20,58 +20,82 @@
|
|||
.oe_ecommerce .oe_total td {
|
||||
padding: 10px;
|
||||
}
|
||||
.oe_ecommerce .oe_product {
|
||||
-webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
|
||||
.oe_ecommerce .oe_products .oe_product {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
width: 230px;
|
||||
height: 300px;
|
||||
width: 170px;
|
||||
height: 220px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.oe_ecommerce .oe_products .oe_product .oe_hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.oe_ecommerce .oe_products .oe_product .pull-left {
|
||||
margin: 0;
|
||||
float: none;
|
||||
}
|
||||
.oe_ecommerce .oe_products .oe_product .oe_ecommerce_description {
|
||||
display: none;
|
||||
}
|
||||
.oe_ecommerce .oe_products .oe_product h4 {
|
||||
text-align: center;
|
||||
text-shadow: 0px 1px 1px rgba(200, 200, 200, 0.2);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.oe_ecommerce .oe_products .oe_product img {
|
||||
max-height: 110px;
|
||||
max-width: 130px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.oe_ecommerce .oe_products .oe_product .oe_ecommerce_price {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 44px;
|
||||
text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.7);
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
}
|
||||
.oe_ecommerce .oe_products .oe_product .oe_ecommerce_price span {
|
||||
font-weight: bold;
|
||||
}
|
||||
.oe_ecommerce .oe_products .oe_product .oe_button_cart {
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
}
|
||||
.oe_ecommerce .oe_mycart .oe_product {
|
||||
padding: 3px 5px 6px 10px;
|
||||
}
|
||||
.oe_ecommerce .oe_mycart .oe_product img {
|
||||
max-width: 64;
|
||||
max-height: 64;
|
||||
margin: 0 5px 0px 12px;
|
||||
}
|
||||
.oe_ecommerce .oe_mycart .oe_product .oe_button_cart {
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
text-align: right;
|
||||
}
|
||||
.oe_ecommerce .oe_product {
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 15px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.oe_ecommerce .oe_product .oe_hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.oe_ecommerce .oe_product .oe_ecommerce_price {
|
||||
text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.7);
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
margin: 10px;
|
||||
}
|
||||
.oe_ecommerce .oe_product .oe_ecommerce_price span {
|
||||
font-weight: bold;
|
||||
margin: 5px;
|
||||
}
|
||||
.oe_ecommerce .oe_product .oe_ecommerce_description {
|
||||
display: none;
|
||||
}
|
||||
.oe_ecommerce .oe_product h4 {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
text-shadow: 0px 1px 1px rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
.oe_ecommerce .oe_product img {
|
||||
max-height: 128px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
-webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.oe_ecommerce .oe_product .oe_button_cart {
|
||||
width: 230px;
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
}
|
||||
.oe_ecommerce .oe_product .oe_button_cart button {
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.44);
|
||||
|
|
@ -80,6 +104,10 @@
|
|||
font-size: 12px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5px;
|
||||
padding: 2px;
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
position: relative;
|
||||
}
|
||||
.oe_ecommerce .oe_product .oe_button_cart button:first-child {
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #999999));
|
||||
|
|
@ -88,6 +116,15 @@
|
|||
background: -o-linear-gradient(#aaaaaa, #999999);
|
||||
background: linear-gradient(#aaaaaa, #999999);
|
||||
}
|
||||
.oe_ecommerce .oe_product .oe_button_cart button:first-child span {
|
||||
opacity: 0.8;
|
||||
filter: alpha(opacity=80);
|
||||
color: #eb1212;
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 3px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.oe_ecommerce .oe_product .oe_button_cart button:last-child {
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0076b1));
|
||||
background: -webkit-linear-gradient(#0088cc, #0076b1);
|
||||
|
|
|
|||
|
|
@ -14,45 +14,65 @@
|
|||
padding: 10px
|
||||
font-family: "Lato"
|
||||
font-size: 13px
|
||||
.oe_products
|
||||
.oe_product
|
||||
.oe_hidden
|
||||
visibility: hidden
|
||||
.pull-left
|
||||
margin: 0
|
||||
float: none
|
||||
.oe_ecommerce_description
|
||||
display: none
|
||||
h4
|
||||
text-align: center
|
||||
+text-shadow(0px 1px 1px rgba(200, 200, 200,.2))
|
||||
margin-bottom: 16px
|
||||
img
|
||||
max-height: 110px
|
||||
max-width: 130px
|
||||
margin: 0 auto
|
||||
padding-bottom: 14px
|
||||
text-align: center
|
||||
display: inline-block
|
||||
padding: 5px
|
||||
width: 170px
|
||||
height: 220px
|
||||
margin-right: 15px
|
||||
.oe_ecommerce_price
|
||||
width: 100%
|
||||
position: absolute
|
||||
bottom: 44px
|
||||
+text-shadow(0px 1px 3px rgba(255, 255, 255, 0.7))
|
||||
text-align: center
|
||||
font-size: 25px
|
||||
span
|
||||
font-weight: bold
|
||||
.oe_button_cart
|
||||
bottom: 5px
|
||||
left: 0
|
||||
.oe_mycart
|
||||
.oe_product
|
||||
padding: 3px 5px 6px 10px
|
||||
img
|
||||
max-width: 64
|
||||
max-height: 64
|
||||
margin: 0 5px 0px 12px
|
||||
.oe_button_cart
|
||||
right: 6px
|
||||
top: 6px
|
||||
text-align: right
|
||||
.oe_product
|
||||
.oe_hidden
|
||||
visibility: hidden
|
||||
.oe_ecommerce_price
|
||||
+text-shadow(0px 1px 3px rgba(255, 255, 255, 0.7))
|
||||
text-align: center
|
||||
font-size: 25px
|
||||
margin: 10px
|
||||
span
|
||||
font-weight: bold
|
||||
margin: 5px
|
||||
.oe_ecommerce_description
|
||||
display: none
|
||||
h4
|
||||
height: 50px
|
||||
text-align: center
|
||||
+text-shadow(0px 1px 1px rgba(200, 200, 200,.2))
|
||||
img
|
||||
max-height: 128px
|
||||
margin: 0 auto
|
||||
padding-bottom: 20px
|
||||
+box-shadow(0 0 3px 1px rgba(0,0,0,.1))
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
position: relative
|
||||
display: inline-block
|
||||
padding: 5px
|
||||
width: 230px
|
||||
height: 300px
|
||||
margin-top: 0
|
||||
margin-bottom: 10px
|
||||
margin-right: 10px
|
||||
margin-bottom: 15px
|
||||
+border-radius(5px)
|
||||
border: 1px solid rgba(0,0,0,.1)
|
||||
+box-shadow(0 0 3px 1px rgba(0,0,0,.1))
|
||||
.oe_button_cart
|
||||
width: 230px
|
||||
width: 100%
|
||||
font-size: 11px
|
||||
position: absolute
|
||||
bottom: 5px
|
||||
button
|
||||
+text-shadow(0px 1px 1px rgba(0, 0, 0, 0.44))
|
||||
overflow: hidden
|
||||
|
|
@ -60,8 +80,20 @@
|
|||
font-size: 12px
|
||||
margin: 0 auto
|
||||
margin-bottom: 5px
|
||||
padding: 2px
|
||||
width: 50px
|
||||
height: 22px
|
||||
position: relative
|
||||
&:first-child
|
||||
@include background(linear-gradient(#aaaaaa,#999999))
|
||||
span
|
||||
opacity: 0.8
|
||||
filter: alpha(opacity=80)
|
||||
color: rgb(235, 18, 18)
|
||||
position: absolute
|
||||
left: +18px
|
||||
top: 3px
|
||||
font-size: 20px
|
||||
&:last-child
|
||||
@include background(linear-gradient(#0088cc,#0076b1))
|
||||
&.btn-success
|
||||
|
|
|
|||
|
|
@ -72,29 +72,31 @@
|
|||
<t t-call="website_sale.page">
|
||||
<t t-set="title">Product</t>
|
||||
<t t-set="shop_content">
|
||||
<t t-foreach="products" t-as="product">
|
||||
<t t-set="quantity" t-value="([int(line.product_uom_qty) for line in (order.order_line or []) if line.product_id.id == product.id] + [0])[0]"/>
|
||||
<t t-call="website_sale.product_card"/>
|
||||
</t>
|
||||
<span class="oe_products">
|
||||
<t t-foreach="products" t-as="product">
|
||||
<t t-set="quantity" t-value="([int(line.product_uom_qty) for line in (order.order_line or []) if line.product_id.id == product.id] + [0])[0]"/>
|
||||
<t t-call="website_sale.product_card"/>
|
||||
</t>
|
||||
</span>
|
||||
</t>
|
||||
</t>
|
||||
</field>
|
||||
</record>
|
||||
|
||||
<record id="product_card" model="ir.ui.view">
|
||||
<field name="name">product card</field>
|
||||
<field name="name">product_card</field>
|
||||
<field name="type">qweb</field>
|
||||
<field name="arch" type="xml">
|
||||
<div class="media oe_product">
|
||||
<a t-att-href="'/shop/product/%%s' %% product.id"><h4 class="media-heading"><span t-record="product" t-field="name"><t t-esc="product.name"/></span></h4></a>
|
||||
<a t-att-href="'/shop/product/%%s' %% product.id"><img class="media-object" t-att-src="'data:image/png;base64,' + product.image"/></a>
|
||||
<div class="oe_ecommerce_description" t-record="product" t-field="description_sale"><t t-esc="product.description_sale"/></div>
|
||||
<div class="oe_ecommerce_price"><span><span t-record="product" t-field="list_price"><t t-esc="product.list_price"/></span>€</span></div>
|
||||
<a class="pull-left" t-att-href="'/shop/product/%%s' %% product.id"><img class="media-object" t-att-src="'data:image/png;base64,' + product.image"/></a>
|
||||
<div class="media-body">
|
||||
<div class="oe_ecommerce_description" t-record="product" t-field="description_sale"><t t-esc="product.description_sale"/></div>
|
||||
<div class="oe_ecommerce_price"><span><span t-record="product" t-field="list_price"><t t-esc="product.list_price"/></span>€</span></div>
|
||||
<div class="oe_button_cart">
|
||||
<button t-att-class="'btn btn-inverse %%s' %% (not quantity and 'oe_hidden' or '')" t-att-data-id="product.id">Remove one</button>
|
||||
<button t-att-class="'btn btn-inverse %%s' %% (not quantity and 'oe_hidden' or '')" t-att-data-id="product.id"><span>X</span><i class="icon-shopping-cart icon-large"></i> </button>
|
||||
<button t-att-class="'btn %%s' %% (quantity and 'btn-success' or 'btn-primary')" t-att-data-id="product.id">
|
||||
<span class="oe_txt_empty">Add to cart</span>
|
||||
<i class="icon-shopping-cart icon-large"></i>
|
||||
<span class="oe_txt">(<span class="oe_quantity"><t t-esc="quantity"/></span>)</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -131,13 +133,15 @@
|
|||
<t t-call="website_sale.page">
|
||||
<t t-set="title">My cart</t>
|
||||
<t t-set="shop_content">
|
||||
<t t-foreach="order.order_line or []" t-as="line">
|
||||
<t t-set="product" t-value="line.product_id"/>
|
||||
<t t-set="quantity" t-value="int(line.product_uom_qty)"/>
|
||||
<t t-call="website_sale.product_card"/>
|
||||
</t>
|
||||
<t t-call="website_sale.total"/>
|
||||
<a t-if="order.order_line" href="/shop/customer"><button class="btn btn-success">Next stage</button></a>
|
||||
<span class="oe_mycart">
|
||||
<t t-foreach="order.order_line or []" t-as="line">
|
||||
<t t-set="product" t-value="line.product_id"/>
|
||||
<t t-set="quantity" t-value="int(line.product_uom_qty)"/>
|
||||
<t t-call="website_sale.product_card"/>
|
||||
</t>
|
||||
<t t-call="website_sale.total"/>
|
||||
<a t-if="order.order_line" href="/shop/customer"><button class="btn btn-success">Next stage</button></a>
|
||||
</span>
|
||||
</t>
|
||||
</t>
|
||||
</field>
|
||||
|
|
|
|||
Loading…
Reference in New Issue