From 1bf0661f69bef19a000a59516c3fa83376d477e8 Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@openerp.com>
Date: Wed, 10 Jul 2013 15:11:11 +0200
Subject: [PATCH] [IMP] website_sale: css

bzr revid: chm@openerp.com-20130710131111-7ll30ij7279ubcpu
---
 addons/website_sale/static/src/css/Makefile   |   2 +
 .../website_sale/static/src/css/ecommerce.css | 113 ++++++++++++------
 .../static/src/css/ecommerce.sass             |  92 +++++++++-----
 addons/website_sale/views/ecommerce.xml       |  38 +++---
 4 files changed, 160 insertions(+), 85 deletions(-)
 create mode 100644 addons/website_sale/static/src/css/Makefile

diff --git a/addons/website_sale/static/src/css/Makefile b/addons/website_sale/static/src/css/Makefile
new file mode 100644
index 00000000000..6bbc7aa45e7
--- /dev/null
+++ b/addons/website_sale/static/src/css/Makefile
@@ -0,0 +1,2 @@
+sass:
+	sass --compass --trace -t expanded ecommerce.sass ecommerce.css
diff --git a/addons/website_sale/static/src/css/ecommerce.css b/addons/website_sale/static/src/css/ecommerce.css
index 048a48b8841..a62f1762906 100644
--- a/addons/website_sale/static/src/css/ecommerce.css
+++ b/addons/website_sale/static/src/css/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);
diff --git a/addons/website_sale/static/src/css/ecommerce.sass b/addons/website_sale/static/src/css/ecommerce.sass
index bc715050922..fd99f35ffcc 100644
--- a/addons/website_sale/static/src/css/ecommerce.sass
+++ b/addons/website_sale/static/src/css/ecommerce.sass
@@ -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
diff --git a/addons/website_sale/views/ecommerce.xml b/addons/website_sale/views/ecommerce.xml
index 4ec8cd8b0cd..3b72e668b5c 100644
--- a/addons/website_sale/views/ecommerce.xml
+++ b/addons/website_sale/views/ecommerce.xml
@@ -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>