Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A2 311 second test update #2499

Merged
merged 10 commits into from
Apr 4, 2024
Merged

A2 311 second test update #2499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
076d5d5
:bug: fix(Timeline): center the schedule title
MetalPrime Apr 3, 2024
2822adf
:bug: fix(Timeline): update date format
MetalPrime Apr 3, 2024
1f2eab0
:bug: fix(Timeline): Adjust font
MetalPrime Apr 3, 2024
78424fd
:bug: fix(Timeline): check that the timeline field as such does not o…
MetalPrime Apr 3, 2024
110c7a0
:bug: fix(Timeline): Adds space between elements
MetalPrime Apr 3, 2024
4300d62
:bug: fix(Timeline): avoid white space
MetalPrime Apr 4, 2024
135c23a
:bug: fix(Timeline):adjust the spacing between divisions
MetalPrime Apr 4, 2024
6680932
:bug: fix(Timeline):Please update to weekly range - from Mon to Fri
MetalPrime Apr 4, 2024
e69ab1e
:bug: fix(Timeline):Add color code for the taks bar
MetalPrime Apr 4, 2024
f154ec6
:bug: fix(Timeline):Timeline makes a tour of all the tasks before rea…
MetalPrime Apr 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 69 additions & 12 deletions marlo-web/src/main/webapp/crp/css/home/dashboard.css
View file
Open in desktop
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
Open in desktop
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
Loading