A2 311 Timeline display flex changes

marlo-data/src/main/java/org/cgiar/ccafs/marlo/data/manager/impl/CrpProgramOutcomeIndicatorManagerImpl.java

@@ -100,16 +100,14 @@ public void remove(CrpProgramOutcomeIndicator originalCrpOutcomeIndicator, Phase
       List<CrpProgramOutcome> outcomes = crpProgramOutcomeManager.getAllCrpProgramOutcomesByComposedIdFromPhase(
         originalCrpOutcomeIndicator.getCrpProgramOutcome().getComposeID(), initialPhase.getId());
 
-      if (outcomes != null) {
+      if (outcomes != null && !outcomes.isEmpty()) {
         for (CrpProgramOutcome crpProgramOutcome : outcomes) {
 
-          if (this.getCrpProgramOutcomeIndicatorByOutcomeAndIndicator(originalCrpOutcomeIndicator.getIndicator(),
-            crpProgramOutcome) != null
-            || (!this.getCrpProgramOutcomeIndicatorByOutcomeAndIndicator(originalCrpOutcomeIndicator.getIndicator(),
-              crpProgramOutcome).isEmpty())) {
-            List<CrpProgramOutcomeIndicator> indicators =
-              new ArrayList<>(this.getCrpProgramOutcomeIndicatorByOutcomeAndIndicator(
-                originalCrpOutcomeIndicator.getIndicator(), crpProgramOutcome));
+          List<CrpProgramOutcomeIndicator> result = this.getCrpProgramOutcomeIndicatorByOutcomeAndIndicator(
+            originalCrpOutcomeIndicator.getIndicator(), crpProgramOutcome);
+
+          if (result != null && !result.isEmpty()) {
+            List<CrpProgramOutcomeIndicator> indicators = new ArrayList<>(result);
 
             for (CrpProgramOutcomeIndicator indicator : indicators) {
               if (indicator != null && indicator.getId() != null) {

marlo-web/src/main/java/org/cgiar/ccafs/marlo/action/impactpathway/OutcomesAction.java

@@ -870,11 +870,11 @@ public void saveIndicators(CrpProgramOutcome crpProgramOutcomeDB, CrpProgramOutc
         if (crpProgramOutcomeIndicator != null
           && !crpProgramOutcomeDetached.getIndicators().contains(crpProgramOutcomeIndicator)) {
           crpProgramOutcomeIndicatorManager.deleteCrpProgramOutcomeIndicator(crpProgramOutcomeIndicator.getId());
-          crpProgramOutcomeIndicatorManager.remove(crpProgramOutcomeIndicator, nextPhase);
+          // crpProgramOutcomeIndicatorManager.remove(crpProgramOutcomeIndicator, nextPhase);
         }
       } else {
         crpProgramOutcomeIndicatorManager.deleteCrpProgramOutcomeIndicator(crpProgramOutcomeIndicator.getId());
-        crpProgramOutcomeIndicatorManager.remove(crpProgramOutcomeIndicator, nextPhase);
+        // crpProgramOutcomeIndicatorManager.remove(crpProgramOutcomeIndicator, nextPhase);
       }
     }
 

marlo-web/src/main/webapp/WEB-INF/crp/views/home/dashboard.ftl

@@ -108,14 +108,8 @@
     <img class="itemimgdeliverables" src="${baseUrlCdn}/global/images/loading-loading-forever.gif" >    
 	</section>
   <section class="timeline" style="display: none">	
-    <div class="homeTitleTimeline"><b>Schedule</b></div>
-    <div class="timelineAlert">
-      <!--  <img src="${baseUrlCdn}/global/images/icon-transparent-warning.png" width="30">  -->
-      <p class="timelineAlertText"> days left until the end of the activity</p>
-    </div>
 		<div class="containerTimeline">
-			<!--  <a href="#item1">touch me</a>  -->
-			<div class="scroll-x-containerTimeline " id="listItemTimeline">
+			<div class="scroll-x-containerTimeline2 " id="listItemTimeline2">
 			</div>
 			<div class="sideButtonTimeline buttonLeftTimeline"><p><</p></div>
 			<div class="sideButtonTimeline buttonRightTimeline"><p>></p></div>

marlo-web/src/main/webapp/crp/css/home/dashboard.css

@@ -211,6 +211,8 @@ div#impactGraphic-fullscreen {
     height: 100%;
 }
 
+  /*************** Timeline ********************/
+
 span.leftControl {
     left: 5px;
 }
@@ -247,7 +249,6 @@ span.timelineControl:hover {
     justify-content: center;
     -webkit-box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);
     border-radius: 5px;
-    height: 297px;
   }
 
   .porcentTimeLine {
@@ -351,11 +352,11 @@ span.timelineControl:hover {
   }
 
   .buttonLeftTimeline {
-    left: 0.75rem;
+    left: 2.5%;
   }
 
   .buttonRightTimeline {
-    right: 0.75rem;
+    right: 2.5%;
   }
 
   .timelineBackSuccess {
@@ -411,7 +412,253 @@ span.timelineControl:hover {
     height: 50px;
     align-self: center;
   }
+
+  #timelineContainer {
+	  position: relative;
+	  margin: 18px 30px 18px 30px;
+	  overflow-x: scroll;
+	  overflow-y: hidden;
+	  height: 36vh;
+	  width: 80%;
+	  margin: 0 auto;
+	}
+
+	#timelineContainer::-webkit-scrollbar {
+    -webkit-appearance: none;
+	}
+
+	#timelineDescription{
+		display: flex;
+    padding: 18px 30px 18px 30px;
+    width: 100%;
+    align-items: end;
+	}
+
+	#timelineDescription_title{
+    font-size: 2.0em;
+    color: #333;
+    width: 100%;
+    text-align: center;
+	}
+
+	#timelineDescription_range{
+		font-size: 1.5rem;
+
+	}
+
+	#timeline_times {
+	  display: flex;
+	  width: max-content;
+	  margin-top: 10px;
+	  margin-bottom: 10px;
+	  padding: 5px 0;
+	  position: absolute;
+	  height: 100%;
+	}
+
+	#timeline_activities {
+		position: relative;
+		font-size: 14px;
+	}
+
+	@media only screen and (min-width:1545px){
+		#timeline_activities {
+			font-size: 20px;
+		}
+
+		#timelineContainer{
+			height: 30vh;
+		}
+	}
+
+	@media only screen and (min-width:2560px){
+		#timeline_activities {
+			font-size: 28px;
+		}
+	}
+
+	#timeline_today {
+	  position: absolute;
+	  top: 0;
+	  left: 0;
+	  width: 0.25rem;
+	  height: 80%;
+    border: 2px dashed red;
+    border-width: 0.5px 1.5px;
+	}
+
+	.timebox {
+	  height: 80%;
+	  position: relative;
+    text-align: center;
+    border-right: 1px dashed #CCCCCC;
+		border-left: 1px dashed #CCCCCC;
+	}
+
+  .timebox_information {
+    position: absolute;
+    bottom: -24px;    
+  }
+
+	.timeNumber{
+		margin: 1.5px;
+	}
+
+	.activityCard {
+		position: relative;
+	}
+
+	.activityCard_container{
+		position: absolute;
+		display: flex;
+		padding: 0.5rem;
+		flex-direction: column;
+		gap: 0.5rem;
+		flex-shrink: 0;
+		border-radius: 0.75rem;
+		background: #E8F4FF;
+		margin-bottom: 1rem;
+	}
+
+	.activityCard_content{
+		display: inline-flex;
+		flex-direction: column;
+		gap: 0.25rem;
+    left: 0;
+    overflow: hidden;
+    padding: 4px 6px;
+    position: sticky;
+    max-width: max-content;
+	}
+
+	.activityCard_description {
+		overflow: hidden;
+		color: #000;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 1.4rem;
+		font-style: normal;
+		font-weight: 700;
+		margin: 0;
+		padding: 0;
+	}
+
+	.activityCard_details{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		max-width: max-content;
+		gap: 2rem;
+	}
+
+	.activityCard_details div{
+		display: flex;
+    align-items: center;
+    gap: 0 0.5rem;
+    max-width: 33.3%;
+    flex-wrap: wrap;
+	}
+
+  .activityCard_details div:nth-child(odd){
+    max-width: 35%;
+  }
+
+  .activityCard_details div:nth-child(even){
+    max-width: 30%;
+  }
+
+  .activityCard_details div b{
+    font-size: 1rem;
+    color: #000;
+    line-height: 1.2em;
+  }
+
+	.activityCard_details p{
+		font-size: 1rem;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 0.75rem;
+		margin: 0;
+		color: #000;
+	}
+
+	.activityCard:nth-child(n+1){
+		top: 0em;
+	}
+
+	.activityCard:nth-child(2n+2){
+		top: 4.5em;
+	}
+
+
+	.activityCard:nth-child(3n+3){
+		top: 8.7em;
+
+	}
 
+  #timeline_activities .activityFlexTop--1{
+    top: 0em;
+  }
+
+  #timeline_activities .activityFlexTop--2{
+    top: 4.5em;
+  }
+
+  #timeline_activities .activityFlexTop--3{
+    top: 9em;
+  }
+
+  #timeline_activities .activityUnique{
+    top: 2.1em;
+  }
+
+	#timelineAlert{
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+    gap: 0.5rem;
+    align-items: end;
+    padding-bottom: 6px;
+    position: absolute;
+    right: 2.5%;
+	}
+
+	#timelineAlert_container{
+		display: flex;
+		flex-direction: row;
+		gap: 2rem;
+	}
+
+	.timelineAlert_item{
+		display: flex;
+		flex-direction: row;
+		align-items: flex-end;
+		gap: 0.5rem;
+	}
+
+	.timelineAlert_item p{
+		font-size: 10px;
+		margin: 0;
+	}
+
+	.timelineAlert_item_color{
+		width: 10px;
+		height: 10px;
+		border-radius: 12.5px;
+		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{