[tree] styling fixes

dist/styles/Tree.css

@@ -54,15 +54,15 @@ li .leaf:hover a.settings {
   margin-right: 19px;
 }
 .tree .lefthanded ul li {
-  margin-right: 15px;
+  margin-right: 10px;
   padding-right: 5px;
 }
-.tree .lefthanded ul li::after {
+.tree .lefthanded ul li.with-children::after {
   background-color: #000;
   right: -10px;
-  width: 10px;
+  width: 5px;
 }
-.tree .lefthanded ul li::before {
+.tree .lefthanded ul li.with-children::before {
   background-color: #000;
   right: -10px;
   width: 1px;
@@ -74,20 +74,20 @@ li .leaf:hover a.settings {
   margin-left: 19px;
 }
 .tree .righthanded ul li {
-  margin-left: 15px;
+  margin-left: 10px;
   padding-left: 5px;
 }
-.tree .righthanded ul li::after {
+.tree .righthanded ul li.with-children::after {
   background-color: #000;
   left: -10px;
-  width: 10px;
+  width: 5px;
 }
-.tree .righthanded ul li::before {
+.tree .righthanded ul li.with-children::before {
   background-color: #000;
   left: -10px;
   width: 1px;
 }
-.tree .righthanded ul li:only::before {
+.tree .righthanded ul li.with-children:only::before {
   background-color: #000;
   right: 10px;
 }

dist/styles/Tree.sass

@@ -48,37 +48,39 @@ li
     ul
       margin-right : 19px
       li
-        margin-right: 15px
+        margin-right: 10px
         padding-right: 5px
-        &::after
-          background-color: #000
-          right: -10px
-          width: 10px
-        &::before
-          background-color: #000
-          right: -10px
-          width: 1px
-        &:only-child::before
-          //right: 1px
+        &.with-children
+          &::after
+            background-color: #000
+            right: -10px
+            width: 5px
+          &::before
+            background-color: #000
+            right: -10px
+            width: 1px
+          &:only-child::before
+            //right: 1px
         .leaf
           justify-content : flex-end
   .righthanded
     ul
       margin-left : 19px
       li
-        margin-left: 15px
+        margin-left: 10px
         padding-left: 5px
-        &::after
-          background-color: #000
-          left: -10px
-          width: 10px
-        &::before
-          background-color: #000
-          left: -10px
-          width: 1px
-        &:only::before
-          background-color: #000
-          right: 10px
+        &.with-children
+          &::after
+            background-color: #000
+            left: -10px
+            width: 5px
+          &::before
+            background-color: #000
+            left: -10px
+            width: 1px
+          &:only::before
+            background-color: #000
+            right: 10px
         .leaf
           justify-content : flex-start
 

src/Gargantext/Components/Forest/Tree.purs

@@ -199,7 +199,7 @@ toHtml p@{ asyncTasks
 
         let withId (NTree (LNode {id: id'}) _) = id'
 
-        pure $ H.li {} $
+        pure $ H.li { className: if A.null ary then "no-children" else "with-children" } $
           [ nodeMainSpan (A.null ary) 
                          { id
                          , dispatch: pAction

src/Gargantext/Components/Forest/Tree/Node.purs

@@ -74,16 +74,16 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c
                 [ folderIcon  nodeType folderOpen
                 , chevronIcon isLeaf handed nodeType folderOpen
                 , nodeLink { frontends
-                                , id
-                                , isSelected: mCurrentRoute
-                                        == Routes.nodeTypeAppRoute
-                                                nodeType
-                                                (sessionId session) id
-                                , name: name' props
-                                , nodeType
-                                , session
-                                , handed
-                                }
+                           , id
+                           , isSelected: mCurrentRoute
+                             == Routes.nodeTypeAppRoute
+                             nodeType
+                             (sessionId session) id
+                           , name: name' props
+                           , nodeType
+                           , session
+                           , handed
+                           }
 
                 , fileTypeView { dispatch, droppedFile, id, isDragOver, nodeType }
                 , H.div {} (map (\t -> asyncProgressBar { asyncTask: t
@@ -93,7 +93,7 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c
                                                         , session
                                                         }
                                 ) tasks
-                                )
+                           )
                 , if nodeType == GT.NodeUser
                         then GV.versionView {session}
                         else H.div {} []
@@ -111,10 +111,10 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c
 
 
                 , nodeActions { id
-                                , nodeType
-                                , refreshTree: const $ dispatch RefreshTree
-                                , session
-                                }
+                              , nodeType
+                              , refreshTree: const $ dispatch RefreshTree
+                              , session
+                              }
 
 
                 ]