Permalink
Browse files

change liste design and reactive the design with snippet

  • Loading branch information...
qha-odoo committed Nov 7, 2018
1 parent 5341683 commit f04b8192f6776183494acdae09eaca6f310b8aa9
@@ -247,12 +247,10 @@ sAnimations.registry.WebsiteSale = sAnimations.Class.extend(ProductConfiguratorM
// $(this).parents('.container').find('.oe_list').css('max-width', $normalWidth + '%');
// });
// }
// if($('.oe_list').hasClass('o_grid_products_list')){
// $('.o_apply_list').addClass('o_semi_opacity');
// $('.o_apply_grid').removeClass('o_semi_opacity');
// $('.o_choose_column').show();
// $('.o_very_big').hide();
// }
if($('.oe_list').hasClass('o_grid_products_list')){
$('.o_apply_list').addClass('o_semi_opacity');
$('.o_apply_grid').removeClass('o_semi_opacity');
}
// find the biggest div to apply a *2 after
// var $productList = $('.o_grid_products_list');
@@ -268,30 +266,27 @@ sAnimations.registry.WebsiteSale = sAnimations.Class.extend(ProductConfiguratorM
// $productList.css('height', $biggestProductHeight + 'px');
// Liste view
// $('.o_apply_list').click(function(){
// var $parentContainer = $(this).parents('.container');
$('.o_apply_list').click(function(){
var $parentContainer = $(this).parents('.container');
// $(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').css('height', 'auto');
// $parentContainer.find('.o_choose_column').hide();
// $parentContainer.find('.oe_list').css('max-width', '100%');
// });
$(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('.o_info_product_container').addClass('o_height_line');
});
// grid view
// $('.o_apply_grid').click(function(){
// var $parentContainer = $(this).parents('.container');
$('.o_apply_grid').click(function(){
var $parentContainer = $(this).parents('.container');
// $(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('.o_choose_column').show();
// $parentContainer.find('.oe_list').css('max-width', '31%');
// $parentContainer.find('.o_choose_column span').removeClass('active');
// $parentContainer.find('.o_choose_column .o_btn_col_3').addClass('active');
// $parentContainer.find('.o_big').show();
// $parentContainer.find('.o_very_big').hide();
// });
$(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('.o_info_product_container').removeClass('o_height_line');
});
// general change in 2_3_4 columns on the select
// $('.o_btn_col_2').click(function(){
@@ -55,15 +55,15 @@
position: relative;
.o_product_image {
/*position: absolute;*/
/*left: 15px;*/
/*right: 15px;*/
/*top: 15px;*/
/*bottom: 55px;*/
/*height: 130px;*/
/*text-align: center;*/
/*img {
/*position: absolute;
left: 15px;
right: 15px;
top: 15px;
bottom: 55px;
height: 130px;*/
text-align: center;
img {
max-width: 100%;
max-height: 100%;
margin: auto;
@@ -73,21 +73,21 @@
bottom: 0;
right: 0;
z-index: 4;
}*/
}
}
/*section {
position: absolute;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 0 15px 24px 10px;
min-height: 56px;
border-top: 1px solid rgba(255,255,255,0.2);
background: rgba(255, 255, 255, 0.75);
z-index: 5;
}*/
/*section {*/
/*position: absolute;*/
/*left: 0;*/
/*right: 0;*/
/*bottom: 0;*/
/*overflow: hidden;*/
/*padding: 0 15px 24px 10px;*/
/*min-height: 56px;*/
/*border-top: 1px solid rgba(255,255,255,0.2);*/
/*background: rgba(255, 255, 255, 0.75);*/
/*z-index: 5;*/
/*}*/
/*.product_price {
padding: 5px 0;
@@ -99,6 +99,7 @@
position: relative;
width: 100%;
height: 100%;
padding: 20px 35px;
}
.oe_subdescription {
@@ -280,12 +281,6 @@
.oe-height-2 {
height: 400px;
/*.o_product_image{
height: 170px;
}
.o_info_product_container{
height: 210px;
}*/
}
.oe-height-4 {
@@ -724,9 +719,6 @@ a.no-decoration {
box-shadow: 0 0 5px 10px rgba(240,8,0,0.4)!important;
}
/*TEST 3*/
#wrapwrap{
background-color: $gray-200;
}
@@ -755,12 +747,10 @@ a.no-decoration {
}
.o_product_image{
display: block;
width: 100%;
height: 130px;
height: 170px;
background-size: cover;
background-position: center;
max-width: 100%;
/*flex: none;*/
padding: 0;
}
@@ -793,6 +783,7 @@ a.no-decoration {
.oe_product_cart{
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .02);
transition: .4s ease;
padding: 10px 20px;
}
form{
width: 100%;
@@ -812,7 +803,7 @@ a.no-decoration {
display: block;
padding: 10px 10%;
text-align: center;
height: 215px;
height: 200px;
}
.o_published_btn{
top: 0;
@@ -879,3 +870,7 @@ a.no-decoration {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.o_height_line{
height: auto !important;
}
@@ -103,9 +103,9 @@
<!-- <div t-if="" class="o_added_to_cart rounded">
<i class="fa fa-shopping-cart text-white"/>
</div> -->
<a itemprop="url" t-att-href="product_href" class="col-5 col-md-3 o_product_image rounded" t-attf-style="background-image: url('{{request.httprequest.url_root}}web/image/product.template/{{product.id}}/image');">
<a itemprop="url" t-att-href="product_href" class="col-5 col-md-3 o_product_image rounded"> <!-- t-attf-style="background-image: url('{{request.httprequest.url_root}}web/image/product.template/{{product.id}}/image');" -->
<!-- <a itemprop="url" t-att-href="product_href" > -->
<!-- <span itemprop="image" t-attf-content="{{request.httprequest.url_root}}web/image/product.template/{{product.id}}/image" t-field="product.image" t-options="{'widget': 'image', 'resize': None if product_image_big else '300x300', 'zoom': 'image'}" t-att-alt="product.name" /> -->
<span itemprop="image" t-attf-content="{{request.httprequest.url_root}}web/image/product.template/{{product.id}}/image" t-field="product.image" t-options="{'widget': 'image', 'resize': None if product_image_big else '300x300', 'zoom': 'image'}" t-att-alt="product.name" />
<!-- </a> -->
</a>
<section class="col-7 o_info_product_container d-flex flex-wrap align-items-center">
@@ -127,53 +127,15 @@
</div>
</b>
</div>
<!-- <span t-field="product.attributes_ids" class="col-6 px-0"></span> -->
</div>
</section>
<!-- To left -->
<!-- <t t-if="not request.env.user.has_group('base.group_public') ">
<div class="dropdown o_grid_dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-th-large"/>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<span class="dropdown-item o_little" href="#">1 column</span>
<span class="dropdown-item o_medium" href="#">2 columns</span>
<span class="dropdown-item o_big" href="#">3 columns</span>
<span class="dropdown-item o_very_big" href="#">4 columns</span>
</div>
</div>
</t> -->
<t t-if="show_publish">
<div id="website_published_button" class="o_published_btn px-0" groups="sales_team.group_sale_manager">
<t t-call="website.publish_management">
<t t-set="object" t-value="product" />
<t t-set="publish_edit" t-value="True" />
<t t-set="action" t-value="'product.product_template_action'" />
</t>
<div class="float-right mr-2">
<!-- To right -->
<div class="dropdown o_grid_dropdown ml-2">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-arrows-h"/> <span>Width</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<span class="dropdown-item o_little" href="#">1 column</span>
<span class="dropdown-item o_medium" href="#">2 columns</span>
<span class="dropdown-item o_big" href="#">3 columns</span>
<span class="dropdown-item o_very_big" href="#">4 columns</span>
</div>
</div>
<div class="dropdown o_grid_dropdown ml-2">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-arrows-v"/> <span>Height</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<span class="dropdown-item o_little_line" href="#">1 line</span>
<span class="dropdown-item o_big_line" href="#">2 lines</span>
</div>
</div>
</div>
</div>
</t>
</div>
@@ -283,7 +245,7 @@
<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 col-3 oe_list p-2 oe-height-#{td_product['y']*2} #{ td_product['class'] }">
<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" />
@@ -455,13 +417,46 @@
<template id="products_list_view" inherit_id="website_sale.products" active="False" customize_show="True" name="List View">
<xpath expr="//div[@id='products_grid']//div" position="replace">
<t t-foreach="products" t-as="product">
<div class="oe_product oe_list oe_product_cart border-0 col-12 mb-3" t-att-data-publish="product.website_published and 'on' or 'off'"> <!-- o_grid_products_list -->
<!-- <t t-foreach="products" t-as="product">
<div class="oe_product oe_list oe_product_cart border-0 col-12 mb-3" 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>
</t> -->
<div id="wrap" class="js_sale">
<div class="oe_structure" id="oe_structure_website_sale_products_1"/>
<div class="container py-2 oe_website_sale">
<div class="row">
<div class="d-none" id="products_grid_before"></div>
<div class="col-lg-12" id="products_grid">
<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 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" />
</div>
</div>
</t>
<div t-if="not td_product" class="oe-height-2" />
</t>
</t>
</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>
</xpath>
</template>

0 comments on commit f04b819

Please sign in to comment.