pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website_sale: adapt design to make it work on all browsers

Browse Source 
Part of https://github.com/odoo/odoo/pull/31147
task-1925327
This commit is contained in:
qsm-odoo
2019-05-28 15:05:42 +00:00
parent 900b765b43
commit 1f1edd2432
2 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_sale/static/src/scss/website_sale.scss
+18 -20
View File
@@ -9,10 +9,6 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
display: block;
width: 100%;
}
.o_wsale_products_grid_table_wrapper {
margin: 0;
}
}
.oe_website_sale {
@@ -155,15 +151,13 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
// Options relative to where the product card is put
.oe_product {
position: relative;
// Image full option
&.oe_image_full {
.oe_product_image {
@include border-bottom-radius($card-inner-border-radius);
}
.o_wsale_product_information {
@include o-position-absolute(auto, 0, 0, 0);
@include o-position-absolute(auto, 0, 0, 0); // The wrapper is always relatively positioned
}
}
@@ -176,10 +170,6 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
#products_grid {
.table {
table-layout: fixed;
@if $o-wsale-products-layout-grid-gutter-width > 0 {
border-collapse: separate;
border-spacing: $o-wsale-products-layout-grid-gutter-width;
}
td {
margin-top: $o-wsale-products-layout-grid-gutter-width; // For list and mobile design
@@ -193,17 +183,20 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
margin-top: 0; // For list and mobile design
}
.o_wsale_product_grid_filler {
.o_wsale_product_grid_wrapper {
position: relative;
@for $x from 1 through 4 {
@for $y from 1 through 4 {
&.o_wsale_product_grid_filler_#{$x}_#{$y} {
&.o_wsale_product_grid_wrapper_#{$x}_#{$y} {
padding-top: 100% * $o-wsale-products-layout-grid-ratio * $y / $x;
}
}
}
+ * {
@include o-position-absolute(0, 0, 0, 0);
> * {
$-pos: ($o-wsale-products-layout-grid-gutter-width / 2);
@include o-position-absolute($-pos, $-pos, $-pos, $-pos);
@if $o-wsale-products-layout-grid-gutter-width <= 0 {
&.card {
@@ -226,13 +219,13 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
// Note: a possible layout could also be ok by removing the wrapper
// related spacings and setting a background to it, thus including the
// outer border spacing as part of the design.
margin: -$o-wsale-products-layout-grid-gutter-width;
margin: (-$o-wsale-products-layout-grid-gutter-width / 2);
}
@include media-breakpoint-down(sm) {
@include wsale-break-table-to-list();
.o_wsale_product_grid_filler {
.table .o_wsale_product_grid_wrapper {
padding-top: 100% !important;
}
}
@@ -241,10 +234,15 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
@include media-breakpoint-up(sm) {
@include wsale-break-table-to-list();
.o_wsale_product_grid_filler {
display: none;
.o_wsale_products_grid_table_wrapper {
margin: 0;
}
+ * {
.table .o_wsale_product_grid_wrapper {
padding-top: 0 !important;
> * {
@include o-position-absolute(0, 0, 0, 0);
position: relative;
}
}
addons/website_sale/views/templates.xml
+5 -4
View File
@@ -239,10 +239,11 @@
<td 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 #{td_product['class']}">
<div t-attf-class="o_wsale_product_grid_filler o_wsale_product_grid_filler_#{td_product['x']}_#{td_product['y']}"/>
<t t-call="website_sale.products_item">
<t t-set="product_image_big" t-value="td_product['x'] + td_product['y'] &gt; 2"/>
</t>
<div t-attf-class="o_wsale_product_grid_wrapper o_wsale_product_grid_wrapper_#{td_product['x']}_#{td_product['y']}">
<t t-call="website_sale.products_item">
<t t-set="product_image_big" t-value="td_product['x'] + td_product['y'] &gt; 2"/>
</t>
</div>
</td>
</t>
<td t-else=""/>