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

Improve layout of bets card

Browse Source
This commit is contained in:
jahooma 2021-12-16 15:51:47 -06:00
parent 985621982b
commit ad2f080c6e
1 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
web/components/bets-list.tsx
View File

@ -100,7 +100,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
)} )}
onClick={() => setCollapsed((collapsed) => !collapsed)} onClick={() => setCollapsed((collapsed) => !collapsed)}
> >
<Row> <Row className="flex-wrap gap-4">
<Col className="flex-[2] gap-1"> <Col className="flex-[2] gap-1">
<div> <div>
<Link href={path(contract)}> <Link href={path(contract)}>
@ -120,7 +120,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
{resolution && ( {resolution && (
<> <>
<div>•</div> <div>•</div>
<div> <div className="whitespace-nowrap">
Resolved <OutcomeLabel outcome={resolution} /> Resolved <OutcomeLabel outcome={resolution} />
</div> </div>
</> </>
@ -128,20 +128,25 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
</Row> </Row>
</Col> </Col>
<MyBetsSummary <Row className="flex-nowrap">
className="flex-1 justify-end" <MyBetsSummary
contract={contract} className="flex-1 justify-end"
bets={bets} contract={contract}
/> bets={bets}
/>
{/* Show carrot for collapsing. Hack the positioning. */} {/* Show carrot for collapsing. Hack the positioning. */}
<div <div
className="collapse-title p-0 pr-8 relative w-0 h-0 min-h-0" className="collapse-title p-0 pr-8 relative w-0 h-0 min-h-0"
style={{ top: -10, right: -20 }} style={{ top: -10, right: -20 }}
/> />
</Row>
</Row> </Row>
<div className="collapse-content" style={{ backgroundColor: 'white' }}> <div
className="collapse-content"
style={{ backgroundColor: 'white', paddingBottom: 0 }}
>
<Spacer h={8} /> <Spacer h={8} />
<ContractBetsTable contract={contract} bets={bets} /> <ContractBetsTable contract={contract} bets={bets} />
@ -172,31 +177,33 @@ export function MyBetsSummary(props: {
) )
return ( return (
<Row className={clsx('gap-8', className)}> <Row className={clsx('gap-6', className)}>
<Col> <Col>
<div className="text-sm text-gray-500">Total bets</div> <div className="text-sm text-gray-500 whitespace-nowrap">
<div>{formatMoney(betsTotal)}</div> Total bets
</div>
<div className="whitespace-nowrap">{formatMoney(betsTotal)}</div>
</Col> </Col>
{resolution ? ( {resolution ? (
<> <>
<Col> <Col>
<div className="text-sm text-gray-500">Winnings</div> <div className="text-sm text-gray-500">Winnings</div>
<div>{formatMoney(betsPayout)}</div> <div className="whitespace-nowrap">{formatMoney(betsPayout)}</div>
</Col> </Col>
</> </>
) : ( ) : (
<> <>
<Col> <Col>
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500 whitespace-nowrap">
Payout if <YesLabel /> Payout if <YesLabel />
</div> </div>
<div>{formatMoney(yesWinnings)}</div> <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
</Col> </Col>
<Col> <Col>
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500 whitespace-nowrap">
Payout if <NoLabel /> Payout if <NoLabel />
</div> </div>
<div>{formatMoney(noWinnings)}</div> <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
</Col> </Col>
</> </>
)} )}