client: add scroll to top button on post view

This commit is contained in:
Max Leiter 2022-03-25 13:29:49 -07:00
parent 1ace04985c
commit ff8d5aab5c
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
5 changed files with 56 additions and 3 deletions

View file

@ -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)',

View file

@ -47,7 +47,8 @@
}
.content li .fileTitle {
font-size: 1rem;
/* from Geist */
font-size: calc(0.875 * 16px);
}
.content li::before {

View file

@ -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 >
)

View 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

View 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;
}