Survey hierarchy: layout adjustments (#3189)

Co-authored-by: Stefano Ricci <[email protected]>
openforis · Dec 14, 2023 · a0f22f5 · a0f22f5
1 parent 0ad7d50
commit a0f22f5
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 27 deletions.
diff --git a/webapp/views/App/views/Designer/SurveyHierarchy/SurveyHierarchy.scss b/webapp/views/App/views/Designer/SurveyHierarchy/SurveyHierarchy.scss
@@ -32,35 +32,38 @@
         font-size: 0.8rem;
         letter-spacing: 0;
         padding: 0.2rem 0.5rem;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        line-height: 1.5;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
 
-      .node-grid {
-        display: flex;
-        align-items: center;
-        border: 1px solid $greyBorder;
-        justify-content: space-between;
-        transition: background-color 1s ease;
-        background-color: white;
-        height: 38px;
-        padding: 6px;
+        .node-grid {
+          display: flex;
+          align-items: center;
+          border: 1px solid $greyBorder;
+          justify-content: space-between;
+          transition: background-color 1s ease;
+          background-color: white;
+          height: auto;
+          padding: 6px;
 
-        .btn {
-          transform: rotate(-90deg);
-          padding: 0.3rem;
-        }
+          .btn {
+            transform: rotate(-90deg);
+            padding: 0.3rem;
+          }
 
-        &.node-virtual {
-          background-color: $grey;
-        }
+          &.node-virtual {
+            background-color: $grey;
+          }
+
+          &.highlight {
+            background-color: $blueLightActive;
+          }
 
-        &.highlight {
-          background-color: $blueLightActive;
+          .node-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            line-height: 1.5;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+          }
         }
       }
 

diff --git a/webapp/views/App/views/Designer/SurveyHierarchy/Tree/Tree.js b/webapp/views/App/views/Designer/SurveyHierarchy/Tree/Tree.js
@@ -5,8 +5,10 @@ import { elementOffset } from '@webapp/utils/domUtils'
 
 const svgMargin = { top: 40, right: 100, bottom: 40, left: 0 }
 
+const treeNodeWidth = 80
+const treeNodeHeight = 10
 const nodeWidth = 150
-const nodeHeight = 40
+const nodeHeight = 80
 const nodeLabelDist = 19
 const nodeLinkLength = 230
 
@@ -120,7 +122,7 @@ export default class Tree {
     this.tree = d3
       .tree()
       .size([height, width])
-      .nodeSize([50, 10])
+      .nodeSize([treeNodeWidth, treeNodeHeight])
       .separation((a, b) => (a.parent === b.parent ? 1 : 2))
 
     // Assigns parent, children, height, depth