[FIX] point_of_sale: the category list now uses less space when the categories don't have pictures, freeing some screen space on tablets

addons/point_of_sale/static/src/css/pos.css

@@ -681,18 +681,29 @@ td {
 
 .pos .categories {
     position: relative;
-    border-bottom: 1px solid #cecece;
 }
 .pos .categories h4 {
     display: inline-block;
     margin: 9px 5px;
 }
 
-.pos .category-list{
+.pos .category-list {
     text-align: left;
     padding: 10px;
     background: rgb(229, 229, 229);
+    border-bottom: 1px solid #cecece;
 }
+.pos .category-list.simple {
+    padding: 0px;
+    background: #cecece;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+    border-bottom: none;
+}
+
+
 /*  d) the category button */
 
 .pos .category-button {
@@ -714,20 +725,18 @@ td {
     position: relative;
     display: inline-block;
     font-size: 14px;
-    margin-right:10px;
+    margin-right: 1px;
+    margin-bottom: 1px;
     padding: 5px 12px;
-    line-height: 24px;
-    border-radius: 3px;
-
+    line-height: 32px;
+    flex-grow: 1;
+    -webkit-flex-grow: 1;
     cursor: pointer;
-    border: 1px solid #cacaca;
-
     background: #e2e2e2;
 }
 .pos .category-simple-button:active{
     color: white;
     background: #7f82ac;
-    border: 1px solid #7f82ac;
 
     -webkit-transition-property: background, border;
     -webkit-transition-duration: 0.2s;

addons/point_of_sale/static/src/js/widgets.js

@@ -519,9 +519,16 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
             }
 
             var list_container = el_node.querySelector('.category-list');
-            for(var i = 0, len = this.subcategories.length; i < len; i++){
-                list_container.appendChild(this.render_category(this.subcategories[i],hasimages));
-            };
+            if (list_container) { 
+                if (!hasimages) {
+                    list_container.classList.add('simple');
+                } else {
+                    list_container.classList.remove('simple');
+                }
+                for(var i = 0, len = this.subcategories.length; i < len; i++){
+                    list_container.appendChild(this.render_category(this.subcategories[i],hasimages));
+                };
+            }
 
             var buttons = el_node.querySelectorAll('.js-category-switch');
             for(var i = 0; i < buttons.length; i++){