From 63c702f00960ef195e7f83ea671be62b645cab6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Tue, 10 Jun 2014 16:22:02 +0200 Subject: [PATCH] [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. --- addons/web/static/src/css/base.css | 15 ++++++++++++--- addons/web/static/src/css/base.sass | 22 +++++++++++++++------- addons/web/static/src/js/search.js | 16 +--------------- addons/web/static/src/js/views.js | 6 ++---- addons/web/static/src/xml/base.xml | 14 +++++++++----- 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 @@ -
-
- -
- +
+
+
+
+ +
+ +
+