diff --git a/scripts/taskList.js b/scripts/taskList.js index 4c9d27a..a9399f9 100644 --- a/scripts/taskList.js +++ b/scripts/taskList.js @@ -282,6 +282,11 @@ function importStyles() { loadGoogleFont(styles.taskFontFamily); } + document.documentElement.style.setProperty( + "--gap-between-scrolls", + `${configs.animation.gapBetweenScrolls}px` ?? "0px" + ); + const stylesToImport = Object.keys(styles).filter((style) => { return !style.includes("Background"); }); @@ -2591,9 +2596,9 @@ async function tests() { `followRythonDev2`, `followRythonDev3`, `followRythonDev4`, - `followRythonDev5`, - `followRythonDev6`, - `followRythonDev7`, + // `followRythonDev5`, + // `followRythonDev6`, + // `followRythonDev7`, ]; for (let i = 0; i < listOfStreamers.length; i++) { @@ -2617,24 +2622,20 @@ async function checkToAnimate() { let taskWrapper = document.querySelector(".task-wrapper"); let taskWrapperHeight = taskWrapper.clientHeight; + let secondary = document.querySelector(".secondary"); + // scroll task wrapper up and down once if (taskContainerHeight > taskWrapperHeight && !scrolling) { if (!scrolling) { - document.querySelector(".secondary").style.display = "flex"; + secondary.style.display = "flex"; let finalHeight = taskContainerHeight + configs.animation.gapBetweenScrolls; - let primaryKeyFrames = [ + let keyframes = [ { transform: `translateY(0)` }, { transform: `translateY(-${finalHeight}px)` }, ]; - - let secondaryKeyFrames = [ - { transform: `translateY(${finalHeight}px)` }, - { transform: `translateY(0)` }, - ]; - let scrollingSpeed = (finalHeight / scrollSpeed) * 1000; let options = { @@ -2645,11 +2646,11 @@ async function checkToAnimate() { primaryAnimation = document .querySelector(".primary") - .animate(primaryKeyFrames, options); + .animate(keyframes, options); secondaryAnimation = document .querySelector(".secondary") - .animate(secondaryKeyFrames, options); + .animate(keyframes, options); primaryAnimation.play(); secondaryAnimation.play(); @@ -2659,7 +2660,7 @@ async function checkToAnimate() { addAnimationListeners(); } } else if (!scrolling) { - document.querySelector(".secondary").style.display = "none"; + secondary.style.display = "none"; // cancel animations if (primaryAnimation) { diff --git a/styles/taskList.css b/styles/taskList.css index 251e33a..3f6411e 100644 --- a/styles/taskList.css +++ b/styles/taskList.css @@ -38,6 +38,7 @@ --task-margin-bottom: 5px; --task-horizontal-padding: 5px; --task-vertical-padding: 5px; + --gap-between-scrolls: 0; } * { @@ -82,7 +83,6 @@ transition: height 0.5s ease-out; } #main-container .task-wrapper { - animation: scrollTasks 20s linear infinite; width: 100%; height: 100%; overflow: hidden; @@ -96,8 +96,10 @@ border-radius: var(--body-border-radius); z-index: 1; } +#main-container .task-wrapper .task-container.secondary { + margin-top: var(--gap-between-scrolls); +} #main-container .task-wrapper .task-container { - position: absolute; width: inherit; left: 0; display: flex; diff --git a/styles/taskList.css.map b/styles/taskList.css.map index cce0662..99b871b 100644 --- a/styles/taskList.css.map +++ b/styles/taskList.css.map @@ -1 +1 @@ -{"version":3,"sources":["taskList.scss","taskList.css"],"names":[],"mappings":"AAAA;EACC,uBAAA;EACA,yBAAA;EAEA,gDAAA;EAEA,6BAAA;EACA,+BAAA;EACA,8BAAA;EAEA,mCAAA;EACA,iCAAA;EAEA,iCAAA;EACA,+BAAA;EAEA,6CAAA;EAEA,0BAAA;EACA,4BAAA;EACA,2BAAA;EAEA,wBAAA;EACA,gCAAA;EACA,0BAAA;EACA,0BAAA;EAEA,8BAAA;EAEA,2CAAA;EAEA,wBAAA;EACA,0BAAA;EACA,yBAAA;EAEA,sBAAA;EAEA,oBAAA;EACA,kBAAA;EACA,4BAAA;EAEA,2CAAA;EAEA,8BAAA;EACA,sBAAA;EACA,wBAAA;EAEA,0BAAA;EACA,wBAAA;EACA,yBAAA;EAEA,8BAAA;EACA,4BAAA;EAEA,yBAAA;EACA,8BAAA;EACA,4BAAA;AChBD;;ADmBA;EACC,SAAA;EACA,UAAA;EACA,sBAAA;AChBD;;ADoBA;EACC,WAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EAEA,8EAAA;EAGA,mDAAA;EAEA,yEAAA;EACA,6CAAA;EAEA,oCAAA;ACvBD;ADyBC;EACC,aAAA;EACA,8BAAA;EAEA,wEAAA;EAEA,mEAAA;EACA,0CAAA;EAEA,+BAAA;EACA,0CAAA;EAEA,sCAAA;EACA,kCAAA;EACA,sCAAA;AC3BF;AD6BE;EACC,6BAAA;AC3BH;AD6BE;EACC,UAAA;AC3BH;AD8BE;EACC,4CAAA;AC5BH;ADgCC;EACC,gCAAA;AC9BF;ADiCC;EACC,0CAAA;EAEA,WAAA;EACA,YAAA;EAEA,gBAAA;EAEA,kBAAA;EAEA,wCAAA;EAEA,6BAAA;EACA,oCAAA;EACA,gCAAA;EAEA,+BAAA;EAEA,+DAAA;EACA,wCAAA;EAEA,UAAA;ACvCF;ADyCE;EACC,kBAAA;EACA,cAAA;EAEA,OAAA;EAEA,aAAA;EACA,sBAAA;EAEA,mBAAA;EAEA,iBAAA;EACA,kBAAA;EAEA,kCAAA;EAEA,sCAAA;AC7CH;ADgDG;EACC,oEAAA;EAEA,wCAAA;EAEA,wCAAA;EAEA,wBAAA;EAEA,+DAAA;EACA,wCAAA;AClDJ;ADoDI;EACC,wCAAA;EACA,oCAAA;AClDL;ADqDI;EACC,mBAAA;ACnDL;ADqDK;EACC,aAAA;ACnDN;ADqDM;EACC,uBAAA;EACA,iCAAA;EACA,iBAAA;ACnDP;ADsDM;EACC,oBAAA;EACA,kCAAA;EACA,0CAAA;EACA,4BAAA;EACA,gBAAA;ACpDP;ADwDK;EACC,kCAAA;ACtDN;ADwDM;EACC,6BAAA;EACA,kCAAA;ACtDP;AD2DK;EACC,8CAAA;EACA,mCAAA;EAEA,gFAAA;EAGA,8CAAA;EAEA,uBAAA;EAAA,kBAAA;EAEA,4DAAA;AC9DN","file":"taskList.css"} \ No newline at end of file +{"version":3,"sources":["taskList.scss","taskList.css"],"names":[],"mappings":"AAAA;EACC,uBAAA;EACA,yBAAA;EAEA,gDAAA;EAEA,6BAAA;EACA,+BAAA;EACA,8BAAA;EAEA,mCAAA;EACA,iCAAA;EAEA,iCAAA;EACA,+BAAA;EAEA,6CAAA;EAEA,0BAAA;EACA,4BAAA;EACA,2BAAA;EAEA,wBAAA;EACA,gCAAA;EACA,0BAAA;EACA,0BAAA;EAEA,8BAAA;EAEA,2CAAA;EAEA,wBAAA;EACA,0BAAA;EACA,yBAAA;EAEA,sBAAA;EAEA,oBAAA;EACA,kBAAA;EACA,4BAAA;EAEA,2CAAA;EAEA,8BAAA;EACA,sBAAA;EACA,wBAAA;EAEA,0BAAA;EACA,wBAAA;EACA,yBAAA;EAEA,8BAAA;EACA,4BAAA;EAEA,yBAAA;EACA,8BAAA;EACA,4BAAA;EAEA,wBAAA;ACjBD;;ADoBA;EACC,SAAA;EACA,UAAA;EACA,sBAAA;ACjBD;;ADqBA;EACC,WAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EAEA,8EAAA;EAGA,mDAAA;EAEA,yEAAA;EACA,6CAAA;EAEA,oCAAA;ACxBD;AD0BC;EACC,aAAA;EACA,8BAAA;EAEA,wEAAA;EAEA,mEAAA;EACA,0CAAA;EAEA,+BAAA;EACA,0CAAA;EAEA,sCAAA;EACA,kCAAA;EACA,sCAAA;AC5BF;AD8BE;EACC,6BAAA;AC5BH;AD8BE;EACC,UAAA;AC5BH;AD+BE;EACC,4CAAA;AC7BH;ADiCC;EACC,gCAAA;AC/BF;ADkCC;EACC,WAAA;EACA,YAAA;EAEA,gBAAA;EAEA,kBAAA;EAEA,wCAAA;EAEA,6BAAA;EACA,oCAAA;EACA,gCAAA;EAEA,+BAAA;EAEA,+DAAA;EACA,wCAAA;EAEA,UAAA;ACvCF;ADyCE;EACC,sCAAA;ACvCH;AD0CE;EAEC,cAAA;EAEA,OAAA;EAEA,aAAA;EACA,sBAAA;EAEA,mBAAA;EAEA,iBAAA;EACA,kBAAA;EAEA,kCAAA;EAEA,sCAAA;AC/CH;ADkDG;EACC,oEAAA;EAEA,wCAAA;EAEA,wCAAA;EAEA,wBAAA;EAEA,+DAAA;EACA,wCAAA;ACpDJ;ADsDI;EACC,wCAAA;EACA,oCAAA;ACpDL;ADuDI;EACC,mBAAA;ACrDL;ADuDK;EACC,aAAA;ACrDN;ADuDM;EACC,uBAAA;EACA,iCAAA;EACA,iBAAA;ACrDP;ADwDM;EACC,oBAAA;EACA,kCAAA;EACA,0CAAA;EACA,4BAAA;EACA,gBAAA;ACtDP;AD0DK;EACC,kCAAA;ACxDN;AD0DM;EACC,6BAAA;EACA,kCAAA;ACxDP;AD6DK;EACC,8CAAA;EACA,mCAAA;EAEA,gFAAA;EAGA,8CAAA;EAEA,uBAAA;EAAA,kBAAA;EAEA,4DAAA;AChEN","file":"taskList.css"} \ No newline at end of file diff --git a/styles/taskList.scss b/styles/taskList.scss index 9773275..96c9083 100644 --- a/styles/taskList.scss +++ b/styles/taskList.scss @@ -55,6 +55,8 @@ --task-margin-bottom: 5px; --task-horizontal-padding: 5px; --task-vertical-padding: 5px; + + --gap-between-scrolls: 0; } * { @@ -114,8 +116,6 @@ } .task-wrapper { - animation: scrollTasks 20s linear infinite; - width: 100%; height: 100%; @@ -136,8 +136,12 @@ z-index: 1; + .task-container.secondary { + margin-top: var(--gap-between-scrolls); + } + .task-container { - position: absolute; + // position: absolute; width: inherit; left: 0;