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

♻️ refactor(Timeline): visual changes special cases
CCAFS · Apr 17, 2024 · 762f011 · 762f011
2 parents fa7fcd8 + f6c4f26
commit 762f011
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 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.2em;
+		top: 4.3em;
 	}
 
 
 	.activityCard:nth-child(3n+3){
-		top: 8.7em;
+		top: 8.8em;
 
 	}
 
@@ -601,11 +601,19 @@ span.timelineControl:hover {
   }
 
   .activityFlexTop ~ .activityFlexTop{
-    top: 4.2em;
+    top: 4.3em;
   }
 
   .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
-    top: 8.7em;
+    top: 8.8em;
+  }
+
+  .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
+    top: -0.3em;
+  }
+
+  .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{
+    top: 8.8em;
   }
 
 	#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
@@ -282,17 +282,38 @@ function getIntersectedActivities() {
         if(document.documentElement.getBoundingClientRect().width > 1500){
           timelineContainer.style.height = "18vh";
         } else {
-          timelineContainer.style.height = "24vh";
+          timelineContainer.style.height = "26vh";
         }
 
         break;
       case 2:
         if(document.documentElement.getBoundingClientRect().width > 1500){
           timelineContainer.style.height = "22vh";
         } else {
-          timelineContainer.style.height = "28vh";
+          timelineContainer.style.height = "30vh";
         }
         break;
+      case 3:
+        if(document.documentElement.getBoundingClientRect().width > 1500){
+          timelineContainer.style.height = "26vh";
+        } 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 => {
@@ -310,7 +331,7 @@ function getIntersectedActivities() {
 
   setTimeout(() => {
     observer.disconnect();
-  }, 20);
+  }, 25);
 
 }
 
@@ -413,7 +434,7 @@ function calculateAmountForWidth(startDate, endDate, weeks) {
 
 function setWidth(amount) {
 
-  const extraAmount = amount < 0.3 ? 4/7 : amount > 1.5 ? -1.5/7 : 0;
+  const extraAmount = amount < 0.3 ? 2.9/7 : amount > 1.5 ? -1.5/7 : 0;
   const widthContainer = $('.sectionMap').width();
   const widthInPx = `${widthContainer * 0.8}px`;
   return `calc(${amount !== undefined ? (amount + extraAmount) + "*(" + widthInPx + " / 2)" : "calc(" + widthInPx + " / 2)"} )  `;