From b939dab1e0eb82429116221f76b2e5af3b55060c Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 9 Aug 2024 18:59:01 +0300 Subject: [PATCH 1/3] fix: sticky of claim button --- .../withdrawals/claim/form/claim-form-footer-sticky.tsx | 1 + features/withdrawals/claim/form/styles.ts | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/features/withdrawals/claim/form/claim-form-footer-sticky.tsx b/features/withdrawals/claim/form/claim-form-footer-sticky.tsx index 7de18044b..160581206 100644 --- a/features/withdrawals/claim/form/claim-form-footer-sticky.tsx +++ b/features/withdrawals/claim/form/claim-form-footer-sticky.tsx @@ -132,6 +132,7 @@ export const ClaimFormFooterSticky: FC< <> diff --git a/features/withdrawals/claim/form/styles.ts b/features/withdrawals/claim/form/styles.ts index 314431a95..d98ec4533 100644 --- a/features/withdrawals/claim/form/styles.ts +++ b/features/withdrawals/claim/form/styles.ts @@ -83,9 +83,12 @@ export const ClaimFooterBodyEnder = styled.div` } `; -export const ClaimFormFooterWrapper = styled.div<{ isSticked: boolean }>` +export const ClaimFormFooterWrapper = styled.div<{ + isSticked: boolean; + footerShift: number; +}>` position: ${({ isSticked }) => (isSticked ? 'sticky' : 'relative')}; - bottom: 0; + bottom: ${({ footerShift }) => (footerShift ? `${footerShift}px` : '0px')}; ${({ isSticked }) => isSticked && css` From b6a7b6efe1e90b792bc02f54812b4b0c9e650b04 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 9 Aug 2024 18:59:01 +0300 Subject: [PATCH 2/3] fix: sticky of claim button --- features/withdrawals/claim/form/claim-form-footer-sticky.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/features/withdrawals/claim/form/claim-form-footer-sticky.tsx b/features/withdrawals/claim/form/claim-form-footer-sticky.tsx index 160581206..ab921ff07 100644 --- a/features/withdrawals/claim/form/claim-form-footer-sticky.tsx +++ b/features/withdrawals/claim/form/claim-form-footer-sticky.tsx @@ -91,7 +91,6 @@ export const ClaimFormFooterSticky: FC< const currFooterShift = footerHeight - Math.min(distanceFromElStart, footerHeight) - menuOffset; if (currFooterShift !== scrollState.footerShift) { - elFooter.style.setProperty('bottom', `${-currFooterShift}px`); scrollState.footerShift = currFooterShift; } } else { From e97346f7f85ad2f8f51ef1fad9a009d34b614fba Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 13 Aug 2024 14:05:57 +0300 Subject: [PATCH 3/3] feat(qw claim): removed explicit bottom-position from 'claim footer sticky' --- .../claim/form/claim-form-footer-sticky.tsx | 15 --------------- features/withdrawals/claim/form/styles.ts | 7 ++----- 2 files changed, 2 insertions(+), 20 deletions(-) diff --git a/features/withdrawals/claim/form/claim-form-footer-sticky.tsx b/features/withdrawals/claim/form/claim-form-footer-sticky.tsx index ab921ff07..5c67b481a 100644 --- a/features/withdrawals/claim/form/claim-form-footer-sticky.tsx +++ b/features/withdrawals/claim/form/claim-form-footer-sticky.tsx @@ -22,7 +22,6 @@ const STICK_CHECKPOINT_OFFSET = type ScrollState = { isSticked: boolean; - footerShift: number; }; type ScrollStateSetter = < @@ -49,7 +48,6 @@ export const ClaimFormFooterSticky: FC< // frequent operations performant during scroll const { current: scrollState } = useRef({ isSticked: false, - footerShift: -1, }); const setStateAndUpdate = useCallback( @@ -70,7 +68,6 @@ export const ClaimFormFooterSticky: FC< const { y: screenH, x: screenW } = getScreenSize(); const rectRequests = elRequests.getBoundingClientRect(); const rectFooter = elFooter.getBoundingClientRect(); - const footerHeight = elFooter.clientHeight; const menuOffset = screenW < NAV_MOBILE_MAX_WIDTH ? NAV_MOBILE_HEIGHT : 0; // Calcs @@ -87,16 +84,8 @@ export const ClaimFormFooterSticky: FC< if (!scrollState.isSticked) { setStateAndUpdate('isSticked', true); } - - const currFooterShift = - footerHeight - Math.min(distanceFromElStart, footerHeight) - menuOffset; - if (currFooterShift !== scrollState.footerShift) { - scrollState.footerShift = currFooterShift; - } } else { if (scrollState.isSticked) { - scrollState.footerShift = -1; - elFooter.style.removeProperty('bottom'); setStateAndUpdate('isSticked', false); } } @@ -106,7 +95,6 @@ export const ClaimFormFooterSticky: FC< const positionInitializatorEffect = useCallback(() => { if (!isEnabled) return; - const elFooter = refFooter.current; // Event subscriptions window.addEventListener('resize', updatePosition, { passive: true }); @@ -115,8 +103,6 @@ export const ClaimFormFooterSticky: FC< return () => { window.removeEventListener('resize', updatePosition); window.removeEventListener('scroll', updatePosition); - scrollState.footerShift = -1; - if (elFooter) elFooter.style.removeProperty('bottom'); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [isEnabled]); @@ -131,7 +117,6 @@ export const ClaimFormFooterSticky: FC< <> diff --git a/features/withdrawals/claim/form/styles.ts b/features/withdrawals/claim/form/styles.ts index d98ec4533..6a7b8b614 100644 --- a/features/withdrawals/claim/form/styles.ts +++ b/features/withdrawals/claim/form/styles.ts @@ -83,12 +83,9 @@ export const ClaimFooterBodyEnder = styled.div` } `; -export const ClaimFormFooterWrapper = styled.div<{ - isSticked: boolean; - footerShift: number; -}>` +export const ClaimFormFooterWrapper = styled.div<{ isSticked: boolean }>` position: ${({ isSticked }) => (isSticked ? 'sticky' : 'relative')}; - bottom: ${({ footerShift }) => (footerShift ? `${footerShift}px` : '0px')}; + bottom: ${({ isSticked }) => (isSticked ? `60px` : '0px')}; ${({ isSticked }) => isSticked && css`