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

A2 311 timeline visual change
CCAFS · Apr 22, 2024 · 61896ec · 61896ec
2 parents a8375f1 + 1af16b2
commit 61896ec
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 28 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
@@ -583,11 +583,11 @@ span.timelineControl:hover {
 	}
 
 	.activityCard:nth-child(n+1){
-		top: -0.3em;
+		top: 0em;
 	}
 
 	.activityCard:nth-child(2n+2){
-		top: 4.2em;
+		top: 4.5em;
 	}
 
 
@@ -596,32 +596,20 @@ span.timelineControl:hover {
 
 	}
 
-  .activityCard ~ .activityFlexTop{
-    top: -0.3em;
+  #timeline_activities .activityFlexTop--1{
+    top: 0em;
   }
 
-  .activityFlexTop ~ .activityFlexTop{
-    top: 4.2em;
+  #timeline_activities .activityFlexTop--2{
+    top: 4.5em;
   }
 
-  .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
-    top: 8.7em;
+  #timeline_activities .activityFlexTop--3{
+    top: 9em;
   }
 
-  .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
-    top: -0.3em;
-  }
-
-  .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
-    top: 4.2em;
-  }
-
-  .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
-    top: 8.7em;
-  }
-
-  .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
-    top: -0.3em;
+  #timeline_activities .activityUnique{
+    top: 2.1em;
   }
 
 	#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
@@ -267,14 +267,35 @@ function getIntersectedActivities() {
 
     entries.forEach(entry => {
       const activity = entry.target;
-      if (entry.isIntersecting) {
+      if (entry.isIntersecting && entry.intersectionRatio > 0.025) {
         activitiesIntersected.push(activity);
       }
-      $(activity).parent().removeClass("activityFlexTop");
+      $(activity).parent().removeClass("activityFlexTop--1");
+      $(activity).parent().removeClass("activityFlexTop--2");
+      $(activity).parent().removeClass("activityFlexTop--3");
+    });
+    console.log(activitiesIntersected)
+    activitiesIntersected.sort((a, b) => {
+      const rectA = a.getBoundingClientRect();
+      const rectB = b.getBoundingClientRect();
+      return rectA.left - rectB.left;
     });
 
     activitiesIntersected.forEach(activity => {
-      $(activity).parent().addClass("activityFlexTop");
+      if(activitiesIntersected.length === 1){
+        $(activity).parent().addClass("activityUnique");
+      } else {
+
+        const index = activitiesIntersected.indexOf(activity);
+        if(index % 3 === 0){
+          $(activity).parent().addClass("activityFlexTop--1");
+        } else if(index % 3 === 1){
+          $(activity).parent().addClass("activityFlexTop--2");
+        } else if(index % 3 === 2){
+          $(activity).parent().addClass("activityFlexTop--3");
+        }
+
+      }
     });
 
     switch(activitiesIntersected.length){
@@ -292,6 +313,9 @@ function getIntersectedActivities() {
         } else {
           timelineContainer.style.height = "30vh";
         }
+        list_activities.forEach(activity => {
+          $(activity).parent().removeClass("activityUnique");
+        });
         break;
       case 3:
       case 4:
@@ -303,11 +327,17 @@ function getIntersectedActivities() {
         } else {
           timelineContainer.style.height = "36vh";
         }
+        list_activities.forEach(activity => {
+          $(activity).parent().removeClass("activityUnique");
+        });
         break;
       default:
         timelineContainer.style.removeProperty("height");
-        activitiesIntersected.forEach(activity => {
-          $(activity).parent().removeClass("activityFlexTop");
+        list_activities.forEach(activity => {
+          $(activity).parent().removeClass("activityFlexTop--1");
+          $(activity).parent().removeClass("activityFlexTop--2");
+          $(activity).parent().removeClass("activityFlexTop--3");
+          $(activity).parent().removeClass("activityUnique");
         });
         break;
     }
@@ -321,7 +351,7 @@ function getIntersectedActivities() {
 
   setTimeout(() => {
     observer.disconnect();
-  }, 25);
+  }, 500); // Adjust the time as per your scroll smooth time
 
 }