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_6: 'var(--darker-gray)',
|
||||||
accents_7: 'var(--darkest-gray)',
|
accents_7: 'var(--darkest-gray)',
|
||||||
accents_8: 'var(--darkest-gray)',
|
accents_8: 'var(--darkest-gray)',
|
||||||
border: 'var(--lightest-gray)',
|
border: 'var(--light-gray)',
|
||||||
},
|
},
|
||||||
expressiveness: {
|
expressiveness: {
|
||||||
dropdownBoxShadow: '0 0 0 1px var(--light-gray)',
|
dropdownBoxShadow: '0 0 0 1px var(--light-gray)',
|
||||||
|
|
|
@ -47,7 +47,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content li .fileTitle {
|
.content li .fileTitle {
|
||||||
font-size: 1rem;
|
/* from Geist */
|
||||||
|
font-size: calc(0.875 * 16px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content li::before {
|
.content li::before {
|
||||||
|
|
|
@ -12,6 +12,7 @@ import { useMemo, useState } from "react"
|
||||||
import timeAgo from "@lib/time-ago"
|
import timeAgo from "@lib/time-ago"
|
||||||
import Archive from '@geist-ui/icons/archive'
|
import Archive from '@geist-ui/icons/archive'
|
||||||
import FileDropdown from "@components/file-dropdown"
|
import FileDropdown from "@components/file-dropdown"
|
||||||
|
import ScrollToTop from "@components/scroll-to-top"
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
post: Post
|
post: Post
|
||||||
|
@ -67,7 +68,6 @@ const PostPage = ({ post }: Props) => {
|
||||||
<FileDropdown files={post.files} />
|
<FileDropdown files={post.files} />
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{/* {post.files.length > 1 && <FileTree files={post.files} />} */}
|
{/* {post.files.length > 1 && <FileTree files={post.files} />} */}
|
||||||
{post.files.map(({ id, content, title }: File) => (
|
{post.files.map(({ id, content, title }: File) => (
|
||||||
|
@ -79,6 +79,8 @@ const PostPage = ({ post }: Props) => {
|
||||||
content={content}
|
content={content}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
<ScrollToTop />
|
||||||
|
|
||||||
</Page.Content>
|
</Page.Content>
|
||||||
</Page >
|
</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