From b0f7886fca780a698467e904271e0f8d86b98340 Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Mon, 22 Apr 2024 09:52:37 -0500 Subject: [PATCH 1/2] :recycle: refactor(Timeline): unique item --- .../src/main/webapp/crp/css/home/dashboard.css | 4 ++++ .../src/main/webapp/crp/js/home/dashboard.js | 16 +++++++++++++--- 2 files changed, 17 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 1c6036341a..d8c0b8593a 100644 --- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css +++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css @@ -623,6 +623,10 @@ span.timelineControl:hover { .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{ top: -0.3em; } + + #timeline_activities .activityUnique{ + top: 2.1em; + } #timelineAlert{ display: flex; 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 93221229c1..25e9b0b55e 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -274,7 +274,11 @@ function getIntersectedActivities() { }); activitiesIntersected.forEach(activity => { - $(activity).parent().addClass("activityFlexTop"); + if(activitiesIntersected.length === 1){ + $(activity).parent().addClass("activityUnique"); + } else { + $(activity).parent().addClass("activityFlexTop"); + } }); switch(activitiesIntersected.length){ @@ -292,22 +296,28 @@ function getIntersectedActivities() { } else { timelineContainer.style.height = "30vh"; } + list_activities.forEach(activity => { + $(activity).parent().removeClass("activityUnique"); + }); break; case 3: case 4: case 5: case 6: - case 7: if(document.documentElement.getBoundingClientRect().width > 1500){ timelineContainer.style.height = "30vh"; } else { timelineContainer.style.height = "36vh"; } + list_activities.forEach(activity => { + $(activity).parent().removeClass("activityUnique"); + }); break; default: timelineContainer.style.removeProperty("height"); - activitiesIntersected.forEach(activity => { + list_activities.forEach(activity => { $(activity).parent().removeClass("activityFlexTop"); + $(activity).parent().removeClass("activityUnique"); }); break; } From 6400477614045c81c747ffb23cc83396613a2157 Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Mon, 22 Apr 2024 11:36:48 -0500 Subject: [PATCH 2/2] :recycle: refactor(Timeline): changes in flex items rules --- .../main/webapp/crp/css/home/dashboard.css | 32 +++++-------------- .../src/main/webapp/crp/js/home/dashboard.js | 30 ++++++++++++++--- 2 files changed, 33 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 d8c0b8593a..0df6b0aab7 100644 --- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css +++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css @@ -583,11 +583,11 @@ span.timelineControl:hover { } .activityCard:nth-child(n+1){ - top: -0.3em; + top: 0em; } .activityCard:nth-child(2n+2){ - top: 4.2em; + top: 4.5em; } @@ -596,32 +596,16 @@ span.timelineControl:hover { } - .activityCard ~ .activityFlexTop{ - top: -0.3em; + #timeline_activities .activityFlexTop--1{ + top: 0em; } - .activityFlexTop ~ .activityFlexTop{ - top: 4.2em; + #timeline_activities .activityFlexTop--2{ + top: 4.5em; } - .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{ - top: 8.7em; - } - - .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{ - top: -0.3em; - } - - .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{ - top: 4.2em; - } - - .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{ - top: 8.7em; - } - - .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop ~ .activityFlexTop{ - top: -0.3em; + #timeline_activities .activityFlexTop--3{ + top: 9em; } #timeline_activities .activityUnique{ 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 25e9b0b55e..29031ace16 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -267,17 +267,34 @@ function getIntersectedActivities() { entries.forEach(entry => { const activity = entry.target; - if (entry.isIntersecting) { + if (entry.isIntersecting && entry.intersectionRatio > 0.025) { activitiesIntersected.push(activity); } - $(activity).parent().removeClass("activityFlexTop"); + $(activity).parent().removeClass("activityFlexTop--1"); + $(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(); + return rectA.left - rectB.left; }); activitiesIntersected.forEach(activity => { if(activitiesIntersected.length === 1){ $(activity).parent().addClass("activityUnique"); } else { - $(activity).parent().addClass("activityFlexTop"); + + const index = activitiesIntersected.indexOf(activity); + if(index % 3 === 0){ + $(activity).parent().addClass("activityFlexTop--1"); + } else if(index % 3 === 1){ + $(activity).parent().addClass("activityFlexTop--2"); + } else if(index % 3 === 2){ + $(activity).parent().addClass("activityFlexTop--3"); + } + } }); @@ -304,6 +321,7 @@ function getIntersectedActivities() { case 4: case 5: case 6: + case 7: if(document.documentElement.getBoundingClientRect().width > 1500){ timelineContainer.style.height = "30vh"; } else { @@ -316,7 +334,9 @@ function getIntersectedActivities() { default: timelineContainer.style.removeProperty("height"); list_activities.forEach(activity => { - $(activity).parent().removeClass("activityFlexTop"); + $(activity).parent().removeClass("activityFlexTop--1"); + $(activity).parent().removeClass("activityFlexTop--2"); + $(activity).parent().removeClass("activityFlexTop--3"); $(activity).parent().removeClass("activityUnique"); }); break; @@ -331,7 +351,7 @@ function getIntersectedActivities() { setTimeout(() => { observer.disconnect(); - }, 25); + }, 500); // Adjust the time as per your scroll smooth time }