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

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

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