Fix threshold for larger-than-viewport statuses

This commit is contained in:
Lim Chee Aun 2022-12-29 16:15:58 +08:00
parent 6ffc40fdf3
commit 3338c49c25

View file

@ -270,7 +270,7 @@ function StatusPage({ id }) {
const onView = useDebouncedCallback(setHeroInView, 100); const onView = useDebouncedCallback(setHeroInView, 100);
const heroPointer = useMemo(() => { const heroPointer = useMemo(() => {
// get top offset of heroStatus // get top offset of heroStatus
if (!heroStatusRef.current) return null; if (!heroStatusRef.current || heroInView) return null;
const { top } = heroStatusRef.current.getBoundingClientRect(); const { top } = heroStatusRef.current.getBoundingClientRect();
return top > 0 ? 'down' : 'up'; return top > 0 ? 'down' : 'up';
}, [heroInView]); }, [heroInView]);
@ -358,7 +358,7 @@ function StatusPage({ id }) {
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`} } ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
> >
{isHero ? ( {isHero ? (
<InView threshold={0.5} onChange={onView}> <InView threshold={0.25} onChange={onView}>
<Status statusID={statusID} withinContext size="l" /> <Status statusID={statusID} withinContext size="l" />
</InView> </InView>
) : ( ) : (