fix: fix scrolling issues, glitchy navbar, and scroll down button pos…

…ition
acid-info · Jun 2, 2023 · b64e5db · b64e5db
1 parent 7a810db
commit b64e5db
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 45 deletions.
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx
@@ -1,20 +1,15 @@
 import clsx from 'clsx'
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'
+import React, { PropsWithChildren } from 'react'
 import { useHero } from '../Hero/Hero.context'
+import { ScrollToBottom } from '../index'
 import './HeroInfo.scss'
-import { useScrollY } from '../../../lib/useScrollY'
-import { calcScrollThreshold, mapFloat } from '../../../lib/ui.utils'
-import { ScrollToBottom } from '@logos-theme/components/Button/ScrollToBottom'
 
 export type HeroInfoProps = PropsWithChildren<
   React.HTMLAttributes<HTMLDivElement>
 > & {
   size?: 'medium' | 'large' | 'small'
 }
 
-const calcMaxOffsetY = () => {
-  return window.innerHeight * 0.1
-}
 export const HeroInfo: React.FC<HeroInfoProps> = ({
   size: sizeProp,
   className,
@@ -23,43 +18,16 @@ export const HeroInfo: React.FC<HeroInfoProps> = ({
 }) => {
   const ctx = useHero()
   const size = sizeProp ? sizeProp : ctx ? ctx.size : 'medium'
-  const scrollY = useScrollY()
-  const ref = useRef<HTMLDivElement>()
-  const [initialMarginBottom, setInitialMarginBottom] = useState<number | null>(
-    null,
-  )
-
-  const getMarginBottom = () => {
-    const offsetY = mapFloat(
-      scrollY,
-      0,
-      calcScrollThreshold(),
-      0,
-      calcMaxOffsetY(),
-    )
-    return initialMarginBottom ? initialMarginBottom - offsetY : 0
-  }
-
-  useEffect(() => {
-    if (typeof window === 'undefined' || !(ref && ref.current)) return
-    setInitialMarginBottom(
-      parseFloat(window.getComputedStyle(ref.current).marginBottom),
-    )
-  }, [])
 
   return (
     <>
       <div
         className={clsx(className, 'mdx-hero-info', `mdx-hero-info--${size}`)}
-        style={{
-          ...(initialMarginBottom ? { marginBottom: getMarginBottom() } : {}),
-        }}
-        ref={ref}
         {...(props as any)}
       >
         {children}
       </div>
-      <ScrollToBottom bottom={getMarginBottom()} />
+      <ScrollToBottom />
     </>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/index.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/index.tsx
@@ -1,9 +1,36 @@
 import React from 'react'
+import { calcScrollThreshold, mapFloat } from '../../../lib/ui.utils'
+import { useScrollY } from '../../../lib/useScrollY'
 import { HeroModel as Model, HeroModelProps } from './HeroModel'
 
+const calcMaxOffsetY = () => {
+  return window.innerHeight * 0.1
+}
+
 export const HeroModel: React.FC<HeroModelProps> = (props) => {
   if (typeof window === 'undefined') return null
-  return <Model {...props} />
+
+  const scrollY = useScrollY()
+  const offsetY = mapFloat(
+    scrollY,
+    0,
+    calcScrollThreshold(),
+    0,
+    calcMaxOffsetY(),
+  )
+
+  return (
+    <div
+      style={{
+        transform: `translateY(${offsetY}px)`,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+      }}
+    >
+      <Model {...props} />
+    </div>
+  )
   // return (
   //   <BrowserOnly>
   //     {() => {

diff --git a/.../Button/ScrollToBottom/ScrollToBottom.tsx → ...nts/mdx/ScrollToBottom/ScrollToBottom.tsx b/.../Button/ScrollToBottom/ScrollToBottom.tsx → ...nts/mdx/ScrollToBottom/ScrollToBottom.tsx
@@ -3,28 +3,32 @@ import clsx from 'clsx'
 import React, { HTMLProps } from 'react'
 import styles from './styles.module.scss'
 
-type TProps = {
-  bottom: number
-}
+type TProps = {}
 
 export const ScrollToBottom = (
   props: TProps & HTMLProps<HTMLButtonElement>,
 ): JSX.Element => {
-  const { children, className, bottom, ...rest } = props
+  const { children, className, ...rest } = props
 
   const handleScrollToBottom = () => {
-    window.scrollTo({
-      top: document.body.scrollHeight,
-      behavior: 'smooth',
-    })
+    const article = document.querySelector('.main-wrapper article')
+    const secondElement = article?.children?.[1]
+
+    if (!secondElement)
+      return void window.scrollTo({
+        top: document.body.scrollHeight,
+        behavior: 'smooth',
+      })
+    ;(secondElement as HTMLElement)?.scrollIntoView?.({ behavior: 'smooth' })
+
+    return
   }
 
   return (
     <IconButton
       onClick={handleScrollToBottom}
       size="small"
       className={clsx(styles.scrollToBottom, className)}
-      style={{ bottom: -(bottom - 16) }}
       {...(rest as any)}
     >
       <ArrowDownIcon color="primary" />

diff --git a/...components/Button/ScrollToBottom/index.ts → ...nt/components/mdx/ScrollToBottom/index.ts b/...components/Button/ScrollToBottom/index.ts → ...nt/components/mdx/ScrollToBottom/index.ts
diff --git a/.../Button/ScrollToBottom/styles.module.scss → ...nts/mdx/ScrollToBottom/styles.module.scss b/.../Button/ScrollToBottom/styles.module.scss → ...nts/mdx/ScrollToBottom/styles.module.scss
@@ -4,4 +4,8 @@
   z-index: 100;
   position: absolute;
   background: rgb(var(--lsd-surface-primary)) !important;
+
+  bottom: calc(
+    var(--ifm-navbar-height) + var(--logos-hero-info-height) - 100vh + 16px
+  );
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
@@ -9,4 +9,5 @@ export * from './HeroDescription'
 export * from './HeroInfo'
 export * from './HeroModel'
 export * from './HeroTitle'
+export * from './ScrollToBottom'
 export * from './Showcase'