Fix a bunch of weird CSS stuff
This commit is contained in:
parent
cc88eb4638
commit
571ae8bcd6
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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}`
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user