[FIX] web_responsive: Fix several issues

* one2many tags now not hidden behind inputs.
* Drawer icons now with much better look.
* No overflow bug in small views when closing drawer.
* Documented it when resizing viewport. (+1 squashed commit)
* Whitespace cleanup.

web_app_drawer/README.rst

@@ -39,6 +39,8 @@ Known issues / Roadmap
 * Provide keyboard navigation to secondary (top) menu
 * Drag drawer from left to open in mobile
 * Figure out how to test focus on hidden elements for keyboard nav tests
+* If you resize the window, body gets a wrong ``overflow: auto`` css property
+  and you need to refresh your view or open/close the app drawer to fix that.
 
 Bug Tracker
 ===========

web_app_drawer/static/src/js/web_app_drawer.js

@@ -33,7 +33,7 @@ odoo.define('web_app_drawer', function(require) {
 
         // Prevent focus of search field on mobile devices
         toggle_visibility: function (is_visible) {
-             $('div.oe_searchview_input').last()
+            $('div.oe_searchview_input').last()
                 .one('focus', $.proxy(this.preventMobileFocus, this));
             return this._super(is_visible);
         },
@@ -172,6 +172,8 @@ odoo.define('web_app_drawer', function(require) {
             core.bus.trigger('drawer.closed');
             this.$el.one('drawer.opened', $.proxy(this.onDrawerOpen, this));
             this.isOpen = false;
+            // Remove inline style inserted by drawer.js
+            this.$el.css("overflow", "");
         },
 
         /* It finds app links and register event handlers

web_app_drawer/static/src/less/app_drawer.less

@@ -13,13 +13,11 @@
     background-clip: padding-box;
 
     .navbar-left {
-        
         width: 100%;
 
         li {
             padding: 0;
         }
-        
     }
 
     .app-drawer-title {
@@ -31,9 +29,12 @@
     }
 
     .app-drawer-icon-app {
-        height: @app-drawer-icon-size;
-        width: @app-drawer-icon-size;
-        margin: @app-drawer-icon-margin;
+        height: 100%;
+        width: 100%;
+        max-width: @app-drawer-icon-size;
+        max-height: @app-drawer-icon-size;
+        object-fit: contain;
+        object-position: center;
     }
 
     .panel-body {

web_app_drawer/static/src/less/main.less

@@ -4,6 +4,16 @@
 body {
     width: 100%;
     height: 100%;
+
+    // Do not fix the search part, it's too big for small screens
+    @media (max-width: @screen-sm-max) {
+        overflow: inherit;
+        .openerp {
+            .oe-view-manager {
+                overflow: inherit;
+            }
+        }
+    }
 }
 
 main {

web_app_drawer/static/src/less/navbar.less

@@ -27,12 +27,7 @@ a.navbar-collapse.collapse {
     overflow-x: hidden;
 }
 
-.badge {
-    position: absolute;
-    right: @app-drawer-padding-horizontal;
-}
-
-@media (max-width: @screen-sm - 1px) {
+@media (max-width: @screen-xs-max) {
     #odooMenuBarNav[aria-expanded="false"] {
         /* Hack to hide the visibly expanded mobile menu on load. */
         position: absolute;

web_app_drawer/static/src/less/variables.less

@@ -2,14 +2,12 @@
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
 // App Drawer / Icons
-
-@app-drawer-icon-size:      7em;
+@app-drawer-icon-size:      6em;
 @app-drawer-icon-margin:    1em;
 @app-drawer-width:          80%;
 @app-drawer-title-height:   @navbar-height;
 
 // Navbar
-
 @app-drawer-navbar-height:  @navbar-height / 2;
 @app-drawer-navbar-padding-vertical: @navbar-padding-vertical / 2;
 @app-drawer-padding-horizontal: @navbar-padding-horizontal / 2;

web_app_drawer/views/web.xml

@@ -41,7 +41,7 @@
                         <div class="navbar-header">
 
                             <a href="#"
-                               class="drawer-toggle pull-left navbar-collapse collapse btn btn-default app-drawer-toggle"
+                               class="drawer-toggle navbar-collapse collapse btn btn-default app-drawer-toggle"
                                accesskey="A"
                                >
                                 <span class="sr-only">Toggle App Drawer</span>
@@ -52,7 +52,7 @@
                                     class="app-drawer-toggle drawer-toggle pull-left navbar-toggle collapsed"
                                     >
                                 <span class="sr-only">Toggle App Drawer</span>
-                                <i class="fa fa-th fa-lg app-drawer-icon-open" />
+                                <div class="fa fa-th fa-lg app-drawer-icon-open" />
                             </button>
 
                             <button type="button"
@@ -214,8 +214,10 @@
                     </h4>
                 </div>
                 <div class="panel-body" id="appDrawerAppPanelBody">
-                    <ul class="nav navbar-nav navbar-left oe_application_menu_placeholder" style="display: none;">
-                        <li t-foreach="menu_data['children']" t-as="menu" class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center">
+                    <ul class="row list-unstyled oe_application_menu_placeholder"
+                        style="display: none;">
+                        <li t-foreach="menu_data['children']" t-as="menu"
+                            class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center mt16">
                             <t t-call="web.menu_link">
                                 <t t-set="display_images" t-value="1" />
                             </t>
@@ -227,10 +229,7 @@
                     </ul>
                 </div>
             </div>
-            
         </xpath>
-        
-        
     </template>
 
 </odoo>