open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add about to top of fold page on mobile. Layout tweaks

Browse Source
This commit is contained in:
jahooma 2022-01-26 12:02:53 -06:00
parent 2ea05f8913
commit 8e511e7cc9
2 changed files with 85 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/edit-fold-button.tsx
View File

@ -10,8 +10,8 @@ import { toCamelCase } from '../lib/util/format'
import { Spacer } from './layout/spacer' import { Spacer } from './layout/spacer'
import { TagsList } from './tags-list' import { TagsList } from './tags-list'
export function EditFoldButton(props: { fold: Fold }) { export function EditFoldButton(props: { fold: Fold; className?: string }) {
const { fold } = props const { fold, className } = props
const [name, setName] = useState(fold.name) const [name, setName] = useState(fold.name)
const [about, setAbout] = useState(fold.about ?? '') const [about, setAbout] = useState(fold.about ?? '')
@ -41,7 +41,7 @@ export function EditFoldButton(props: { fold: Fold }) {
} }
return ( return (
<div> <div className={clsx('p-1', className)}>
<label <label
htmlFor="edit" htmlFor="edit"
className={clsx( className={clsx(

158
web/pages/fold/[...slugs]/index.tsx
View File

@ -153,71 +153,68 @@ export default function FoldPage(props: {
return ( return (
<Page wide> <Page wide>
<Col className="items-center"> <Row className="justify-between mb-6 px-1">
<Col className="max-w-5xl w-full"> <Title className="!m-0" text={fold.name} />
<Col className="sm:flex-row sm:justify-between sm:items-end gap-4 mb-6"> {isCurator && <EditFoldButton className="ml-1" fold={fold} />}
<Title className="!m-0" text={fold.name} /> </Row>
{isCurator && <EditFoldButton fold={fold} />}
</Col>
<div className="tabs mb-4"> <Col className="md:hidden text-gray-500 gap-2 mb-6 px-1">
<Link href={foldPath(fold)} shallow> <Row>
<a <div className="mr-1">Curated by</div>
className={clsx( <UserLink
'tab tab-bordered', className="text-neutral"
page === 'activity' && 'tab-active' name={curator.name}
)} username={curator.username}
> />
Activity </Row>
</a> <div>{fold.about}</div>
</Link> </Col>
<Link href={foldPath(fold, 'markets')} shallow> <div className="tabs mb-2">
<a <Link href={foldPath(fold)} shallow>
className={clsx( <a
'tab tab-bordered', className={clsx(
page === 'markets' && 'tab-active' 'tab tab-bordered',
)} page === 'activity' && 'tab-active'
> )}
Markets >
</a> Activity
</Link> </a>
<Link href={foldPath(fold, 'leaderboards')} shallow> </Link>
<a
className={clsx(
'tab tab-bordered',
page === 'leaderboards' && 'tab-active',
page !== 'leaderboards' && 'md:hidden'
)}
>
Leaderboards
</a>
</Link>
</div>
{page === 'activity' && ( <Link href={foldPath(fold, 'markets')} shallow>
<Row className="gap-8"> <a
<Col> className={clsx(
<ActivityFeed 'tab tab-bordered',
contracts={activeContracts} page === 'markets' && 'tab-active'
contractBets={activeContractBets} )}
contractComments={activeContractComments} >
/> Markets
</Col> </a>
<Col className="hidden md:flex max-w-xs gap-10"> </Link>
<FoldOverview fold={fold} curator={curator} /> <Link href={foldPath(fold, 'leaderboards')} shallow>
<FoldLeaderboards <a
topTraders={topTraders} className={clsx(
topTraderScores={topTraderScores} 'tab tab-bordered',
topCreators={topCreators} page === 'leaderboards' && 'tab-active',
topCreatorScores={topCreatorScores} page !== 'leaderboards' && 'md:hidden'
/> )}
</Col> >
</Row> Leaderboards
)} </a>
</Link>
</div>
{page === 'markets' && ( {(page === 'activity' || page === 'markets') && (
<div className="w-full"> <Row className={clsx(page === 'activity' ? 'gap-16' : 'gap-8')}>
<Col className="flex-1">
{page === 'activity' ? (
<ActivityFeed
contracts={activeContracts}
contractBets={activeContractBets}
contractComments={activeContractComments}
/>
) : (
<SearchableGrid <SearchableGrid
contracts={contracts} contracts={contracts}
query={query} query={query}
@ -225,21 +222,30 @@ export default function FoldPage(props: {
sort={sort} sort={sort}
setSort={setSort} setSort={setSort}
/> />
</div> )}
)} </Col>
<Col className="hidden md:flex max-w-xs gap-10">
<FoldOverview fold={fold} curator={curator} />
<FoldLeaderboards
topTraders={topTraders}
topTraderScores={topTraderScores}
topCreators={topCreators}
topCreatorScores={topCreatorScores}
/>
</Col>
</Row>
)}
{page === 'leaderboards' && ( {page === 'leaderboards' && (
<Col className="gap-8 lg:flex-row"> <Col className="gap-8 lg:flex-row">
<FoldLeaderboards <FoldLeaderboards
topTraders={topTraders} topTraders={topTraders}
topTraderScores={topTraderScores} topTraderScores={topTraderScores}
topCreators={topCreators} topCreators={topCreators}
topCreatorScores={topCreatorScores} topCreatorScores={topCreatorScores}
/> />
</Col>
)}
</Col> </Col>
</Col> )}
</Page> </Page>
) )
} }
@ -250,10 +256,10 @@ function FoldOverview(props: { fold: Fold; curator: User }) {
return ( return (
<Col className="max-w-sm"> <Col className="max-w-sm">
<div className="px-4 py-3 bg-indigo-700 text-white text-sm rounded-t"> <div className="px-4 py-3 bg-indigo-500 text-white text-sm rounded-t">
About community About community
</div> </div>
<Col className="p-4 bg-white self-start gap-2 rounded-b"> <Col className="p-4 bg-white gap-2 rounded-b">
<Row> <Row>
<div className="text-gray-500 mr-1">Curated by</div> <div className="text-gray-500 mr-1">Curated by</div>
<UserLink <UserLink