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

Fix a bunch of weird CSS stuff

Browse Source
This commit is contained in:
Marshall Polaris 2022-08-12 16:57:14 -07:00
parent cc88eb4638
commit 571ae8bcd6
2 changed files with 33 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,48 +68,41 @@ export function ContractCard(props: {
return ( return (
<Row <Row
className={clsx( className={clsx(
'relative gap-3 self-start rounded-lg bg-white py-4 pl-6 pr-5 shadow-md hover:cursor-pointer hover:bg-gray-100', 'relative gap-3 self-start rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
className className
)} )}
> >
<Col className="relative flex-1 gap-3"> <Col className="group relative flex-1 gap-3 py-4 pl-6">
<div {onClick ? (
className={clsx( <a
'peer absolute -left-6 -top-4 -bottom-4 z-10', className="absolute top-0 left-0 right-0 bottom-0"
hideQuickBet ? '-right-20' : 'right-0' href={contractPath(contract)}
)} onClick={(e) => {
> // Let the browser handle the link click (opens in new tab).
{onClick ? ( if (e.ctrlKey || e.metaKey) return
<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)}>
<a
onClick={trackCallback('click market card', {
slug: contract.slug,
contractId: contract.id,
})}
className="absolute top-0 left-0 right-0 bottom-0"
/> />
) : ( </Link>
<Link href={contractPath(contract)}> )}
<a
onClick={trackCallback('click market card', {
slug: contract.slug,
contractId: contract.id,
})}
className="absolute top-0 left-0 right-0 bottom-0"
/>
</Link>
)}
</div>
<AvatarDetails contract={contract} /> <AvatarDetails contract={contract} />
<p <p
className="break-words font-semibold text-indigo-700 peer-hover:underline peer-hover:decoration-indigo-400 peer-hover:decoration-2" className="break-words font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2"
style={{ /* For iOS safari */ wordBreak: 'break-word' }} style={{ /* For iOS safari */ wordBreak: 'break-word' }}
> >
{question} {question}
@ -140,21 +133,21 @@ export function ContractCard(props: {
<> <>
{outcomeType === 'BINARY' && ( {outcomeType === 'BINARY' && (
<BinaryResolutionOrChance <BinaryResolutionOrChance
className="items-center self-center" className="items-center self-center pr-5"
contract={contract} contract={contract}
/> />
)} )}
{outcomeType === 'PSEUDO_NUMERIC' && ( {outcomeType === 'PSEUDO_NUMERIC' && (
<PseudoNumericResolutionOrExpectation <PseudoNumericResolutionOrExpectation
className="items-center self-center" className="items-center self-center pr-5"
contract={contract} contract={contract}
/> />
)} )}
{outcomeType === 'NUMERIC' && ( {outcomeType === 'NUMERIC' && (
<NumericResolutionOrExpectation <NumericResolutionOrExpectation
className="items-center self-center" className="items-center self-center pr-5"
contract={contract} contract={contract}
/> />
)} )}
@ -162,7 +155,7 @@ export function ContractCard(props: {
{(outcomeType === 'FREE_RESPONSE' || {(outcomeType === 'FREE_RESPONSE' ||
outcomeType === 'MULTIPLE_CHOICE') && ( outcomeType === 'MULTIPLE_CHOICE') && (
<FreeResponseResolutionOrChance <FreeResponseResolutionOrChance
className="items-center self-center text-gray-600" className="items-center self-center pr-5 text-gray-600"
contract={contract} contract={contract}
truncate="long" truncate="long"
/> />

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}`
)} )}