[IMP] change webclient structure: remove table

This is a small change if measured in lines of code, but is a large
change: it removes the table structure from the web client and use divs
instead.  It will likely break a lot of things (some css selectors
will not work), but it should simplify our lives in the future:
closer to being responsive, easier layout computations for the browsers
(and hopefully less discrepencies between the results), simpler html, ...

1 files changed, 43 insertions, 93 deletions

diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index e5b50b30652..4bb76f74399 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -199,7 +199,7 @@ $sheet-padding: 16px
     background: white
     &.openerp_webclient_container
         height: calc(100% - 34px)
-        overflow: auto
+        display: flex
     @media (max-width: 768px)
         &.openerp_webclient_container
             height: calc(100% - 52px)
@@ -705,58 +705,43 @@ $sheet-padding: 16px
     // }}}
     // Webclient.leftbar {{{
     .oe_leftbar
-        display: none
+        display: flex
+        flex-direction: column
+        justify-content: space-between
+        flex-shrink: 0
         width: 220px
         background: #f0eeee
         border-right: 1px solid $tag-border
-        text-shadow: none
-        > div
-            height: 100%
-            display: table
-            width: 220px
-            position: relative
-            a.oe_logo
-                display: table-row
-                text-align: center
-                img
-                    margin: 14px 0
-                    border: 0
-                .oe_logo_edit
-                    margin: 14px 0
-                    position: absolute
-                    top: 1px
-                    padding: 4px
-                    width: 100%
-                    display: none
-                    text-align: center
-                    color: #eee
-                    background: rgba(37,37,37,0.9)
-                    @include box-sizing(border)
-                &:hover .oe_logo_edit_admin
-                    display: block
-            > div
-                display: table-row
-                height: 100%
-                > div
-                    position: relative
-                    height: 100%
-                    > div.oe_secondary_menus_container
-                        position: absolute
-                        position: static\9
-                        top: 0
-                        bottom: 0
-                        left: 0
-                        right: 0
-                        overflow-x: hidden
-                        overflow-y: auto
-            .oe_footer
-                background: #f0eeee
+        position: relative
+        a.oe_logo
+            text-align: center
+            img
+                margin: 14px 0
+                border: 0
+            .oe_logo_edit
+                margin: 14px 0
+                position: absolute
+                top: 1px
+                padding: 4px
+                width: 100%
+                display: none
                 text-align: center
-                a
-                    font-weight: bold
-                    color: black
-                    span
-                        color: #a24689
+                color: #eee
+                background: rgba(37,37,37,0.9)
+                @include box-sizing(border)
+            &:hover .oe_logo_edit_admin
+                display: block
+        .oe_secondary_menus_container
+            flex-grow: 1
+            overflow-y: auto
+        .oe_footer
+            background: #f0eeee
+            text-align: center
+            a
+                font-weight: bold
+                color: black
+                span
+                    color: #a24689
     // }}}
     // Webclient.leftbar items {{{
 
@@ -859,47 +844,24 @@ $sheet-padding: 16px
     a.oe_form_uri:hover
         text-decoration: underline
     .oe_application
-        width: 100%
         height: 100%
-        overflow: hidden
-        > div
-            position: relative
-            height: 100%
-        .oe-view-manager
-            .oe-view-manager-debug
-                margin-right: 5px
-            .oe-view-manager-content
-                display: table-row
-                height: 100%
-
-        .oe-view-manager-body
-            position: relative
-            height: 100%
-            a
-                color: $link-color
-            .oe-view-manager-view-kanban:not(:empty)
-                height: 100%
-            > div
-                position: absolute
-                top: 0
-                bottom: 0
-                left: 0
-                right: 0
-                overflow: auto
-        .oe_form_field_one2many
-            .oe-view-manager-views
-                position: initial
-
+        flex-grow: 1
     // }}}
     // ViewManager common {{{
     .oe-view-manager
-        display: table
         width: 100%
         height: 100%
+        display: flex
+        flex-direction: column
+        .oe-view-manager-content
+            overflow: auto
+        .oe-view-manager-debug
+            margin-right: 5px
     .oe-view-manager-header
-        display: table-row
         background-color: rgb(240, 238, 238)
         border-bottom: 1px solid #afafb6
+        flex-shrink: 0
+        width: 100%
         -webkit-user-select: none
         -moz-user-select: none
         user-select: none
@@ -912,8 +874,6 @@ $sheet-padding: 16px
             float: right
             > div
                 display: inline-block
-        .row
-            margin: 0
         .row:first-child
             padding-top: 3px
             padding-bottom: 3px
@@ -992,16 +952,6 @@ $sheet-padding: 16px
                 top: 3px
                 content: "\f00c"
 
-    .oe_application 
-        > div    
-            > div
-                > .oe-view-manager-body
-                    position: absolute
-                    top: 90px
-                    bottom: 0
-                    left: 0
-                    right: 0
-                    overflow: auto
         // }}}
     // FormPopup {{{
     .oe_popup_form