[FIX] doc: various

* fix Sphinx 1.6 compatibility leading to the "tiles" on the home page
  not working anymore: 1.6 replaces BuildEnvironment.reolve_toctree by
  TocTree().resolve(), while the method still exists it's not actually
  called anymore
* rejigger some CSS as the second section went from one big tile to 3
  smaller tiles, and got laid out as a row rather than a second 2x2
  block. Recode the entire mess with flexbox, remove some stuff which
  conflicted with boostrap (this screen should probably be
  de-boostrapped and completely converted to flexbox or grid)
* add building CSS from LESS to the makefile, all Odoo devs should
  have less installed locally (for assets)

4 files changed, 46 insertions, 77 deletions

diff --git a/doc/_extensions/odoo_ext/__init__.py b/doc/_extensions/odoo_ext/__init__.py
index c1637623e62..474931ae0fb 100644
--- a/doc/_extensions/odoo_ext/__init__.py
+++ b/doc/_extensions/odoo_ext/__init__.py
@@ -5,6 +5,10 @@ from . import switcher
 from . import translator
 
 import sphinx.environment
+try:
+    from sphinx.environment.adapters import toctree
+except ImportError:
+    pass
 import sphinx.builders.html
 from docutils import nodes
 def setup(app):
@@ -93,6 +97,14 @@ class monkey(object):
         old = getattr(self.obj, name)
         setattr(self.obj, name, lambda self_, *args, **kwargs: \
                 fn(old, self_, *args, **kwargs))
+if toctree:
+    # 1.6 and above use a new toctree adapter object for processing rather
+    # than functions on the BuildEnv & al
+    @monkey(toctree.TocTree)
+    def resolve(old_resolve, tree, docname, *args, **kwargs):
+        if docname == tree.env.config.master_doc:
+            return resolve_content_toctree(tree.env, docname, *args, **kwargs)
+        return old_resolve(tree, docname, *args, **kwargs)
 
 @monkey(sphinx.environment.BuildEnvironment)
 def resolve_toctree(old_resolve, self, docname, *args, **kwargs):
diff --git a/doc/_extensions/odoo_ext/static/layout.less b/doc/_extensions/odoo_ext/static/layout.less
index 4c8a5c64386..033468afa4e 100644
--- a/doc/_extensions/odoo_ext/static/layout.less
+++ b/doc/_extensions/odoo_ext/static/layout.less
@@ -151,31 +151,27 @@ main.has_code_col{
   }
 }
 
-main.index .toctree-wrapper{
-  @media screen and(min-width: @screen-md){
+main.index .toctree-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 
-    > .row:first-child { //trigg first section
-      > .col-md-3:nth-child(3), > .col-md-3:nth-child(5) { //trig cards (title + 2, title + 4)
-          margin-right: 50%;
-      }
-    }
-    position: relative;
-    .toc-single-entry{
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 50%;
-      padding-right: floor((@grid-gutter-width / 2)); // compensate bootstrap default gutter
-      > .col-md-3 {
-        width: 100%;
-      }
-      > *[class^="col-"] {
-        padding-left: 0;    //remove Bootstrap default gutter
-      }
-      .card {
-        min-height: (@card_min-height * 2 ) + @card_margin-bottom;
+  > .row {
+    flex: 1 0 100%;
+  }
+  @media screen and(min-width: @screen-md){
+    // display these 2 as 2x2 squares
+    > .row.tutorials, .row.api {
+      flex: 0 0 50%;
+
+      display: flex;
+      flex-wrap: wrap;
+      > div {
+        flex: 0 0 50%;
       }
     }
+
+    // FIXME: reimplement a single big box (.toc-single-entry)
   }
 }
 
diff --git a/doc/_extensions/odoo_ext/static/style.css b/doc/_extensions/odoo_ext/static/style.css
index 1442d4bdd67..a3f34516f98 100644
--- a/doc/_extensions/odoo_ext/static/style.css
+++ b/doc/_extensions/odoo_ext/static/style.css
@@ -9763,29 +9763,24 @@ main.has_code_col article.doc-body > section {
     color: #dcddde;
   }
 }
+main.index .toctree-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+main.index .toctree-wrapper > .row {
+  flex: 1 0 100%;
+}
 @media screen and (min-width: 992px) {
-  main.index .toctree-wrapper {
-    position: relative;
-  }
-  main.index .toctree-wrapper > .row:first-child > .col-md-3:nth-child(3),
-  main.index .toctree-wrapper > .row:first-child > .col-md-3:nth-child(5) {
-    margin-right: 50%;
-  }
-  main.index .toctree-wrapper .toc-single-entry {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 50%;
-    padding-right: 15px;
-  }
-  main.index .toctree-wrapper .toc-single-entry > .col-md-3 {
-    width: 100%;
+  main.index .toctree-wrapper > .row.tutorials,
+  main.index .toctree-wrapper .row.api {
+    flex: 0 0 50%;
+    display: flex;
+    flex-wrap: wrap;
   }
-  main.index .toctree-wrapper .toc-single-entry > *[class^="col-"] {
-    padding-left: 0;
-  }
-  main.index .toctree-wrapper .toc-single-entry .card {
-    min-height: 420px;
+  main.index .toctree-wrapper > .row.tutorials > div,
+  main.index .toctree-wrapper .row.api > div {
+    flex: 0 0 50%;
   }
 }
 article.doc-toc .toctree-wrapper > ul > li > span {
@@ -11782,23 +11777,6 @@ main.index .card:hover .card-img span {
   -o-transform: scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0);
   transform: scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0);
 }
-@media screen and (min-width: 992px) {
-  main.index .toc-single-entry .card figcaption {
-    font-size: 1.5em;
-    padding: 20px 15px;
-  }
-}
-@media screen and (min-width: 992px) {
-  main.index .col-md-6 .card,
-  main.index .col-md-4 .card {
-    min-height: 300px;
-  }
-  main.index .col-md-6 .card figcaption,
-  main.index .col-md-4 .card figcaption {
-    font-size: 1.5em;
-    padding: 20px 15px;
-  }
-}
 main.index.animating .card {
   -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
   -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
diff --git a/doc/_extensions/odoo_ext/static/style.less b/doc/_extensions/odoo_ext/static/style.less
index 89d287d487e..719ee1441f5 100644
--- a/doc/_extensions/odoo_ext/static/style.less
+++ b/doc/_extensions/odoo_ext/static/style.less
@@ -336,23 +336,6 @@ main.index {
     }
   }
 
-  .toc-single-entry .card figcaption {
-    @media screen and(min-width: @screen-md){
-      font-size: 1.5em;
-      padding: 20px 15px;
-    }
-  }
-
-  .col-md-6 .card, .col-md-4 .card{
-    @media screen and(min-width: @screen-md){
-      min-height: 300px;
-      figcaption{
-        font-size: 1.5em;
-        padding: 20px 15px;
-      }
-    }
-  }
-
   &.animating .card {
     .transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
   }