Skip to content

Commit

Permalink
Merge pull request #2499 from CCAFS/A2-311-Timeline-visual-change
Browse files Browse the repository at this point in the history 
A2 311 second test update
  • Loading branch information
@MetalPrime
MetalPrime authored Apr 4, 2024
2 parents 049b5fc + f154ec6 commit 44d9343
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 28 deletions.
81 changes: 69 additions & 12 deletions marlo-web/src/main/webapp/crp/css/home/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,11 +352,11 @@ span.timelineControl:hover {
}

.buttonLeftTimeline {
left: 0.75rem;
left: 2.5%;
}

.buttonRightTimeline {
right: 0.75rem;
right: 2.5%;
}

.timelineBackSuccess {
Expand Down Expand Up @@ -416,11 +416,10 @@ span.timelineControl:hover {
#timelineContainer {
position: relative;
margin: 18px 30px 18px 30px;
scroll-behavior: smooth;
overflow-x: scroll;
overflow-y: hidden;
height: 36vh;
width: 80vw;
width: 80%;
margin: 0 auto;
}

Expand All @@ -433,7 +432,7 @@ span.timelineControl:hover {
justify-content: space-between;
padding: 18px 30px 18px 30px;
width: 100%;
align-items: baseline;
align-items: end;
}

#timelineDescription_title{
Expand All @@ -453,24 +452,38 @@ span.timelineControl:hover {
margin-bottom: 10px;
padding: 5px 0;
position: absolute;
height: 100%;
}

#timeline_activities {
position: relative;
font-size: 14px;
}

@media only screen and (min-height:975px){
#timeline_activities {
font-size: 18px;
}
}

@media only screen and (min-height:1170px){
#timeline_activities {
font-size: 20px;
}
}

#timeline_today {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
height: 80%;
background-color: red;
border-radius: 5px;
}

.timebox {
height: 198px;
height: 80%;
position: relative;
text-align: center;
border-right: 1px dashed #CCCCCC;
Expand Down Expand Up @@ -513,7 +526,7 @@ span.timelineControl:hover {
color: #000;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.5rem;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
margin: 0;
Expand All @@ -539,23 +552,67 @@ span.timelineControl:hover {
font-weight: 400;
line-height: 0.75rem;
margin: 0;
color: #000;
}

.activityCard:nth-child(n+1){
top: 48px;
top: 3.4em;
}

.activityCard:nth-child(2n+2){
top: 108px;
top: 7.8em;
}


.activityCard:nth-child(3n+3){
top: 168px;
top: 12.1em;

}

#timelineAlert{
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.5rem;
align-items: end;
padding-bottom: 6px;
}

#timelineAlert_container{
display: flex;
flex-direction: row;
gap: 2rem;
}

.timelineAlert_item{
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0.5rem;
}

.timelineAlert_item p{
font-size: 10px;
}

.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{
Expand Down
56 changes: 40 additions & 16 deletions marlo-web/src/main/webapp/crp/js/home/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,18 +152,22 @@ function locateContentDialog(id){

function moveScrollRight() {
const element = document.getElementById("timelineContainer");
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const containerSize = vw * 0.8;

const widthContainer = $('.sectionMap').width();
const containerSize = widthContainer * 0.8;

element.scrollLeft += containerSize;
element.style.scrollBehavior = "smooth"
element.scrollLeft += (containerSize+(containerSize* (2/5)));
}

function moveScrollLeft() {
const element = document.getElementById("timelineContainer");
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const containerSize = vw * 0.8;

const widthContainer = $('.sectionMap').width();
const containerSize = widthContainer * 0.8;

element.scrollLeft -= containerSize;
element.style.scrollBehavior = "smooth"
element.scrollLeft -= (containerSize+(containerSize* (2/5)));
}

const convertDateToAfricanDate = (date) => {
Expand Down Expand Up @@ -230,12 +234,12 @@ function createDivActivities(activity, id){
<div class="activityCard_details">
<div>
<img src=${baseURL +"/global/images/start_date.png"} alt="start_icon" />
<p><b>Start date:</b> ${activity.startDate}</p>
<p><b>Start date:</b> ${convertDateToText(activity.startDate,true)}</p>
</div>
<p><b>Status:</b> ${status} </p>
<div>
<img src=${baseURL +"/global/images/end_date.png"} alt="end_icon" />
<p><b>End date:</b> ${activity.endDate}</p>
<p><b>End date:</b> ${convertDateToText(activity.endDate,true)}</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -273,8 +277,9 @@ const setStatusColor = (status) => {
}

function setWidth(amount) {

return `calc(${amount !==undefined? (amount === 0? 3: amount)+"*(80vw / 7))": "calc(80vw / 7)"}`;
const widthContainer = $('.sectionMap').width();
const widthInPx = `${widthContainer * 0.8}px`;
return `calc(${amount !==undefined? (amount === 0? 3: amount)+"*("+widthInPx+" / 5) - 10px)": "calc("+widthInPx+" / 5)"}`;
}

function setDistances(startDate,isToday, isJS,endDate) {
Expand All @@ -287,25 +292,27 @@ function setDistances(startDate,isToday, isJS,endDate) {
const currentHour = today.getHours();
const percentageCompletion = (currentHour / 24);

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
let containerSize = vw * 0.8;

const widthContainer = $('.sectionMap').width();
const widthInPx = `${widthContainer * 0.8}px`;
const containerSize = widthContainer*0.8;

const isFinalActivity = new Date(lastDate).getTime() === new Date(endDate).getTime();

if(isJS){

if(isToday){
return (getAbsoluteDays(firstDate,today,1) * ((containerSize/7) + ((containerSize/7)*percentageCompletion)) )
return (getAbsoluteDays(firstDate,today,1) * ((containerSize/5) + ((containerSize/5)*percentageCompletion)) )
}

return ((isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate) ) * (containerSize/7))
return ((isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate) ) * (containerSize/5))

} else {

if(isToday){
return `calc(${getAbsoluteDays(firstDate, today,1)} * (80vw / 7) + ((80vw / 7)* ${percentageCompletion}) )`;
return `calc(${getAbsoluteDays(firstDate, today,1)} * (${widthInPx} / 5) + ((${widthInPx} / 5)* ${percentageCompletion}) )`;
}
return `calc((${isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate)}) * (80vw / 7))`;
return `calc((${isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate)}) * (${widthInPx} / 5))`;
}
}

Expand All @@ -332,6 +339,23 @@ function createTimeline2() {
<div id="timelineDescription_title">
<b>Schedule</b>
</div>
<div id="timelineAlert">
<b>Progress status:</b>
<section id="timelineAlert_container">
<article class="timelineAlert_item">
<div class="timelineAlert_item_color timelineAlert_item_color--1"></div>
<p>Not started</p>
</article>
<article class="timelineAlert_item">
<div class="timelineAlert_item_color timelineAlert_item_color--2"></div>
<p>In progress</p>
</article>
<article class="timelineAlert_item">
<div class="timelineAlert_item_color timelineAlert_item_color--3"></div>
<p>Completed</p>
</article>
</section>
</div>
</div>
<div id="timelineContainer">
<div id="timeline_times">
Expand Down

0 comments on commit 44d9343

Please sign in to comment.