🐛 fix(Timeline):Timeline makes a tour of all the tasks before reachin…

…g the current
CCAFS · Apr 4, 2024 · f154ec6 · f154ec6
1 parent e69ab1e
commit f154ec6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 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
@@ -416,7 +416,6 @@ span.timelineControl:hover {
   #timelineContainer {
 	  position: relative;
 	  margin: 18px 30px 18px 30px;
-	  scroll-behavior: smooth;
 	  overflow-x: scroll;
 	  overflow-y: hidden;
 	  height: 36vh;
@@ -603,7 +602,17 @@ span.timelineControl:hover {
 		background-color: #0377a3;
 	}
 
-
+	.timelineAlert_item_color--1{
+		background-color: #F9C786;
+	}
+
+	.timelineAlert_item_color--2{
+		background-color: #81B8C1;
+	}
+
+	.timelineAlert_item_color--3{
+		background-color: #B5D08B;
+	}
   /*************** sectionMap ********************/
 
   .sectionMap{

diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js
@@ -156,6 +156,7 @@ function moveScrollRight() {
   const widthContainer = $('.sectionMap').width();
 	const containerSize = widthContainer * 0.8;
 
+	element.style.scrollBehavior = "smooth"
   element.scrollLeft += (containerSize+(containerSize* (2/5)));
 }
 
@@ -165,6 +166,7 @@ function moveScrollLeft() {
 	const widthContainer = $('.sectionMap').width();
 	const containerSize = widthContainer * 0.8;
 
+	element.style.scrollBehavior = "smooth"
   element.scrollLeft -= (containerSize+(containerSize* (2/5)));
 }
 
@@ -341,15 +343,15 @@ function createTimeline2() {
 	    	<b>Progress status:</b>
 	    	<section id="timelineAlert_container">
 	    		<article class="timelineAlert_item">
-	    			<div class="timelineAlert_item_color"></div>
+	    			<div class="timelineAlert_item_color timelineAlert_item_color--1"></div>
 	    			<p>Not started</p>
 	    		</article>
 	    		<article class="timelineAlert_item">
-	    			<div class="timelineAlert_item_color"></div>
+	    			<div class="timelineAlert_item_color timelineAlert_item_color--2"></div>
 	    			<p>In progress</p>
 	    		</article>
 	    		<article class="timelineAlert_item">
-	    			<div class="timelineAlert_item_color"></div>
+	    			<div class="timelineAlert_item_color timelineAlert_item_color--3"></div>
 	    			<p>Completed</p>
 	    		</article>
 	    	</section>