Permalink
Browse files

Following design and responsive, add the show number product (not act…

…ivate)
  • Loading branch information...
qha-odoo committed Nov 8, 2018
1 parent 0368bb4 commit 23d1f0b3f7c67821593f30361d24125c93b67936
@@ -250,6 +250,9 @@ sAnimations.registry.WebsiteSale = sAnimations.Class.extend(ProductConfiguratorM
if($('.oe_list').hasClass('o_grid_products_list')){
$('.o_apply_list').addClass('o_semi_opacity');
$('.o_apply_grid').removeClass('o_semi_opacity');
} else {
$('.o_product_image').addClass('o_height_170');
$('.o_info_product_container').addClass('o_height_line');
}
// find the biggest div to apply a *2 after
@@ -272,8 +275,8 @@ sAnimations.registry.WebsiteSale = sAnimations.Class.extend(ProductConfiguratorM
$(this).parent().children('.o_apply_grid').addClass('o_semi_opacity');
$(this).removeClass('o_semi_opacity');
$parentContainer.find('.oe_list').removeClass('o_grid_products_list');
$parentContainer.find('.oe_list').addClass('col-12 o_height_line');
$parentContainer.find('.o_product_image').addClass('o_height_line');
$parentContainer.find('.oe_list').addClass('col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 o_height_line'); /*col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12*/
$parentContainer.find('.o_product_image').addClass('o_height_170');
$parentContainer.find('.o_info_product_container').addClass('o_height_line');
});
// grid view
@@ -283,8 +286,8 @@ sAnimations.registry.WebsiteSale = sAnimations.Class.extend(ProductConfiguratorM
$(this).parent().children('.o_apply_list').addClass('o_semi_opacity');
$(this).removeClass('o_semi_opacity');
$parentContainer.find('.oe_list').addClass('o_grid_products_list');
$parentContainer.find('.oe_list').removeClass('col-12 o_height_line');
$parentContainer.find('.o_product_image').removeClass('o_height_line');
$parentContainer.find('.oe_list').removeClass('col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 o_height_line');/*col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12*/
$parentContainer.find('.o_product_image').removeClass('o_height_170');
$parentContainer.find('.o_info_product_container').removeClass('o_height_line');
});
@@ -173,101 +173,102 @@
}
}
&.col-lg-12 {
&.col-lg-12, &.col-lg-9 {
.oe-height-1 {
height: 75px;
}
.oe-height-2 {
height: 150px;
}
.oe-height-4 {
height: 300px;
}
.oe-height-6 {
height: 450px;
}
.oe-height-8 {
height: 600px;
}
}
&.col-lg-9 {
.oe-height-1 {
height: 70px;
}
height: 125px;
}
.oe-height-2 {
height: 140px;
height: 350px;
.o_product_image{
height: 130px;
}
.o_info_product_container{
height: 180px;
}
}
.oe-height-4 {
height: 280px;
height: 700px;
.o_product_image{
height: 390px;
}
.o_info_product_container{
height: 280px;
}
}
.oe-height-6 {
height: 420px;
height: 1050px;
.o_product_image{
height: 550px;
}
.o_info_product_container{
height: 457px;
}
}
.oe-height-8 {
height: 560px;
height: 1400px;
.o_product_image{
height: 780px;
}
.o_info_product_container{
height: 560px;
}
}
}
.oe_product.oe_grid .oe_subdescription {
max-height: 40px;
}
}
@include media-breakpoint-up(lg) {
@include media-breakpoint-up(md) {
#products_grid {
&.col-lg-12 {
.oe-height-1 {
height: 95px;
}
.oe-height-2 {
height: 190px;
}
.oe-height-4 {
height: 380px;
}
.oe-height-6 {
height: 570px;
}
.oe-height-8 {
height: 760px;
}
.oe_product.oe_grid .oe_subdescription {
max-height: 70px;
}
}
&.col-lg-9 {
.oe-height-1 {
height: 72px;
height: 95px;
}
.oe-height-2 {
height: 144px;
height: 440px;
.o_product_image {
height: 150px;
}
.o_info_product_container {
height: 240px;
}
}
.oe-height-4 {
height: 288px;
height: 880px;
.o_product_image {
height: 440px;
}
.o_info_product_container {
height: 380px;
}
}
.oe-height-6 {
height: 432px;
height: 1320px;
.o_product_image {
height: 640px;
}
.o_info_product_container {
height: 630px;
}
}
.oe-height-8 {
height: 576px;
height: 1760px;
.o_product_image{
height: 880px;
}
.o_info_product_container {
height: 700px;
}
}
}
}
@@ -320,25 +321,49 @@
}
.oe-height-2 {
height: 190px;
height: 370px;
.o_product_image{
height: 150px;
}
.o_info_product_container{
height: 180px;
}
}
.oe-height-4 {
height: 380px;
height: 740px;
.o_product_image{
height: 330px;
}
.o_info_product_container{
height: 350px;
}
}
.oe-height-6 {
height: 570px;
height: 1110px;
.o_product_image{
height: 500px;
}
.o_info_product_container{
height: 500px;
}
}
.oe-height-8 {
height: 760px;
height: 1480px;
.o_product_image{
height: 700px;
}
.o_info_product_container{
height: 620px;
}
}
}
.oe_product.oe_grid .oe_subdescription {
/*.oe_product.oe_grid .oe_subdescription {
max-height: 120px;
}
}*/
}
}
/*@include media-breakpoint-down(sm) {
@@ -873,4 +898,7 @@ a.no-decoration {
.o_height_line{
height: auto !important;
}
.o_height_170{
height: 170px !important;
}
@@ -210,51 +210,43 @@
<span class="btn btn-primary border-right o_apply_grid o_semi_opacity" title="Grid"><i class="fa fa-th-large"/></span>
<span class="btn btn-primary border-left o_apply_list" title="List"><i class="fa fa-th-list"/></span>
</div>
</div>
<div t-if="not request.env.user.has_group('base.group_public') " class="my-3 text-center o_choose_column mx-auto">
<span class="o_btn_col_2">2 columns</span> | <span class="o_btn_col_3 active">3 columns</span> | <span class="o_btn_col_4">4 columns</span>
<!-- NEED TO ACTIVATE -->
<div class="dropdown ml-2">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Show
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">12</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">32</a>
<a class="dropdown-item" href="#">64</a>
<a class="dropdown-item" href="#">All</a>
</div>
</div>
</div>
<div class="row">
<div class="d-none" id="products_grid_before"></div>
<div class="col-lg-12" id="products_grid">
<!-- <div class="col-12 px-0 ">
<t t-foreach="products" t-as="product">
<div class="oe_product oe_list oe_product_cart border-0 col-12 mb-3 o_grid_products_list" t-att-data-publish="product.website_published and 'on' or 'off'">
<t t-call="website_sale.products_item">
<t t-set="show_publish" t-value="True" />
</t>
</div>
</t>
</div>
<t t-if="not bins">
<div class="text-center text-muted oe_product">
<h3 class="css_editable_display mt8">No product defined.</h3>
<t t-if="search">
<p>
No results found for "<strong t-esc='search'/>".
</p>
</t>
<p groups="sales_team.group_sale_manager">Click <i>'New'</i> in the top-right corner to create your first product.</p>
<div>
<div t-ignore="true">
<td t-foreach="range(0,rows)" t-as="row" t-attf-width="#{100/rows}%"></td>
</div>
</t> -->
<div width="100%">
<div t-ignore="true">
<td t-foreach="range(0,rows)" t-as="row" t-attf-width="#{100/rows}%"></td>
</div>
<t t-foreach="bins" t-as="tr_product">
<t t-foreach="tr_product" t-as="td_product">
<t t-if="td_product">
<t t-set="product" t-value="td_product['product']" />
<div t-att-colspan="td_product['x'] != 1 and td_product['x']" t-att-rowspan="td_product['y'] != 1 and td_product['y']" t-attf-class="oe_product oe_grid o_grid_products_list oe_list p-2 oe-height-#{td_product['y']*2} #{ td_product['class'] } col-#{td_product['x']*3}">
<div class="oe_product_cart bg-white rounded" t-att-data-publish="product.website_published and 'on' or 'off'">
<t t-set="product_image_big" t-value="td_product['x']+td_product['y'] &gt; 2" />
<t t-call="website_sale.products_item" />
</div>
<t t-foreach="bins" t-as="tr_product">
<t t-foreach="tr_product" t-as="td_product">
<t t-if="td_product">
<t t-set="product" t-value="td_product['product']" />
<div t-att-colspan="td_product['x'] != 1 and td_product['x']" t-att-rowspan="td_product['y'] != 1 and td_product['y']" t-attf-class="oe_product oe_grid o_grid_products_list oe_list p-2 oe-height-#{td_product['y']*2} #{ td_product['class'] } col-xl-#{td_product['x']*3} col-lg-#{td_product['x']*4} col-md-#{td_product['x']*6} col-#{td_product['x']*12}">
<div class="oe_product_cart bg-white rounded" t-att-data-publish="product.website_published and 'on' or 'off'">
<t t-set="product_image_big" t-value="td_product['x']+td_product['y'] &gt; 2" />
<t t-call="website_sale.products_item">
<t t-set="show_publish" t-value="True" />
</t>
</div>
</t>
<div t-if="not td_product" class="oe-height-2" />
</div>
</t>
<div t-if="not td_product" class="oe-height-2" />
</t>
</t>
</div>
</div>
</div>
@@ -441,7 +433,10 @@
<div t-att-colspan="td_product['x'] != 1 and td_product['x']" t-att-rowspan="td_product['y'] != 1 and td_product['y']" t-attf-class="oe_product oe_grid oe_list p-2 oe-height-#{td_product['y']*2} #{ td_product['class'] } col-#{td_product['x']*3} col-12 o_height_line">
<div class="oe_product_cart bg-white rounded" t-att-data-publish="product.website_published and 'on' or 'off'">
<t t-set="product_image_big" t-value="td_product['x']+td_product['y'] &gt; 2" />
<t t-call="website_sale.products_item" />
<!-- <t t-call="website_sale.products_item" /> -->
<t t-call="website_sale.products_item">
<t t-set="show_publish" t-value="True" />
</t>
</div>
</div>
</t>
@@ -451,9 +446,6 @@
</div>
</div>
</div>
<div class="products_pager form-inline justify-content-center mt-3">
<t t-call="website.pager"/>
</div>
</div>
<div class="oe_structure mb32" id="oe_structure_website_sale_products_2"/>
</div>

0 comments on commit 23d1f0b

Please sign in to comment.