[FIX] website: css for grid

bzr revid: chm@openerp.com-20130814090723-joipibbbz0x5k77y
This commit is contained in:
Christophe Matthieu 2013-08-14 11:07:23 +02:00
parent ddf32f4f9e
commit 2d1ec50f37
5 changed files with 76 additions and 83 deletions

View File

@ -6,40 +6,6 @@
*
*/
/* ----- GENERIC LAYOUTING HELPERS ---- */
/* Grid of unequally tall elements */
.grid > [class*="span"] {
display: inline-block;
float: none;
vertical-align: top;
margin-right: -4px;
box-sizing: border-box;
}
.grid > [class*="span"].grid-align-top > [class*="span"] {
vertical-align: top;
}
.grid > [class*="span"].grid-align-middle > [class*="span"] {
vertical-align: middle;
}
.grid > [class*="span"].grid-align-bottom > [class*="span"] {
vertical-align: bottom;
}
/* Table with two collumns aligned on the center */
.table-equalized {
width: 100%;
}
.table-equalized td:first-child {
width: 50%;
text-align: right;
padding-right: 1em;
vertical-align: bottom;
}
.table-equalized td:last-child {
width: 50%;
text-align: left;
vertical-align: bottom;
}
/* Theming pagination inside navbar */
.navbar-inner > .pagination {
margin: 6px 0;

View File

@ -10,33 +10,6 @@
/* ----- GENERIC LAYOUTING HELPERS ---- */
/* Grid of unequally tall elements */
.grid > [class*="span"]
display: inline-block
float: none
vertical-align: top
margin-right: -4px
box-sizing: border-box
&.grid-align-top > [class*="span"]
vertical-align: top
&.grid-align-middle > [class*="span"]
vertical-align: middle
&.grid-align-bottom > [class*="span"]
vertical-align: bottom
/* Table with two collumns aligned on the center */
.table-equalized
width: 100%
td:first-child
width: 50%
text-align: right
padding-right: 1em
vertical-align: bottom
td:last-child
width: 50%
text-align: left
vertical-align: bottom
/* Theming pagination inside navbar */
.navbar-inner > .pagination
margin: 6px 0

View File

@ -79,6 +79,40 @@
margin-bottom: 0px !important;
}
/* Grid of unequally tall elements */
.grid > [class*="span"] {
display: inline-block;
float: none;
vertical-align: top;
margin-right: -4px;
box-sizing: border-box;
}
.grid > [class*="span"].grid-align-top > [class*="span"] {
vertical-align: top;
}
.grid > [class*="span"].grid-align-middle > [class*="span"] {
vertical-align: middle;
}
.grid > [class*="span"].grid-align-bottom > [class*="span"] {
vertical-align: bottom;
}
/* Table with two collumns aligned on the center */
.table-equalized {
width: 100%;
}
.table-equalized td:first-child {
width: 50%;
text-align: right;
padding-right: 1em;
vertical-align: bottom;
}
.table-equalized td:last-child {
width: 50%;
text-align: left;
vertical-align: bottom;
}
/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
html, body {
height: 100%;

View File

@ -49,6 +49,33 @@
.mb0
margin-bottom: 0px !important
/* Grid of unequally tall elements */
.grid > [class*="span"]
display: inline-block
float: none
vertical-align: top
margin-right: -4px
box-sizing: border-box
&.grid-align-top > [class*="span"]
vertical-align: top
&.grid-align-middle > [class*="span"]
vertical-align: middle
&.grid-align-bottom > [class*="span"]
vertical-align: bottom
/* Table with two collumns aligned on the center */
.table-equalized
width: 100%
td:first-child
width: 50%
text-align: right
padding-right: 1em
vertical-align: bottom
td:last-child
width: 50%
text-align: left
vertical-align: bottom
/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
html,body

View File

@ -100,10 +100,21 @@
</div>
<div class="span8">
<div class='row grid grid-align-top'>
<t t-foreach="products" t-as="product">
<t t-set="quantity" t-value="1"/>
<t t-call="website_sale.product_card"/>
</t>
<div t-foreach="products" t-as="product" class="oe_product span2 mb16 thumbnail text-center">
<a t-att-href="'/shop/product/%%s/' %% product.id">
<h5 t-field="product.name"> </h5>
</a>
<a t-att-href="'/shop/product/%%s/' %% product.id">
<img class="img-rounded" t-att-src="'data:image/png;base64,' + product.image"/>
</a>
<div>
<div t-field="product.description_sale"></div>
<div><span t-field="product.list_price"></span></div>
<div class="mb8 mt8">
<a t-att-href="'./add_cart/%s/' % product.id" class="btn btn-small btn-success">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="span8 offset4 text-center">
@ -113,24 +124,6 @@
</t>
</template>
<template id="product_card">
<div class="oe_product span2 mb16 thumbnail text-center">
<a t-att-href="'/shop/product/%%s/' %% product.id">
<h5 t-field="product.name"> </h5>
</a>
<a t-att-href="'/shop/product/%%s/' %% product.id">
<img class="img-rounded" t-att-src="'data:image/png;base64,' + product.image"/>
</a>
<div>
<div t-field="product.description_sale"></div>
<div><span t-field="product.list_price"></span></div>
<div class="mb8 mt8">
<a t-att-href="'./add_cart/%s/' % product.id" class="btn btn-small btn-success">Add to cart</a>
</div>
</div>
</div>
</template>
<!-- product -->
<template id="product" name="Product">