[UI] #184 Tweaked layout of hide/show tree/control/sidebar buttons.

dist/styles/Graph.css

@@ -5,13 +5,27 @@
 #graph-explorer #toolbar ul {
   display: flex;
   flex-direction: row;
+  margin: 0;
 }
 #graph-explorer #toolbar ul li {
   display: flex;
   max-width: 200px;
 }
-#graph-explorer .row.controls {
-  height: 79px;
+#graph-explorer #toggle-container {
+  position: absolute;
+  z-index: 999;
+  right: 15px;
+  top: 10px;
+  width: 70%;
+}
+#graph-explorer #controls-container {
+  position: absolute;
+  z-index: 999;
+  backdrop-filter: blur(4px);
+  background: rgba(255, 255, 255, 0.75);
+  overflow: auto;
+  left: 0;
+  right: 0;
 }
 #graph-explorer .graph-tree {
   position: absolute;

dist/styles/Graph.sass

@@ -13,12 +13,26 @@
     ul
       display: flex
       flex-direction: row
+      margin: 0
       li
         display: flex
         max-width: 200px
 
-  .row.controls
-    height: 79px
+  #toggle-container
+    position: absolute
+    z-index: 999 // needs to appear above solid menu bar
+    right: 15px
+    top: 10px
+    width: 70%
+
+  #controls-container
+    position: absolute
+    z-index: 999 // needs to appear above graph elements
+    backdrop-filter: blur(4px)
+    background: rgba(255,255,255,75%)
+    overflow: auto
+    left: 0
+    right: 0
 
   .graph-tree
     @include sidePanelCommon

src/Gargantext/Components/GraphExplorer.purs

@@ -115,15 +115,14 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
       pure $
         RH.div
           { id: "graph-explorer" }
-          [ R2.row
-            [ outer
-              [ inner
-                [ row1
+          [ rowToggle
                   [ col [ pullLeft [ Toggle.treeToggleButton controls.showTree ] ]
                   , col [ Toggle.controlsToggleButton controls.showControls ]
                   , col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
-                  ]
-                , rowControls [ Controls.controls controls ]
+                  ], R2.row
+            [ outer
+              [ inner
+                [ rowControls [ Controls.controls controls ]
                 , R2.row [
                         tree { frontends
                              , mCurrentRoute
@@ -156,8 +155,8 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
 
     outer = RH.div { className: "col-md-12" }
     inner = RH.div { className: "container-fluid", style: { paddingTop: "90px" } }
-    row1  = RH.div { className: "row", style: { paddingBottom: "10px", marginTop: "-24px" } }
-    rowControls = RH.div { className: "row controls" }
+    rowToggle  = RH.div { id: "toggle-container" }
+    rowControls = RH.div { id: "controls-container" }
     col       = RH.div { className: "col-md-4" }
     pullLeft  = RH.div { className: "pull-left" }
     pullRight = RH.div { className: "pull-right" }

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -134,7 +134,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
 
       pure $ case getShowControls props of
         false -> RH.div {} []
-        true -> RH.div { className: "col-md-12", style: { paddingBottom: "10px" } }
+        true -> RH.div {}
             [ R2.menu { id: "toolbar" }
               [ RH.ul {}
                 [ -- change type button (?)