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

Show category on market card (#197)

Browse Source 
* Show category on market card

* Show multiple categories in contract description

* Tweak layout of contract card and show multiple categories
This commit is contained in:
James Grugett 2022-05-12 18:28:21 -05:00 committed by GitHub
parent e0d266887c
commit 06cdf2a84a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,6 @@ import {
getBinaryProbPercent, getBinaryProbPercent,
} from 'web/lib/firebase/contracts' } from 'web/lib/firebase/contracts'
import { Col } from '../layout/col' import { Col } from '../layout/col'
import { Spacer } from '../layout/spacer'
import { import {
Binary, Binary,
CPMM, CPMM,
@ -25,6 +24,8 @@ import {
} from '../outcome-label' } from '../outcome-label'
import { getOutcomeProbability, getTopAnswer } from 'common/calculate' import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
import { AbbrContractDetails } from './contract-details' import { AbbrContractDetails } from './contract-details'
import { TagsList } from '../tags-list'
import { CATEGORY_LIST } from 'common/categories'
export function ContractCard(props: { export function ContractCard(props: {
contract: Contract contract: Contract
@ -35,11 +36,16 @@ export function ContractCard(props: {
const { contract, showHotVolume, showCloseTime, className } = props const { contract, showHotVolume, showCloseTime, className } = props
const { question, outcomeType, resolution } = contract const { question, outcomeType, resolution } = contract
const { tags } = contract
const categories = tags.filter((tag) =>
CATEGORY_LIST.includes(tag.toLowerCase())
)
return ( return (
<div> <div>
<div <Col
className={clsx( className={clsx(
'relative rounded-lg bg-white p-6 shadow-md hover:bg-gray-100', 'relative gap-3 rounded-lg bg-white p-6 shadow-md hover:bg-gray-100',
className className
)} )}
> >
@ -52,35 +58,39 @@ export function ContractCard(props: {
showHotVolume={showHotVolume} showHotVolume={showHotVolume}
showCloseTime={showCloseTime} showCloseTime={showCloseTime}
/> />
<Spacer h={3} />
<Row <Row className={clsx('justify-between gap-4')}>
className={clsx( <Col className="gap-3">
'justify-between gap-4', <p
outcomeType === 'FREE_RESPONSE' && 'flex-col items-start !gap-2' className="break-words font-medium text-indigo-700"
)} style={{ /* For iOS safari */ wordBreak: 'break-word' }}
> >
<p {question}
className="break-words font-medium text-indigo-700" </p>
style={{ /* For iOS safari */ wordBreak: 'break-word' }} {outcomeType !== 'FREE_RESPONSE' && categories.length > 0 && (
> <TagsList tags={categories} noLabel />
{question} )}
</p> </Col>
{outcomeType === 'BINARY' && ( {outcomeType === 'BINARY' && (
<BinaryResolutionOrChance <BinaryResolutionOrChance
className="items-center" className="items-center"
contract={contract} contract={contract}
/> />
)} )}
{outcomeType === 'FREE_RESPONSE' && (
<FreeResponseResolutionOrChance
className="self-end text-gray-600"
contract={contract as FullContract<DPM, FreeResponse>}
truncate="long"
/>
)}
</Row> </Row>
</div>
{outcomeType === 'FREE_RESPONSE' && (
<FreeResponseResolutionOrChance
className="self-end text-gray-600"
contract={contract as FullContract<DPM, FreeResponse>}
truncate="long"
/>
)}
{outcomeType === 'FREE_RESPONSE' && categories.length > 0 && (
<TagsList tags={categories} noLabel />
)}
</Col>
</div> </div>
) )
} }

8
web/components/contract/contract-description.tsx
View File

@ -39,7 +39,9 @@ export function ContractDescription(props: {
if (!isCreator && !contract.description.trim()) return null if (!isCreator && !contract.description.trim()) return null
const { tags } = contract const { tags } = contract
const category = tags.find((tag) => CATEGORY_LIST.includes(tag.toLowerCase())) const categories = tags.filter((tag) =>
CATEGORY_LIST.includes(tag.toLowerCase())
)
return ( return (
<div <div
@ -50,9 +52,9 @@ export function ContractDescription(props: {
> >
<Linkify text={contract.description} /> <Linkify text={contract.description} />
{category && ( {categories.length > 0 && (
<div className="mt-4"> <div className="mt-4">
<TagsList tags={[category]} label="Category" /> <TagsList tags={categories} label="Category" />
</div> </div>
)} )}