From 8d6f89fd442747abedcd719d2988a3664be424cc Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@odoo.com>
Date: Fri, 8 Jan 2016 13:02:38 +0100
Subject: [PATCH] [FIX] website_sale: better grid and list displaying in mobile
 view

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
---
 .../static/src/css/website_sale.css           | 51 ++++++++++---------
 .../static/src/css/website_sale.sass          | 41 ++++++++-------
 2 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index 1ccdd441200..12e95fba5d0 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -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 */
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index 117f0469aa2..2b3cc1778a8 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -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