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

Compact-ify cards in portfolio page

Browse Source
This commit is contained in:
James Grugett 2022-04-14 00:06:13 -05:00
parent 8a59ab3180
commit 43b8c16fcc
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,7 +130,7 @@ export function BetsList(props: { user: User }) {
((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100 ((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100
return ( return (
<Col className="mt-6 gap-4 sm:gap-6"> <Col className="mt-6">
<Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0"> <Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
<Row className="gap-8"> <Row className="gap-8">
<Col> <Col>
@ -174,18 +174,20 @@ export function BetsList(props: { user: User }) {
</Row> </Row>
</Col> </Col>
{displayedContracts.length === 0 ? ( <Col className="mt-6 divide-y">
<NoBets /> {displayedContracts.length === 0 ? (
) : ( <NoBets />
displayedContracts.map((contract) => ( ) : (
<MyContractBets displayedContracts.map((contract) => (
key={contract.id} <MyContractBets
contract={contract} key={contract.id}
bets={contractBets[contract.id] ?? []} contract={contract}
metric={sort === 'profit' ? 'profit' : 'value'} bets={contractBets[contract.id] ?? []}
/> metric={sort === 'profit' ? 'profit' : 'value'}
)) />
)} ))
)}
</Col>
</Col> </Col>
) )
} }
@ -223,7 +225,7 @@ function MyContractBets(props: {
<div <div
tabIndex={0} tabIndex={0}
className={clsx( className={clsx(
'card card-body collapse collapse-arrow relative cursor-pointer bg-white p-6 shadow-xl', 'collapse collapse-arrow relative cursor-pointer bg-white p-4 pr-6',
collapsed ? 'collapse-close' : 'collapse-open pb-2' collapsed ? 'collapse-close' : 'collapse-open pb-2'
)} )}
onClick={() => setCollapsed((collapsed) => !collapsed)} onClick={() => setCollapsed((collapsed) => !collapsed)}
@ -243,7 +245,7 @@ function MyContractBets(props: {
{/* Show carrot for collapsing. Hack the positioning. */} {/* Show carrot for collapsing. Hack the positioning. */}
<div <div
className="collapse-title absolute h-0 min-h-0 w-0 p-0" className="collapse-title absolute h-0 min-h-0 w-0 p-0"
style={{ top: -10, right: 4 }} style={{ top: -10, right: 0 }}
/> />
</Row> </Row>