From c23be8917c4da41853feea3cb1e3fd27afad2c1f Mon Sep 17 00:00:00 2001
From: Nicolas Lempereur <nle@odoo.com>
Date: Thu, 21 Jan 2016 14:01:43 +0100
Subject: [PATCH] [IMP] point_of_sale: limit categories height to 60%

When categories on the point of sale take too much height, the product
and overflown categories are not visible.

In those instance Odoo wizards would usually:

- use an option to have small categories without pictures,

- have a category "all" with all the product,

- do a custom change to reduce the size of categories or add a scrollbar

This commit add the last customization in stable.

If the category block is bigger than 60% of the page height, the
categories are cropped and a scrollbar is added.

closes #10588

opw-660383
---
 addons/point_of_sale/static/src/css/pos.css | 13 +++++++++++++
 addons/point_of_sale/static/src/xml/pos.xml |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index b301995fb95..cdc92f94def 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -885,7 +885,20 @@ td {
     display: inline-block;
     margin: 9px 5px;
 }
+.pos .category-list-scroller{
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+    width:100%;
+    height:100%;
+    max-height:60vh;
+    overflow: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-transform: translate3d(0,0,0);
 
+}
 .pos .category-list {
     text-align: left;
     padding: 10px;
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index f15174bbf6c..7d2aa8dd192 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -194,7 +194,9 @@
         </header>
         <t t-if="widget.subcategories.length > 0">
             <div class="categories">
-                <div class="category-list">
+                <div class="category-list-scroller touch-scrollable">
+                    <div class="category-list">
+                    </div>
                 </div>
             </div>
         </t>