CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client: vertical buttongroup on post view page on mobile

Browse source
This commit is contained in:
Max Leiter 2022-03-26 00:37:01 -07:00
parent 5ac73718cf
commit e12e20418a
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
3 changed files with 5 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/components/file-dropdown/index.tsx
View file

@ -7,7 +7,6 @@ import { codeFileExtensions } from "@lib/constants"
import ChevronDown from '@geist-ui/icons/chevronDown' import ChevronDown from '@geist-ui/icons/chevronDown'
import ShiftBy from "@components/shift-by" import ShiftBy from "@components/shift-by"
import type { File } from '@lib/types' import type { File } from '@lib/types'
import FileTree from '@geist-ui/icons/list'
type Item = File & { type Item = File & {
icon: JSX.Element icon: JSX.Element
@ -64,7 +63,7 @@ const FileDropdown = ({
// a list of files with an icon and a title // a list of files with an icon and a title
return ( return (
<Button auto onClick={onOpen} className={styles.button} iconRight={<ChevronDown />}> <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'} Jump to {files.length} {files.length === 1 ? 'file' : 'files'}
</Popover> </Popover>
</Button > </Button >

2
client/components/post-list/index.tsx
View file

@ -127,7 +127,7 @@ const PostList = ({ morePosts, initialPosts, error }: Props) => {
</ul> </ul>
</div> </div>
} }
{hasMorePosts && <div className={styles.moreContainer}> {hasMorePosts && !setSearchValue && <div className={styles.moreContainer}>
<Button width={"100%"} onClick={loadMoreClick}> <Button width={"100%"} onClick={loadMoreClick}>
Load more Load more
</Button> </Button>

6
client/components/post-page/index.tsx
View file

@ -6,7 +6,7 @@ import styles from './post-page.module.css'
import homeStyles from '@styles/Home.module.css' import homeStyles from '@styles/Home.module.css'
import type { File, Post } from "@lib/types" 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 { 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'
@ -37,7 +37,7 @@ const PostPage = ({ post }: Props) => {
const [time, setTimeAgo] = useState(timeAgo(createdDate)) const [time, setTimeAgo] = useState(timeAgo(createdDate))
const formattedTime = `${createdDate.toLocaleDateString()} ${createdDate.toLocaleTimeString()}` const formattedTime = `${createdDate.toLocaleDateString()} ${createdDate.toLocaleTimeString()}`
const isMobile = useMediaQuery("mobile")
return ( return (
<Page width={"100%"}> <Page width={"100%"}>
<PageSeo <PageSeo
@ -60,7 +60,7 @@ const PostPage = ({ post }: Props) => {
</div> </div>
</span> </span>
<span className={styles.buttons}> <span className={styles.buttons}>
<ButtonGroup> <ButtonGroup vertical={isMobile}>
<Button auto onClick={download} icon={<Archive />}> <Button auto onClick={download} icon={<Archive />}>
Download as ZIP archive Download as ZIP archive
</Button> </Button>