client: vertical buttongroup on post view page on mobile
This commit is contained in:
parent
5ac73718cf
commit
e12e20418a
3 changed files with 5 additions and 6 deletions
|
@ -7,7 +7,6 @@ import { codeFileExtensions } from "@lib/constants"
|
|||
import ChevronDown from '@geist-ui/icons/chevronDown'
|
||||
import ShiftBy from "@components/shift-by"
|
||||
import type { File } from '@lib/types'
|
||||
import FileTree from '@geist-ui/icons/list'
|
||||
|
||||
type Item = File & {
|
||||
icon: JSX.Element
|
||||
|
@ -64,7 +63,7 @@ const FileDropdown = ({
|
|||
// a list of files with an icon and a title
|
||||
return (
|
||||
<Button auto onClick={onOpen} className={styles.button} iconRight={<ChevronDown />}>
|
||||
<Popover tabIndex={0} content={content} visible={expanded} trigger="click" hideArrow={true}>
|
||||
<Popover content={content} visible={expanded} hideArrow={true}>
|
||||
Jump to {files.length} {files.length === 1 ? 'file' : 'files'}
|
||||
</Popover>
|
||||
</Button >
|
||||
|
|
|
@ -127,7 +127,7 @@ const PostList = ({ morePosts, initialPosts, error }: Props) => {
|
|||
</ul>
|
||||
</div>
|
||||
}
|
||||
{hasMorePosts && <div className={styles.moreContainer}>
|
||||
{hasMorePosts && !setSearchValue && <div className={styles.moreContainer}>
|
||||
<Button width={"100%"} onClick={loadMoreClick}>
|
||||
Load more
|
||||
</Button>
|
||||
|
|
|
@ -6,7 +6,7 @@ import styles from './post-page.module.css'
|
|||
import homeStyles from '@styles/Home.module.css'
|
||||
|
||||
import type { File, Post } from "@lib/types"
|
||||
import { Page, Button, Text, Badge, Tooltip, Spacer, ButtonDropdown, ButtonGroup } from "@geist-ui/core"
|
||||
import { Page, Button, Text, Badge, Tooltip, Spacer, ButtonDropdown, ButtonGroup, useMediaQuery } from "@geist-ui/core"
|
||||
import { useMemo, useState } from "react"
|
||||
import timeAgo from "@lib/time-ago"
|
||||
import Archive from '@geist-ui/icons/archive'
|
||||
|
@ -37,7 +37,7 @@ const PostPage = ({ post }: Props) => {
|
|||
const [time, setTimeAgo] = useState(timeAgo(createdDate))
|
||||
|
||||
const formattedTime = `${createdDate.toLocaleDateString()} ${createdDate.toLocaleTimeString()}`
|
||||
|
||||
const isMobile = useMediaQuery("mobile")
|
||||
return (
|
||||
<Page width={"100%"}>
|
||||
<PageSeo
|
||||
|
@ -60,7 +60,7 @@ const PostPage = ({ post }: Props) => {
|
|||
</div>
|
||||
</span>
|
||||
<span className={styles.buttons}>
|
||||
<ButtonGroup>
|
||||
<ButtonGroup vertical={isMobile}>
|
||||
<Button auto onClick={download} icon={<Archive />}>
|
||||
Download as ZIP archive
|
||||
</Button>
|
||||
|
|
Loading…
Reference in a new issue