[IMP] better layout with pure css for web client

this patch removes javascript calls to adjust the layout.  It manages
to do the correct layout with only css, which will correct quite a few
issues.

5 files changed, 39 insertions, 34 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 461684faf5f..07dbc812c29 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1147,13 +1147,21 @@
   position: relative;
   height: 100%;
 }
-.openerp .oe_application > div > .oe_view_manager > .oe_view_manager_body {
+.openerp .oe_application > div > .oe_view_manager > .oe_view_manager_wrapper {
+  display: table-row;
+  height: 100%;
+}
+.openerp .oe_application > div > .oe_view_manager > .oe_view_manager_wrapper > div {
+  position: relative;
+  height: 100%;
+}
+.openerp .oe_application > div > .oe_view_manager > .oe_view_manager_wrapper > div > .oe_view_manager_body {
   position: absolute;
-  overflow: auto;
-  top: 66px;
+  top: 0;
   bottom: 0;
   left: 0;
   right: 0;
+  overflow: auto;
 }
 .openerp .oe_application .oe_breadcrumb_item:not(:last-child) {
   max-width: 7em;
@@ -1352,6 +1360,7 @@
   height: 100%;
 }
 .openerp .oe_view_manager_current > .oe_view_manager_header {
+  display: table-row;
   border-bottom: 1px solid #cacaca;
   background-color: #ededed;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 4baddd7d862..e8cea79abbe 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -961,13 +961,20 @@ $sheet-padding: 16px
             position: relative
             height: 100%
             > .oe_view_manager
-                > .oe_view_manager_body
-                    position: absolute
-                    overflow: auto
-                    top: 66px
-                    bottom: 0
-                    left: 0
-                    right: 0
+                > .oe_view_manager_wrapper
+                    display: table-row
+                    height: 100%
+                    > div
+                        position: relative
+                        height: 100%
+                        > .oe_view_manager_body
+                            position: absolute
+                            top: 0
+                            bottom: 0
+                            left: 0
+                            right: 0
+                            overflow: auto
+
 
         .oe_breadcrumb_item:not(:last-child)
             max-width: 7em
@@ -1127,6 +1134,7 @@ $sheet-padding: 16px
     .oe_view_manager_current
         height: 100%
         > .oe_view_manager_header
+            display: table-row
             border-bottom: 1px solid #cacaca
             @include vertical-gradient(#fcfcfc, #dedede)
             @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
diff --git a/addons/web/static/src/js/search.js b/addons/web/static/src/js/search.js
index f800a5ab42d..5653447566b 100644
--- a/addons/web/static/src/js/search.js
+++ b/addons/web/static/src/js/search.js
@@ -406,8 +406,7 @@ instance.web.SearchView = instance.web.Widget.extend(/** @lends instance.web.Sea
         this.query = new my.SearchQuery()
                 .on('add change reset remove', this.proxy('do_search'))
                 .on('change', this.proxy('renderChangedFacets'))
-                .on('add reset remove', this.proxy('renderFacets'))
-                .on('add change reset remove', this.proxy('adjust_view_top'));
+                .on('add reset remove', this.proxy('renderFacets'));
 
         if (this.options.hidden) {
             this.$el.hide();
@@ -441,7 +440,6 @@ instance.web.SearchView = instance.web.Widget.extend(/** @lends instance.web.Sea
             view_manager.on('switch_mode', this, function (e) {
                 self.drawer.toggle(e === 'graph');
             });
-            $(window).resize(this.proxy("adjust_view_top"));
         }
         return $.when(p, this.ready);
     },
@@ -642,18 +640,6 @@ instance.web.SearchView = instance.web.Widget.extend(/** @lends instance.web.Sea
         });
     },
 
-    // hack to adjust the top of the view body to the actual header height
-    // the best way would be to do that with pure css, but this cannot be done
-    // without giving up IE9 support (flexbox/grid) or without reworking the 
-    // full client structure (switching from tables to a sane responsive layout with
-    // divs).
-    adjust_view_top: function () { 
-        if (this.$view_manager_header.length) {
-            var height = this.$view_manager_header[0].offsetHeight + 1;
-            this.$view_manager_header.next().css('top', height + 'px');
-        }
-    },
-
     search_view_loaded: function(data) {
         var self = this;
         this.fields_view = data;
diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js
index ba63318e52e..19597add308 100644
--- a/addons/web/static/src/js/views.js
+++ b/addons/web/static/src/js/views.js
@@ -115,7 +115,6 @@ instance.web.ActionManager = instance.web.Widget.extend({
         item.show(subindex);
         this.inner_widget = item.widget;
         this.inner_action = item.action;
-        item.widget.searchview.adjust_view_top();
         return true;
     },
     clear_breadcrumbs: function() {
@@ -647,7 +646,7 @@ instance.web.ViewManager =  instance.web.Widget.extend({
             _.each(_.keys(self.views), function(view_name) {
                 var controller = self.views[view_name].controller;
                 if (controller) {
-                    var container = self.$el.find("> .oe_view_manager_body > .oe_view_manager_view_" + view_name);
+                    var container = self.$el.find("> div > div > .oe_view_manager_body > .oe_view_manager_view_" + view_name);
                     if (view_name === view_type) {
                         container.show();
                         controller.do_show(view_options || {});
@@ -690,7 +689,7 @@ instance.web.ViewManager =  instance.web.Widget.extend({
         controller.on('switch_mode', self, this.switch_mode);
         controller.on('previous_view', self, this.prev_view);
         
-        var container = this.$el.find("> .oe_view_manager_body > .oe_view_manager_view_" + view_type);
+        var container = this.$el.find("> div > div > .oe_view_manager_body > .oe_view_manager_view_" + view_type);
         var view_promise = controller.appendTo(container);
         this.views[view_type].controller = controller;
         this.views[view_type].deferred.resolve(view_type);
@@ -1085,7 +1084,6 @@ instance.web.ViewManagerAction = instance.web.ViewManager.extend({
                 view_manager: self
             }));
             self.set_title();
-            self.searchview.adjust_view_top();
         });
     },
     do_create_view: function(view_type) {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index f3de92e0a0f..7055732a8da 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -522,11 +522,15 @@
             </tr>
         </table>
 
-    <div class="oe_view_manager_body">
-        <div class="oe_searchview_drawer_container"/>
-            <t t-foreach="widget.views_src" t-as="view">
-                <div t-attf-class="oe_view_manager_view_#{view.view_type}"/>
-            </t>
+    <div class="oe_view_manager_wrapper">
+        <div>
+            <div class="oe_view_manager_body">
+                <div class="oe_searchview_drawer_container"/>
+                    <t t-foreach="widget.views_src" t-as="view">
+                        <div t-attf-class="oe_view_manager_view_#{view.view_type}"/>
+                    </t>
+                </div>
+            </div>
         </div>
     </div>
 </t>