Merge pull request #2510 from CCAFS/A2-311-Timeline-visual-change

♻️ refactor(Timeline): more than 7 items
CCAFS · Apr 17, 2024 · ac84b2c · ac84b2c
2 parents 762f011 + 4a9dd74
commit ac84b2c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 20 deletions.
diff --git a/marlo-web/src/main/webapp/crp/css/home/dashboard.css b/marlo-web/src/main/webapp/crp/css/home/dashboard.css
@@ -587,12 +587,12 @@ span.timelineControl:hover {
 	}
 
 	.activityCard:nth-child(2n+2){
-		top: 4.3em;
+		top: 4.2em;
 	}
 
 
 	.activityCard:nth-child(3n+3){
-		top: 8.8em;
+		top: 8.7em;
 
 	}
 
@@ -601,19 +601,27 @@ span.timelineControl:hover {
   }
 
   .activityFlexTop ~ .activityFlexTop{
-    top: 4.3em;
+    top: 4.2em;
   }
 
   .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
-    top: 8.8em;
+    top: 8.7em;
   }
 
   .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
     top: -0.3em;
   }
 
   .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
-    top: 8.8em;
+    top: 4.2em;
+  }
+
+  .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
+    top: 8.7em;
+  }
+
+  .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
+    top: -0.3em;
   }
 
 	#timelineAlert{

diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js
@@ -294,26 +294,16 @@ function getIntersectedActivities() {
         }
         break;
       case 3:
+      case 4:
+      case 5:
+      case 6:
+      case 7:
         if(document.documentElement.getBoundingClientRect().width > 1500){
-          timelineContainer.style.height = "26vh";
+          timelineContainer.style.height = "30vh";
         } else {
           timelineContainer.style.height = "36vh";
         }
         break;
-      case 4: 
-      if(document.documentElement.getBoundingClientRect().width > 1500){
-        timelineContainer.style.height = "26vh";
-      } else {
-        timelineContainer.style.height = "36vh";
-      }
-        break;
-      case 5: 
-        if(document.documentElement.getBoundingClientRect().width > 1500){
-          timelineContainer.style.height = "26vh";
-        } else {
-          timelineContainer.style.height = "36vh";
-        }
-      break;
       default:
         timelineContainer.style.removeProperty("height");
         activitiesIntersected.forEach(activity => {