client: add scroll to top button on post view
This commit is contained in:
parent
1ace04985c
commit
ff8d5aab5c
5 changed files with 56 additions and 3 deletions
|
@ -26,7 +26,7 @@ const App = ({
|
|||
accents_6: 'var(--darker-gray)',
|
||||
accents_7: 'var(--darkest-gray)',
|
||||
accents_8: 'var(--darkest-gray)',
|
||||
border: 'var(--lightest-gray)',
|
||||
border: 'var(--light-gray)',
|
||||
},
|
||||
expressiveness: {
|
||||
dropdownBoxShadow: '0 0 0 1px var(--light-gray)',
|
||||
|
|
|
@ -47,7 +47,8 @@
|
|||
}
|
||||
|
||||
.content li .fileTitle {
|
||||
font-size: 1rem;
|
||||
/* from Geist */
|
||||
font-size: calc(0.875 * 16px);
|
||||
}
|
||||
|
||||
.content li::before {
|
||||
|
|
|
@ -12,6 +12,7 @@ import { useMemo, useState } from "react"
|
|||
import timeAgo from "@lib/time-ago"
|
||||
import Archive from '@geist-ui/icons/archive'
|
||||
import FileDropdown from "@components/file-dropdown"
|
||||
import ScrollToTop from "@components/scroll-to-top"
|
||||
|
||||
type Props = {
|
||||
post: Post
|
||||
|
@ -67,7 +68,6 @@ const PostPage = ({ post }: Props) => {
|
|||
<FileDropdown files={post.files} />
|
||||
</ButtonGroup>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
{/* {post.files.length > 1 && <FileTree files={post.files} />} */}
|
||||
{post.files.map(({ id, content, title }: File) => (
|
||||
|
@ -79,6 +79,8 @@ const PostPage = ({ post }: Props) => {
|
|||
content={content}
|
||||
/>
|
||||
))}
|
||||
<ScrollToTop />
|
||||
|
||||
</Page.Content>
|
||||
</Page >
|
||||
)
|
||||
|
|
33
client/components/scroll-to-top/index.tsx
Normal file
33
client/components/scroll-to-top/index.tsx
Normal file
|
@ -0,0 +1,33 @@
|
|||
import { Tooltip, Button, Spacer } from '@geist-ui/core'
|
||||
import ChevronUp from '@geist-ui/icons/chevronUpCircleFill'
|
||||
import { useEffect, useState } from 'react'
|
||||
import styles from './scroll.module.css'
|
||||
|
||||
const ScrollToTop = () => {
|
||||
const [shouldShow, setShouldShow] = useState(false)
|
||||
useEffect(() => {
|
||||
// if user is scrolled, set visible
|
||||
const handleScroll = () => {
|
||||
setShouldShow(window.scrollY > 100)
|
||||
}
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
return () => window.removeEventListener('scroll', handleScroll)
|
||||
}, [])
|
||||
|
||||
const onClick = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'row', width: '100%', height: 24, justifyContent: 'flex-end' }}>
|
||||
<Tooltip text="Scroll to Top" className={`${styles['scroll-up']} ${shouldShow ? styles['scroll-up-shown'] : ''}`}>
|
||||
<Button aria-label='Scroll to Top' onClick={onClick} style={{ background: 'var(--light-gray)' }} auto >
|
||||
<Spacer height={2 / 3} inline width={0} />
|
||||
<ChevronUp />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ScrollToTop
|
17
client/components/scroll-to-top/scroll.module.css
Normal file
17
client/components/scroll-to-top/scroll.module.css
Normal file
|
@ -0,0 +1,17 @@
|
|||
.scroll-up {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
cursor: pointer;
|
||||
bottom: var(--gap-double);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.scroll-up-shown {
|
||||
opacity: 0.8;
|
||||
transform: none;
|
||||
pointer-events: auto;
|
||||
}
|
Loading…
Reference in a new issue