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

🐛 fix(Timeline): scroll visualization
CCAFS · Apr 30, 2024 · dd6316f · dd6316f
2 parents e3c276b + f4ebb22
commit dd6316f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 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,15 +416,41 @@ span.timelineControl:hover {
   #timelineContainer {
 	  position: relative;
 	  overflow-x: scroll;
-	  overflow-y: hidden;
+	  overflow-y: visible;
 	  height: 31vh;
 	  width: 95%;
 	  margin: 0 auto;
 	}
-
-	#timelineContainer::-webkit-scrollbar {
-    -webkit-appearance: none;
-	}
+
+  #timelineContainer::-webkit-scrollbar {
+    display: block;
+    height: 0;            
+    width: 0;      
+    padding-left: 6px;         
+  }
+
+  #timelineContainer::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  #timelineContainer::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #2c3e50;
+  }
+
+  #timelineContainer::-webkit-scrollbar:vertical{
+    width: 9px;
+  }
+
+  #timelineContainer::-webkit-scrollbar-track-piece:end {
+    background: transparent;
+    margin-bottom: 20px; 
+}
+
+#timelineContainer::-webkit-scrollbar-track-piece:start {
+    background: transparent;
+    margin-top: 20px;
+}
 
 	#timelineDescription{
 		display: flex;
@@ -448,8 +474,6 @@ span.timelineControl:hover {
 	#timeline_times {
 	  display: flex;
 	  width: max-content;
-	  margin-top: 10px;
-	  margin-bottom: 10px;
 	  padding: 5px 0;
 	  position: absolute;
 	  height: 100%;
@@ -496,7 +520,7 @@ span.timelineControl:hover {
 
   .timebox_information {
     position: absolute;
-    top: -12px;
+    top: -3px;
     left: 6px;  
   }
 
@@ -647,7 +671,7 @@ span.timelineControl:hover {
   }
 
   #timeline_activities .activityUnique{
-    top: 2.5em;
+    top: 5em;
   }
 
 	#timelineAlert{
@@ -659,7 +683,7 @@ span.timelineControl:hover {
     padding-bottom: 6px;
     position: absolute;
     right: 2.5%;
-    bottom: 2.5%;
+    top: 10%;
 	}
 
 	#timelineAlert_container{

diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js
@@ -316,9 +316,9 @@ function getIntersectedActivities() {
     switch(activitiesIntersected.length){
       case 1:
         if(document.documentElement.getBoundingClientRect().width > 1500){
-          timelineContainer.style.height = "18vh";
+          timelineContainer.style.height = "22vh";
         } else {
-          timelineContainer.style.height = "26vh";
+          timelineContainer.style.height = "30vh";
         }
 
         break;
@@ -532,17 +532,6 @@ function createTimeline2() {
 	  		<b>Schedule</b>
 	  	</div>
 	  </div>
-    <div id="timelineContainer">
-      <div id="timeline_times">
-      	${createDivTimes(getWeeksArray, "timebox").reduce((acc, curr) => acc + curr.outerHTML, '')}
-      </div>
-      <div id="timeline_activities">
-      	${timelineElements.map((elem, id) => `
-      		${createDivActivities(elem, getWeeksArray, id).outerHTML}
-      	` ).join('')}
-      </div>
-      <div id="timeline_today" style="left: ${setDistances(getWeeksArray,null,null, true)}"></div>
-    </div>
     <div id="timelineAlert">
       <b>Progress status:</b>
       <section id="timelineAlert_container">
@@ -560,6 +549,17 @@ function createTimeline2() {
         </article>
       </section>
     </div>
+    <div id="timelineContainer">
+      <div id="timeline_times">
+      	${createDivTimes(getWeeksArray, "timebox").reduce((acc, curr) => acc + curr.outerHTML, '')}
+      </div>
+      <div id="timeline_activities">
+      	${timelineElements.map((elem, id) => `
+      		${createDivActivities(elem, getWeeksArray, id).outerHTML}
+      	` ).join('')}
+      </div>
+      <div id="timeline_today" style="left: ${setDistances(getWeeksArray,null,null, true)}"></div>
+    </div>
   </div>
 	`
 }