From 8af31d6f13ba7ae6e0d6a83b0ea2b6b6892aeae1 Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Tue, 23 Apr 2024 07:37:28 -0500 Subject: [PATCH 1/5] :recycle: refactor(Timeline): height visualization --- marlo-web/src/main/webapp/crp/css/home/dashboard.css | 11 +++++------ marlo-web/src/main/webapp/crp/js/home/dashboard.js | 6 +++--- 2 files changed, 8 insertions(+), 9 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 index 0df6b0aab7..60569fc379 100644 --- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css +++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css @@ -415,10 +415,9 @@ span.timelineControl:hover { #timelineContainer { position: relative; - margin: 18px 30px 18px 30px; overflow-x: scroll; overflow-y: hidden; - height: 36vh; + height: 31vh; width: 80%; margin: 0 auto; } @@ -458,16 +457,16 @@ span.timelineControl:hover { #timeline_activities { position: relative; - font-size: 14px; + font-size: 13.5px; } @media only screen and (min-width:1545px){ #timeline_activities { - font-size: 20px; + font-size: 19.5px; } #timelineContainer{ - height: 30vh; + height: 26vh; } } @@ -609,7 +608,7 @@ span.timelineControl:hover { } #timeline_activities .activityUnique{ - top: 2.1em; + top: 2.25em; } #timelineAlert{ diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js index 29031ace16..49839f0492 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -309,7 +309,7 @@ function getIntersectedActivities() { break; case 2: if(document.documentElement.getBoundingClientRect().width > 1500){ - timelineContainer.style.height = "22vh"; + timelineContainer.style.height = "24.5vh"; } else { timelineContainer.style.height = "30vh"; } @@ -323,9 +323,9 @@ function getIntersectedActivities() { case 6: case 7: if(document.documentElement.getBoundingClientRect().width > 1500){ - timelineContainer.style.height = "30vh"; + timelineContainer.style.height = "31vh"; } else { - timelineContainer.style.height = "36vh"; + timelineContainer.style.height = "37vh"; } list_activities.forEach(activity => { $(activity).parent().removeClass("activityUnique"); From 78f552fd637a290e703ce42ac1e0def551b3af65 Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Thu, 25 Apr 2024 13:22:50 -0500 Subject: [PATCH 2/5] :recycle: refactor(Timeline): show more or less content --- .../main/webapp/crp/css/home/dashboard.css | 37 ++++++++++ .../src/main/webapp/crp/js/home/dashboard.js | 74 +++++++++++-------- 2 files changed, 82 insertions(+), 29 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 index 60569fc379..9e11a60b07 100644 --- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css +++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css @@ -528,6 +528,7 @@ span.timelineControl:hover { padding: 4px 6px; position: sticky; max-width: max-content; + z-index: 8; } .activityCard_description { @@ -580,6 +581,42 @@ span.timelineControl:hover { margin: 0; color: #000; } + + .activityCard_details--1{ + display: flex; + max-width: max-content; + gap: 0.5rem; + flex-direction: column; + z-index: 4; + } + + .activityCard_details--1 div{ + display: flex; + align-items: center; + gap: 0 0.5rem; + flex-wrap: wrap; + } + + .activityCard_viewMore p{ + font-size: 9px; + color: #000; + cursor: pointer; + } + + .activityCard_details--1 div b{ + font-size: 1rem; + color: #000; + line-height: 1.2em; + } + + .activityCard_details--1 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; diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js index 49839f0492..d50fcd1580 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -33,10 +33,24 @@ function initDashboard() { $('.circleMap').hover(itemMapHover, itemMap); + $(".activityCard_toggle").on("click", function(){ + let $x = $(this).parents(':has(.activityCard_details--1)').first().find('.activityCard_details--1'); + console.log($x); + if ($x.css("display") === "none") { + $x.css("display", "flex"); + $(this).find('.activityCard_toggle--deactive').css("display", "none"); + $(this).find('.activityCard_toggle--active').css("display", "block"); + } else { + $x.css("display", "none"); + $(this).find('.activityCard_toggle--deactive').css("display", "block"); + $(this).find('.activityCard_toggle--active').css("display", "none"); + } + }); + $('.activityCard_container').hover(function(){ const $info = $(this).find('.activityCard_description'); $info.tooltip(); - }) + }) } function itemMapHover() { @@ -274,7 +288,6 @@ function getIntersectedActivities() { $(activity).parent().removeClass("activityFlexTop--2"); $(activity).parent().removeClass("activityFlexTop--3"); }); - console.log(activitiesIntersected) activitiesIntersected.sort((a, b) => { const rectA = a.getBoundingClientRect(); const rectB = b.getBoundingClientRect(); @@ -379,34 +392,37 @@ function createDivActivities(activity, weeks, id) { const card = document.createElement('div'); card.className = 'activityCard'; card.id = `activityCard_${id}`; + const width = calculateAmountForWidth(activity.startDate, activity.endDate, weeks); card.innerHTML = ` -
- -
-

${activity.description}

-
-
- start_icon -

Start date: ${convertDateToText(activity.startDate)}

-
-
- Status: -

${status}

-
- -
- end_icon -

End date: ${convertDateToText(activity.endDate)}

-
-
-
-
+
+ +
+

${activity.description}

+
+
+

Start date: ${convertDateToText(activity.startDate)}

+
+
+ Status: +

${status}

+
+ +
+

End date: ${convertDateToText(activity.endDate)}

+
+
+
+

+ View more + +

+
+
`; - return card; } @@ -454,7 +470,7 @@ function calculateAmountForWidth(startDate, endDate, weeks) { function setWidth(amount) { - const extraAmount = amount < 0.3 ? 2.9/7 : amount > 1.5 ? -1.5/7 : 0; + const extraAmount = amount > 1.5 ? -1/7 : 0; const widthContainer = $('.sectionMap').width(); const widthInPx = `${widthContainer * 0.8}px`; return `calc(${amount !== undefined ? (amount + extraAmount) + "*(" + widthInPx + " / 2)" : "calc(" + widthInPx + " / 2)"} ) `; From ddcb1a2bc501a5d7c20c90dbef5524871dbe7616 Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Thu, 25 Apr 2024 13:26:38 -0500 Subject: [PATCH 3/5] :recycle: refactor(Timeline): buttons location --- marlo-web/src/main/webapp/crp/css/home/dashboard.css | 6 +++--- 1 file changed, 3 insertions(+), 3 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 index 9e11a60b07..6ad8448985 100644 --- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css +++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css @@ -342,7 +342,7 @@ span.timelineControl:hover { height: 40px; border-radius: 50%; position: absolute; - top: 50%; + top: 12.5%; transform: translateY(-50%); font-size: 27px; font-weight: bold; @@ -352,11 +352,11 @@ span.timelineControl:hover { } .buttonLeftTimeline { - left: 2.5%; + left: 39%; } .buttonRightTimeline { - right: 2.5%; + right: 39%; } .timelineBackSuccess { From 481b706f784c9d95ab40e5b77bf3899869772f35 Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Thu, 25 Apr 2024 14:54:08 -0500 Subject: [PATCH 4/5] :recycle: refactor(Timeline): visual changes in elements --- .../main/webapp/crp/css/home/dashboard.css | 26 ++++++----- .../src/main/webapp/crp/js/home/dashboard.js | 44 +++++++++---------- 2 files changed, 36 insertions(+), 34 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 index 6ad8448985..3c296bd86f 100644 --- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css +++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css @@ -342,7 +342,7 @@ span.timelineControl:hover { height: 40px; border-radius: 50%; position: absolute; - top: 12.5%; + top: 15%; transform: translateY(-50%); font-size: 27px; font-weight: bold; @@ -418,7 +418,7 @@ span.timelineControl:hover { overflow-x: scroll; overflow-y: hidden; height: 31vh; - width: 80%; + width: 95%; margin: 0 auto; } @@ -496,7 +496,8 @@ span.timelineControl:hover { .timebox_information { position: absolute; - bottom: -24px; + top: -12px; + left: 6px; } .timeNumber{ @@ -619,44 +620,45 @@ span.timelineControl:hover { } .activityCard:nth-child(n+1){ - top: 0em; + top: 1.5em; } .activityCard:nth-child(2n+2){ - top: 4.5em; + top: 6em; } .activityCard:nth-child(3n+3){ - top: 8.7em; + top: 10.5em; } #timeline_activities .activityFlexTop--1{ - top: 0em; + top: 1.5em; } #timeline_activities .activityFlexTop--2{ - top: 4.5em; + top: 6em; } #timeline_activities .activityFlexTop--3{ - top: 9em; + top: 10.5em; } #timeline_activities .activityUnique{ - top: 2.25em; + top: 2.5em; } #timelineAlert{ display: flex; - flex-direction: column; + flex-direction: row; justify-content: flex-end; gap: 0.5rem; align-items: end; padding-bottom: 6px; position: absolute; right: 2.5%; + bottom: 2.5%; } #timelineAlert_container{ @@ -668,7 +670,7 @@ span.timelineControl:hover { .timelineAlert_item{ display: flex; flex-direction: row; - align-items: flex-end; + align-items: center; gap: 0.5rem; } diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js index d50fcd1580..f0604e436c 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -174,7 +174,7 @@ function moveScrollRight() { const element = document.getElementById("timelineContainer"); const widthContainer = $('.sectionMap').width(); - const containerSize = widthContainer * 0.8; + const containerSize = widthContainer * 0.95; element.style.scrollBehavior = "smooth" element.scrollLeft += (containerSize); @@ -189,7 +189,7 @@ function moveScrollLeft() { const element = document.getElementById("timelineContainer"); const widthContainer = $('.sectionMap').width(); - const containerSize = widthContainer * 0.8; + const containerSize = widthContainer * 0.95; element.style.scrollBehavior = "smooth" element.scrollLeft -= (containerSize); @@ -472,7 +472,7 @@ function setWidth(amount) { const extraAmount = amount > 1.5 ? -1/7 : 0; const widthContainer = $('.sectionMap').width(); - const widthInPx = `${widthContainer * 0.8}px`; + const widthInPx = `${widthContainer * 0.95}px`; return `calc(${amount !== undefined ? (amount + extraAmount) + "*(" + widthInPx + " / 2)" : "calc(" + widthInPx + " / 2)"} ) `; } function setDistances(weeks, startDate, endDate, isToday) { @@ -486,7 +486,7 @@ function setDistances(weeks, startDate, endDate, isToday) { const percentageCompletion = ((currentHour / 24)/7)/2; const widthContainer = $('.sectionMap').width(); - const containerSize = widthContainer * 0.8; + const containerSize = widthContainer * 0.95; const getWeekDistance = getWeekBasedOnDay(startDate, weeks); const getDayDistance = (getAbsoluteDays(startDate, getFirstDateOfTheWeek(startDate))) / 7; @@ -508,7 +508,7 @@ function setTimelinePosition() { const timelineContainer = document.getElementById("timelineContainer"); const widthContainer = $('.sectionMap').width(); - const containerSize = widthContainer * 0.8; + const containerSize = widthContainer * 0.95; timelineContainer.scrollLeft += ((getWeekBasedOnDay(today, getWeeksArray)/2) * (containerSize)); @@ -529,23 +529,6 @@ function createTimeline2() {
Schedule
-
- Progress status: -
-
-
-

Not started

-
-
-
-

In progress

-
-
-
-

Completed

-
-
-
@@ -558,6 +541,23 @@ function createTimeline2() {
+
+ Progress status: +
+
+
+

Not started

+
+
+
+

In progress

+
+
+
+

Completed

+
+
+
` } From 82e54b40e5cb0158458c0356e82cad3424c7b84e Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Thu, 25 Apr 2024 16:05:43 -0500 Subject: [PATCH 5/5] :bug: fix(Timeline): display Item visualization --- marlo-web/src/main/webapp/crp/css/home/dashboard.css | 1 + marlo-web/src/main/webapp/crp/js/home/dashboard.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/marlo-web/src/main/webapp/crp/css/home/dashboard.css b/marlo-web/src/main/webapp/crp/css/home/dashboard.css index 3c296bd86f..eb869a53a0 100644 --- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css +++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css @@ -518,6 +518,7 @@ span.timelineControl:hover { border-radius: 0.75rem; background: #E8F4FF; margin-bottom: 1rem; + z-index: 4; } .activityCard_content{ diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js index f0604e436c..d7a9231483 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -40,10 +40,12 @@ function initDashboard() { $x.css("display", "flex"); $(this).find('.activityCard_toggle--deactive').css("display", "none"); $(this).find('.activityCard_toggle--active').css("display", "block"); + $(this).closest('.activityCard').css("z-index", 8); } else { $x.css("display", "none"); $(this).find('.activityCard_toggle--deactive').css("display", "block"); $(this).find('.activityCard_toggle--active').css("display", "none"); + $(this).closest('.activityCard').css("z-index"); } });