Show just first 3 letters and chosen answer on fr cards (#318)

* Show just first 3 letters and chosen answer

* 3 dots

* Just show resolved and the chosen answer

* Remove unused truncate & hide resolved except on xs
This commit is contained in:
Ian Philips 2022-05-25 07:13:33 -06:00 committed by GitHub
parent eef5dda0f3
commit 1942e1c47a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -37,6 +37,7 @@ export function ContractCard(props: {
const { showHotVolume, showCloseTime, className } = props const { showHotVolume, showCloseTime, className } = props
const contract = useContractWithPreload(props.contract) ?? props.contract const contract = useContractWithPreload(props.contract) ?? props.contract
const { question, outcomeType } = contract const { question, outcomeType } = contract
const { resolution } = contract
const marketClosed = (contract.closeTime || Infinity) < Date.now() const marketClosed = (contract.closeTime || Infinity) < Date.now()
const showQuickBet = !( const showQuickBet = !(
@ -73,12 +74,19 @@ export function ContractCard(props: {
{question} {question}
</p> </p>
{outcomeType === 'FREE_RESPONSE' && ( {outcomeType === 'FREE_RESPONSE' &&
<FreeResponseTopAnswer (resolution ? (
contract={contract as FullContract<DPM, FreeResponse>} <FreeResponseOutcomeLabel
truncate="long" contract={contract as FreeResponseContract}
/> resolution={resolution}
)} truncate={'long'}
/>
) : (
<FreeResponseTopAnswer
contract={contract as FullContract<DPM, FreeResponse>}
truncate="long"
/>
))}
<MiscDetails <MiscDetails
contract={contract} contract={contract}
@ -188,13 +196,17 @@ export function FreeResponseResolutionOrChance(props: {
<Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}> <Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}>
{resolution ? ( {resolution ? (
<> <>
<div className={clsx('text-base text-gray-500')}>Resolved</div> <div className={clsx('text-base text-gray-500 sm:hidden')}>
<FreeResponseOutcomeLabel Resolved
contract={contract} </div>
resolution={resolution} {(resolution === 'CANCEL' || resolution === 'MKT') && (
truncate={truncate} <FreeResponseOutcomeLabel
answerClassName="text-xl" contract={contract}
/> resolution={resolution}
truncate={truncate}
answerClassName="text-3xl uppercase text-blue-500"
/>
)}
</> </>
) : ( ) : (
topAnswer && ( topAnswer && (