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

Move bet row above graph, in "mini modal"

Browse Source
This commit is contained in:
Sinclair Chen 2022-08-17 14:03:08 -07:00
parent 3f13e1a4e5
commit 38a59245ff
3 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/bet-inline.tsx
View File

@ -44,12 +44,7 @@ export function BetInline(props: {
const betDisabled = submitBet.isLoading || submitBet.isError || !amount const betDisabled = submitBet.isLoading || submitBet.isError || !amount
return ( return (
<Row <Row className={clsx('h-8 items-stretch justify-center gap-3', className)}>
className={clsx(
'align-stretch mb-4 h-8 items-stretch justify-center gap-3',
className
)}
>
<div className="text-xl">Bet</div> <div className="text-xl">Bet</div>
<YesNoSelector <YesNoSelector
className="space-x-0" className="space-x-0"

4
web/components/yes-no-selector.tsx
View File

@ -38,7 +38,7 @@ export function YesNoSelector(props: {
'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white', 'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white',
selected == 'YES' selected == 'YES'
? 'bg-primary text-white' ? 'bg-primary text-white'
: 'text-primary bg-transparent', : 'text-primary bg-white',
btnClassName btnClassName
)} )}
onClick={() => onSelect('YES')} onClick={() => onSelect('YES')}
@ -55,7 +55,7 @@ export function YesNoSelector(props: {
'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white', 'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white',
selected == 'NO' selected == 'NO'
? 'bg-red-400 text-white' ? 'bg-red-400 text-white'
: 'bg-transparent text-red-400', : 'bg-white text-red-400',
btnClassName btnClassName
)} )}
onClick={() => onSelect('NO')} onClick={() => onSelect('NO')}

28
web/pages/embed/[username]/[contractSlug].tsx
View File

@ -1,3 +1,4 @@
import { XIcon } from '@heroicons/react/solid'
import { Bet } from 'common/bet' import { Bet } from 'common/bet'
import { Contract, CPMMBinaryContract } from 'common/contract' import { Contract, CPMMBinaryContract } from 'common/contract'
import { DOMAIN } from 'common/envs/constants' import { DOMAIN } from 'common/envs/constants'
@ -110,14 +111,13 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
disabled disabled
/> />
{(isBinary || isPseudoNumeric) && tradingAllowed(contract) && ( {(isBinary || isPseudoNumeric) &&
<Button tradingAllowed(contract) &&
color="gradient" !betPanelOpen && (
onClick={() => setBetPanelOpen((open) => !open)} <Button color="gradient" onClick={() => setBetPanelOpen(true)}>
> Bet
{betPanelOpen ? 'Cancel' : 'Bet'} </Button>
</Button> )}
)}
{isBinary && <BinaryResolutionOrChance contract={contract} />} {isBinary && <BinaryResolutionOrChance contract={contract} />}
@ -140,6 +140,15 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
<Spacer h={2} /> <Spacer h={2} />
</div> </div>
{(isBinary || isPseudoNumeric) && betPanelOpen && (
<Row className="mb-2 items-center justify-center gap-4 self-center rounded bg-indigo-200 py-2 px-3">
<BetInline contract={contract as any} />
<button onClick={() => setBetPanelOpen(false)}>
<XIcon className="h-6 w-6" />
</button>
</Row>
)}
<div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}> <div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}>
{(isBinary || isPseudoNumeric) && ( {(isBinary || isPseudoNumeric) && (
<ContractProbGraph <ContractProbGraph
@ -157,9 +166,6 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
<NumericGraph contract={contract} height={graphHeight} /> <NumericGraph contract={contract} height={graphHeight} />
)} )}
</div> </div>
{(isBinary || isPseudoNumeric) && betPanelOpen && (
<BetInline contract={contract as any} />
)}
</Col> </Col>
) )
} }