chore(refresher): update times

mbaraa · Jun 4, 2024 · 380564f · 380564f
1 parent 3d52037
commit 380564f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/app/static/css/refresher.css b/app/static/css/refresher.css
@@ -8,7 +8,7 @@ body.refreshing header {
 
 body.refreshing .refresher {
   transform: translate3d(0, 150%, 0) scale(1);
-  z-index: 1;
+  z-index: 50;
   visibility: visible;
 }
 
@@ -26,8 +26,8 @@ body.refreshing .refresher {
     0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 1px 5px 0 rgba(0, 0, 0, 0.12),
     0 3px 1px -2px rgba(0, 0, 0, 0.2);
-  transition: all 300ms cubic-bezier(0, 0, 0.2, 1);
-  will-change: transform, opacity;
+  transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
+  will-change: transform;
   display: inline-flex;
   justify-content: space-evenly;
   align-items: center;
@@ -44,26 +44,23 @@ body.refreshing .refresher.shrink {
 }
 
 .loading-bar {
+  background-color: var(--primary-color);
   width: 4px;
   height: 18px;
   border-radius: 4px;
-  animation: loading 1s ease-in-out infinite;
+  animation: loading 0.81s ease-in-out infinite;
 }
 
 .loading-bar:nth-child(1) {
-  background-color: var(--primary-color);
   animation-delay: 0;
 }
 .loading-bar:nth-child(2) {
-  background-color: var(--primary-color);
   animation-delay: 0.09s;
 }
 .loading-bar:nth-child(3) {
-  background-color: var(--primary-color);
   animation-delay: 0.18s;
 }
 .loading-bar:nth-child(4) {
-  background-color: var(--primary-color);
   animation-delay: 0.27s;
 }
 

diff --git a/app/static/js/refresher.js b/app/static/js/refresher.js
@@ -25,7 +25,7 @@ async function simulateRefreshAction() {
   const refresher = document.querySelector(".refresher");
 
   document.body.classList.add("refreshing");
-  await sleep(700);
+  await sleep(500);
 
   refresher.classList.add("shrink");
   await transitionEnd("transform", refresher);
@@ -37,21 +37,21 @@ async function simulateRefreshAction() {
   refresher.classList.remove("done");
 }
 
-mainContentsEl.addEventListener(
+document.body.addEventListener(
   "touchstart",
   (e) => {
     _startY = e.touches[0].pageY;
   },
   { passive: true },
 );
 
-mainContentsEl.addEventListener(
+document.body.addEventListener(
   "touchmove",
   async (e) => {
     const y = e.touches[0].pageY;
     if (
       document.scrollingElement.scrollTop === 0 &&
-      y > _startY &&
+      y > _startY + 150 &&
       !document.body.classList.contains("refreshing")
     ) {
       await simulateRefreshAction();