remove margin-bottom and truncate title length to 35 chars max + add …

…title
digITpro · May 24, 2024 · 502a675 · 502a675
1 parent 0c369ea
commit 502a675
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/app/assets/stylesheets/webpack/line/line.scss b/app/assets/stylesheets/webpack/line/line.scss
@@ -28,8 +28,7 @@
   display: flex;
   position: relative;
   z-index: 1;
-  min-height: 2rem;
-  margin-bottom: 1em;
+  min-height: 2.5rem;
 
   .move_up-4 {
     margin-top: -12rem;

diff --git a/app/javascript/components/Line/components/Line.jsx b/app/javascript/components/Line/components/Line.jsx
@@ -97,14 +97,21 @@ const ItemGroup = forwardRef((props, ref) => {
       emptyCount.current = 0
     }
 
+    let maxTitleLenght = 35
+    let groupTitle = computeGroupTitle(level, title, type, format)
+
+    console.log(groupTitle)
+    console.log(groupTitle.length > maxTitleLenght)
     if (typeof items === 'object' && !Array.isArray(items)) {
       emptyCount.current = emptyCount.current + 1
       return (
         <div className={`line__group level-${level}`} key={`${key} `} data-controller="toggle-display-line">
           {!(type === 'num' && level === 1) && !withoutGroup && (
             <div className={`line__group__title level-${level}`} style={{cursor: "pointer", zIndex: 1000}}
                  data-action="click->toggle-display-line#reveal">
-              <div dangerouslySetInnerHTML={{__html: computeGroupTitle(level, title, type, format)}}/>
+              <div
+                data-toggle={groupTitle.length > maxTitleLenght ? "tooltip" : ""} data-placement="top" title={groupTitle.length > maxTitleLenght ? groupTitle : ""}
+                dangerouslySetInnerHTML={{__html: groupTitle.length > maxTitleLenght ? groupTitle.substring(0, maxTitleLenght) + "..." : groupTitle}}/>
               <span className="px-2" data-toggle-display-line-target="upArrow"
                     dangerouslySetInnerHTML={{__html: icons.up}}/>
               <span className="px-2 d-none" data-toggle-display-line-target="downArrow"
@@ -146,7 +153,9 @@ const ItemGroup = forwardRef((props, ref) => {
           {!(type === 'num' && level === 1) && !withoutGroup && (
             <div className={`line__group__title level-${level}`} style={{zIndex: 10, cursor: "pointer"}}
                  data-action="click->toggle-display-line#reveal">
-              <div dangerouslySetInnerHTML={{__html: computeGroupTitle(level, title, type, format)}}/>
+              <div
+                data-toggle={groupTitle.length > maxTitleLenght ? "tooltip" : ""} data-placement="top" title={groupTitle.length > maxTitleLenght ? groupTitle : ""}
+                dangerouslySetInnerHTML={{__html: groupTitle.length > maxTitleLenght ? groupTitle.substring(0, maxTitleLenght) + "..." : groupTitle}}/>
               <span className="px-2" data-toggle-display-line-target="upArrow"
                     dangerouslySetInnerHTML={{__html: icons.up}}/>
               <span className="px-2 d-none" data-toggle-display-line-target="downArrow"