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

timeline visual changes
CCAFS · Apr 30, 2024 · 26e8fe9 · 26e8fe9
2 parents dd6316f + 09681cd
commit 26e8fe9
Show file tree

Hide file tree

Showing 2 changed files with 8 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
@@ -417,7 +417,7 @@ span.timelineControl:hover {
 	  position: relative;
 	  overflow-x: scroll;
 	  overflow-y: visible;
-	  height: 31vh;
+	  height: 32vh;
 	  width: 95%;
 	  margin: 0 auto;
 	}
@@ -530,6 +530,8 @@ span.timelineControl:hover {
 
 	.activityCard {
 		position: relative;
+    top: 1.5em;
+    transition: all 0.25s ease-out;
 	}
 
 	.activityCard_container{
@@ -643,20 +645,6 @@ span.timelineControl:hover {
 		margin: 0;
 		color: #000;
 	}
-
-	.activityCard:nth-child(n+1){
-		top: 1.5em;
-	}
-
-	.activityCard:nth-child(2n+2){
-		top: 6em;
-	}
-
-
-	.activityCard:nth-child(3n+3){
-		top: 10.5em;
-
-	}
 
   #timeline_activities .activityFlexTop--1{
     top: 1.5em;
@@ -671,7 +659,7 @@ span.timelineControl:hover {
   }
 
   #timeline_activities .activityUnique{
-    top: 5em;
+    top: 4.5em;
   }
 
 	#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
@@ -283,7 +283,7 @@ function getIntersectedActivities() {
 
     entries.forEach(entry => {
       const activity = entry.target;
-      if (entry.isIntersecting && entry.intersectionRatio > 0.025) {
+      if (entry.isIntersecting && entry.intersectionRatio > 0.01) {
         activitiesIntersected.push(activity);
       }
       $(activity).parent().removeClass("activityFlexTop--1");
@@ -318,15 +318,15 @@ function getIntersectedActivities() {
         if(document.documentElement.getBoundingClientRect().width > 1500){
           timelineContainer.style.height = "22vh";
         } else {
-          timelineContainer.style.height = "30vh";
+          timelineContainer.style.height = "32vh";
         }
 
         break;
       case 2:
         if(document.documentElement.getBoundingClientRect().width > 1500){
           timelineContainer.style.height = "24.5vh";
         } else {
-          timelineContainer.style.height = "30vh";
+          timelineContainer.style.height = "32vh";
         }
         list_activities.forEach(activity => {
           $(activity).parent().removeClass("activityUnique");
@@ -366,7 +366,7 @@ function getIntersectedActivities() {
 
   setTimeout(() => {
     observer.disconnect();
-  }, 500); // Adjust the time as per your scroll smooth time
+  }, 550); // Adjust the time as per your scroll smooth time
 
 }