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

Fix overlapping bet panel

Browse Source
This commit is contained in:
James Grugett 2022-04-03 16:57:38 -05:00
parent d7b702fe00
commit 9420b10bd9
3 changed files with 37 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/nav/sidebar.tsx
View File

@ -86,11 +86,8 @@ export default function Sidebar() {
const navigationOptions = user === null ? signedOutNavigation : navigation const navigationOptions = user === null ? signedOutNavigation : navigation
return ( return (
<nav <nav aria-label="Sidebar" className="sticky divide-y divide-gray-300">
aria-label="Sidebar" <div className="mt-2 space-y-1 pb-6">
className="sticky top-4 mt-4 divide-y divide-gray-300"
>
<div className="space-y-1 pb-6">
<ManifoldLogo hideText /> <ManifoldLogo hideText />
</div> </div>

8
web/components/page.tsx
View File

@ -14,16 +14,16 @@ export function Page(props: {
<div> <div>
<div <div
className={clsx( className={clsx(
'mx-auto w-full pb-16 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl', 'mx-auto w-full pb-16 pt-6 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl',
margin && 'px-4' margin && 'px-4'
)} )}
> >
<div className="hidden lg:col-span-3 lg:block xl:col-span-2"> <div className="hidden lg:col-span-2 lg:block">
{assertUser !== 'signed-out' && <Sidebar />} {assertUser !== 'signed-out' && <Sidebar />}
</div> </div>
<main <main
className={clsx( className={clsx(
'pt-6 lg:col-span-9', 'lg:col-span-8',
rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8' rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
)} )}
> >
@ -33,7 +33,7 @@ export function Page(props: {
<div className="block xl:hidden">{rightSidebar}</div> <div className="block xl:hidden">{rightSidebar}</div>
</main> </main>
<aside className="hidden xl:col-span-3 xl:block"> <aside className="hidden xl:col-span-3 xl:block">
<div className="sticky top-4 space-y-4">{rightSidebar}</div> <div className="sticky space-y-4">{rightSidebar}</div>
</aside> </aside>
</div> </div>

64
web/pages/[username]/[contractSlug].tsx
View File

@ -141,42 +141,40 @@ export default function ContractPage(props: {
/> />
)} )}
<Col className="w-full justify-between md:flex-row"> <Col className="w-full justify-between rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
<div className="flex-1 rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8"> <ContractOverview
<ContractOverview contract={contract}
contract={contract} bets={bets ?? []}
bets={bets ?? []} comments={comments ?? []}
comments={comments ?? []} folds={folds}
folds={folds} >
> {contract.outcomeType === 'FREE_RESPONSE' && (
{contract.outcomeType === 'FREE_RESPONSE' && (
<>
<Spacer h={4} />
<AnswersPanel
contract={contract as any}
answers={props.answers}
/>
<Spacer h={4} />
<div className="divider before:bg-gray-300 after:bg-gray-300" />
</>
)}
</ContractOverview>
{contract.isResolved && (
<> <>
<div className="grid grid-cols-1 sm:grid-cols-2"> <Spacer h={4} />
<ContractLeaderboard contract={contract} bets={bets} /> <AnswersPanel
<ContractTopTrades contract={contract as any}
contract={contract} answers={props.answers}
bets={bets} />
comments={comments} <Spacer h={4} />
/> <div className="divider before:bg-gray-300 after:bg-gray-300" />
</div>
<Spacer h={12} />
</> </>
)} )}
<BetsSection contract={contract} user={user ?? null} bets={bets} /> </ContractOverview>
</div>
{contract.isResolved && (
<>
<div className="grid grid-cols-1 sm:grid-cols-2">
<ContractLeaderboard contract={contract} bets={bets} />
<ContractTopTrades
contract={contract}
bets={bets}
comments={comments}
/>
</div>
<Spacer h={12} />
</>
)}
<BetsSection contract={contract} user={user ?? null} bets={bets} />
</Col> </Col>
</Page> </Page>
) )