[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)

1 files changed, 18 insertions, 22 deletions

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)
   }
 }