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

[FIX] website_sale: better grid and list displaying in mobile view

Browse Source 
issue:
* grid: overlap of the products if at least one product does not have a 1x1 size
* wrong product size for grid in small device
* long text get out the product container and hide the other informations
This commit is contained in:
Christophe Matthieu
2016-01-11 13:25:57 +01:00
parent 1195eae010
commit 8d6f89fd44
2 changed files with 51 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_sale/static/src/css/website_sale.css
+28 -23
View File
@@ -130,11 +130,8 @@
#products_grid > table tr:not(:first-child) > td {
height: 100%;
}
#products_grid.col-md-12 > table tr:not(:first-child) {
height: 150px;
}
#products_grid.col-md-9 > table tr:not(:first-child) {
height: 140px;
#products_grid.col-md-12 > table > tbody > tr > td:empty, #products_grid.col-md-9 > table > tbody > tr > td:empty {
height: 0;
}
#products_grid.col-md-12 .oe-height-1 {
height: 75px;
@@ -166,14 +163,11 @@
#products_grid.col-md-9 .oe-height-8 {
height: 560px;
}
#products_grid .oe_product.oe_grid .oe_subdescription {
max-height: 40px;
}
@media (min-width: 992px) {
#products_grid.col-md-12 > table tr:not(:first-child) {
height: 190px;
}
#products_grid.col-md-9 > table tr:not(:first-child) {
height: 144px;
}
#products_grid.col-md-12 .oe-height-1 {
height: 95px;
}
@@ -189,6 +183,9 @@
#products_grid.col-md-12 .oe-height-8 {
height: 760px;
}
#products_grid.col-md-12 .oe_product.oe_grid .oe_subdescription {
max-height: 70px;
}
#products_grid.col-md-9 .oe-height-1 {
height: 72px;
}
@@ -206,12 +203,6 @@
}
}
@media (min-width: 1200px) {
#products_grid.col-md-12 > table tr:not(:first-child) {
height: 250px;
}
#products_grid.col-md-9 > table tr:not(:first-child) {
height: 190px;
}
#products_grid.col-md-12 .oe-height-1 {
height: 125px;
}
@@ -242,6 +233,9 @@
#products_grid.col-md-9 .oe-height-8 {
height: 760px;
}
#products_grid .oe_product.oe_grid .oe_subdescription {
max-height: 120px;
}
}
@media (max-width: 768px) {
#products_grid table, #products_grid tbody, #products_grid tr, #products_grid td {
@@ -252,19 +246,30 @@
#products_grid .oe_product {
float: left;
width: 100%;
height: 300px;
display: inline-block;
}
#products_grid .oe_product.oe_grid {
height: 400px;
}
#products_grid .oe_product.oe_grid section {
background: rgba(100, 100, 100, 0.2);
}
#products_grid .oe_product .oe_subdescription {
max-height: 200px;
}
.products_pager .pagination {
margin: 5px auto !important;
}
}
@media (max-width: 400px) {
#products_grid .oe_product {
#products_grid .oe_product.oe_grid {
height: 270px;
}
#products_grid .oe_product section {
#products_grid .oe_product.oe_list {
height: 200px;
}
#products_grid .oe_product.oe_list section {
background: rgba(100, 100, 100, 0.2);
}
#products_grid .oe_product .oe_product_image {
@@ -412,7 +417,7 @@
}
option.css_not_available {
color: #cccccc;
color: #ccc;
}
label.css_not_available {
@@ -458,13 +463,13 @@ label.css_attribute_color.css_not_available {
cursor: pointer;
}
.oe_overlay_options .dropdown ul[name="size"] td.selected {
background-color: #b1d4f1;
background-color: #B1D4F1;
}
.oe_overlay_options .dropdown ul[name="size"] table.oe_hover td.selected {
background-color: transparent;
}
.oe_overlay_options .dropdown ul[name="size"] table.oe_hover td.select {
background-color: #b1d4f1;
background-color: #B1D4F1;
}
/* Wizard */
addons/website_sale/static/src/css/website_sale.sass
+23 -18
View File
@@ -123,10 +123,9 @@
#products_grid
> table tr:not(:first-child) > td
height: 100%
&.col-md-12 > table tr:not(:first-child)
height: 150px
&.col-md-9 > table tr:not(:first-child)
height: 140px
&.col-md-12, &.col-md-9
> table > tbody > tr > td:empty
height: 0
&.col-md-12
.oe-height-1
@@ -151,13 +150,11 @@
.oe-height-8
height: 560px
.oe_product.oe_grid .oe_subdescription
max-height: 40px
@media (min-width: 992px)
#products_grid
&.col-md-12 > table tr:not(:first-child)
height: 190px
&.col-md-9 > table tr:not(:first-child)
height: 144px
&.col-md-12
.oe-height-1
height: 95px
@@ -169,6 +166,9 @@
height: 570px
.oe-height-8
height: 760px
.oe_product.oe_grid .oe_subdescription
max-height: 70px
&.col-md-9
.oe-height-1
height: 72px
@@ -183,11 +183,6 @@
@media (min-width: 1200px)
#products_grid
&.col-md-12 > table tr:not(:first-child)
height: 250px
&.col-md-9 > table tr:not(:first-child)
height: 190px
&.col-md-12
.oe-height-1
height: 125px
@@ -211,6 +206,8 @@
.oe-height-8
height: 760px
.oe_product.oe_grid .oe_subdescription
max-height: 120px
@media (max-width: 768px)
#products_grid
@@ -221,8 +218,13 @@
.oe_product
float: left
width: 100%
height: 300px
display: inline-block
&.oe_grid
height: 400px
&.oe_grid section
background: rgba(100, 100, 100, 0.2)
.oe_subdescription
max-height: 200px
.products_pager
.pagination
margin: 5px auto !important
@@ -230,9 +232,12 @@
@media (max-width: 400px)
#products_grid
.oe_product
height: 270px
section
background: rgba(100, 100, 100, 0.2)
&.oe_grid
height: 270px
&.oe_list
height: 200px
section
background: rgba(100, 100, 100, 0.2)
.oe_product_image
top: 0
bottom: 65px