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

Clean up a bunch of markup and CSS on contract cards (#753)

Browse Source 
* Remove random unnecessary top-level divs

* Remove wrapper in MiscDetails

* Remove another wrapper in ContractCard

* Fix a bunch of weird CSS stuff
This commit is contained in:
Marshall Polaris 2022-08-14 01:05:17 -07:00 committed by GitHub
parent 69c49679f1
commit 0b711be480
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 94 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
web/components/contract/contract-card.tsx
View File

@ -66,115 +66,104 @@ export function ContractCard(props: {
!hideQuickBet !hideQuickBet
return ( return (
<div> <Row
<Col className={clsx(
className={clsx( 'relative gap-3 self-start rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-5 shadow-md hover:cursor-pointer hover:bg-gray-100', className
className )}
)} >
> <Col className="group relative flex-1 gap-3 py-4 pl-6">
<Row> {onClick ? (
<Col className="relative flex-1 gap-3 pr-1"> <a
<div className="absolute top-0 left-0 right-0 bottom-0"
className={clsx( href={contractPath(contract)}
'peer absolute -left-6 -top-4 -bottom-4 z-10', onClick={(e) => {
hideQuickBet ? '-right-20' : 'right-0' // Let the browser handle the link click (opens in new tab).
)} if (e.ctrlKey || e.metaKey) return
>
{onClick ? (
<a
className="absolute top-0 left-0 right-0 bottom-0"
href={contractPath(contract)}
onClick={(e) => {
// Let the browser handle the link click (opens in new tab).
if (e.ctrlKey || e.metaKey) return
e.preventDefault() e.preventDefault()
track('click market card', { track('click market card', {
slug: contract.slug, slug: contract.slug,
contractId: contract.id, contractId: contract.id,
}) })
onClick() onClick()
}} }}
/> />
) : ( ) : (
<Link href={contractPath(contract)}> <Link href={contractPath(contract)}>
<a <a
onClick={trackCallback('click market card', { onClick={trackCallback('click market card', {
slug: contract.slug, slug: contract.slug,
contractId: contract.id, contractId: contract.id,
})} })}
className="absolute top-0 left-0 right-0 bottom-0" className="absolute top-0 left-0 right-0 bottom-0"
/> />
</Link> </Link>
)} )}
</div> <AvatarDetails contract={contract} />
<AvatarDetails contract={contract} /> <p
<p className="break-words font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2"
className="break-words font-semibold text-indigo-700 peer-hover:underline peer-hover:decoration-indigo-400 peer-hover:decoration-2" style={{ /* For iOS safari */ wordBreak: 'break-word' }}
style={{ /* For iOS safari */ wordBreak: 'break-word' }} >
> {question}
{question} </p>
</p>
{(outcomeType === 'FREE_RESPONSE' ||
{(outcomeType === 'FREE_RESPONSE' || outcomeType === 'MULTIPLE_CHOICE') &&
outcomeType === 'MULTIPLE_CHOICE') && (resolution ? (
(resolution ? ( <FreeResponseOutcomeLabel
<FreeResponseOutcomeLabel contract={contract}
contract={contract} resolution={resolution}
resolution={resolution} truncate={'long'}
truncate={'long'}
/>
) : (
<FreeResponseTopAnswer contract={contract} truncate="long" />
))}
<MiscDetails
contract={contract}
showHotVolume={showHotVolume}
showTime={showTime}
hideGroupLink={hideGroupLink}
/> />
</Col>
{showQuickBet ? (
<QuickBet contract={contract} user={user} />
) : ( ) : (
<Col className="m-auto pl-2"> <FreeResponseTopAnswer contract={contract} truncate="long" />
{outcomeType === 'BINARY' && ( ))}
<BinaryResolutionOrChance
className="items-center"
contract={contract}
/>
)}
{outcomeType === 'PSEUDO_NUMERIC' && ( <MiscDetails
<PseudoNumericResolutionOrExpectation contract={contract}
className="items-center" showHotVolume={showHotVolume}
contract={contract} showTime={showTime}
/> hideGroupLink={hideGroupLink}
)} />
{outcomeType === 'NUMERIC' && (
<NumericResolutionOrExpectation
className="items-center"
contract={contract}
/>
)}
{(outcomeType === 'FREE_RESPONSE' ||
outcomeType === 'MULTIPLE_CHOICE') && (
<FreeResponseResolutionOrChance
className="self-end text-gray-600"
contract={contract}
truncate="long"
/>
)}
<ProbBar contract={contract} />
</Col>
)}
</Row>
</Col> </Col>
</div> {showQuickBet ? (
<QuickBet contract={contract} user={user} />
) : (
<>
{outcomeType === 'BINARY' && (
<BinaryResolutionOrChance
className="items-center self-center pr-5"
contract={contract}
/>
)}
{outcomeType === 'PSEUDO_NUMERIC' && (
<PseudoNumericResolutionOrExpectation
className="items-center self-center pr-5"
contract={contract}
/>
)}
{outcomeType === 'NUMERIC' && (
<NumericResolutionOrExpectation
className="items-center self-center pr-5"
contract={contract}
/>
)}
{(outcomeType === 'FREE_RESPONSE' ||
outcomeType === 'MULTIPLE_CHOICE') && (
<FreeResponseResolutionOrChance
className="items-center self-center pr-5 text-gray-600"
contract={contract}
truncate="long"
/>
)}
<ProbBar contract={contract} />
</>
)}
</Row>
) )
} }

2
web/components/contract/quick-bet.tsx
View File

@ -138,7 +138,7 @@ export function QuickBet(props: {
return ( return (
<Col <Col
className={clsx( className={clsx(
'relative -my-4 -mr-5 min-w-[5.5rem] justify-center gap-2 pr-5 pl-1 align-middle' 'relative min-w-[5.5rem] justify-center gap-2 pr-5 pl-1 align-middle'
// Use this for colored QuickBet panes // Use this for colored QuickBet panes
// `bg-opacity-10 bg-${color}` // `bg-opacity-10 bg-${color}`
)} )}