Improve positioning of x% chance on mobile, break words in description.
This commit is contained in:
parent
cdf25ba659
commit
657b6b2763
web/components
74
web/components/contract-card.tsx
Normal file
74
web/components/contract-card.tsx
Normal file
|
@ -0,0 +1,74 @@
|
|||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
import { Row } from '../components/layout/row'
|
||||
import { formatMoney } from '../lib/util/format'
|
||||
import { UserLink } from './user-page'
|
||||
import { Linkify } from './linkify'
|
||||
import { Contract, compute, path } from '../lib/firebase/contracts'
|
||||
|
||||
export function ContractCard(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
const { probPercent } = compute(contract)
|
||||
|
||||
const resolutionColor = {
|
||||
YES: 'text-primary',
|
||||
NO: 'text-red-400',
|
||||
MKT: 'text-blue-400',
|
||||
CANCEL: 'text-yellow-400',
|
||||
'': '', // Empty if unresolved
|
||||
}[contract.resolution || '']
|
||||
|
||||
const resolutionText = {
|
||||
YES: 'YES',
|
||||
NO: 'NO',
|
||||
MKT: 'MKT',
|
||||
CANCEL: 'N/A',
|
||||
'': '',
|
||||
}[contract.resolution || '']
|
||||
|
||||
return (
|
||||
<Link href={path(contract)}>
|
||||
<a>
|
||||
<li className="col-span-1 bg-white hover:bg-gray-100 shadow-md rounded-lg divide-y divide-gray-200">
|
||||
<div className="card">
|
||||
<div className="card-body p-6">
|
||||
<Row className="justify-between gap-4 mb-2">
|
||||
<p className="font-medium text-indigo-700">
|
||||
<Linkify text={contract.question} />
|
||||
</p>
|
||||
<div className={clsx('text-4xl', resolutionColor)}>
|
||||
{resolutionText || (
|
||||
<div className="text-primary">
|
||||
{probPercent}
|
||||
<div className="text-lg">chance</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Row>
|
||||
<ContractDetails contract={contract} />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export function ContractDetails(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
const { truePool, createdDate, resolvedDate } = compute(contract)
|
||||
|
||||
return (
|
||||
<Row className="flex-wrap text-sm text-gray-500">
|
||||
<div className="whitespace-nowrap">
|
||||
<UserLink username={contract.creatorUsername} />
|
||||
</div>
|
||||
<div className="mx-2">•</div>
|
||||
<div className="whitespace-nowrap">
|
||||
{resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
|
||||
</div>
|
||||
<div className="mx-2">•</div>
|
||||
<div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
|
||||
</Row>
|
||||
)
|
||||
}
|
|
@ -8,13 +8,13 @@ import {
|
|||
import { Col } from './layout/col'
|
||||
import { Spacer } from './layout/spacer'
|
||||
import { ContractProbGraph } from './contract-prob-graph'
|
||||
import { ContractDetails } from './contracts-list'
|
||||
import router from 'next/router'
|
||||
import { useUser } from '../hooks/use-user'
|
||||
import { Row } from './layout/row'
|
||||
import dayjs from 'dayjs'
|
||||
import { Linkify } from './linkify'
|
||||
import clsx from 'clsx'
|
||||
import { ContractDetails } from './contract-card'
|
||||
|
||||
function ContractDescription(props: {
|
||||
contract: Contract
|
||||
|
@ -35,7 +35,7 @@ function ContractDescription(props: {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="whitespace-pre-line">
|
||||
<div className="whitespace-pre-line break-words">
|
||||
<Linkify text={contract.description} />
|
||||
<br />
|
||||
{isCreator &&
|
||||
|
@ -84,6 +84,40 @@ function ContractDescription(props: {
|
|||
)
|
||||
}
|
||||
|
||||
function ResolutionOrChance(props: {
|
||||
resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL'
|
||||
probPercent: string
|
||||
className?: string
|
||||
}) {
|
||||
const { resolution, probPercent, className } = props
|
||||
|
||||
const resolutionColor = {
|
||||
YES: 'text-primary',
|
||||
NO: 'text-red-400',
|
||||
MKT: 'text-blue-400',
|
||||
CANCEL: 'text-yellow-400',
|
||||
'': '', // Empty if unresolved
|
||||
}[resolution || '']
|
||||
|
||||
return (
|
||||
<Col className={clsx('text-3xl md:text-4xl', className)}>
|
||||
{resolution ? (
|
||||
<>
|
||||
<div className="text-lg md:text-xl text-gray-500">Resolved</div>
|
||||
<div className={resolutionColor}>
|
||||
{resolution === 'CANCEL' ? 'N/A' : resolution}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-primary">{probPercent}</div>
|
||||
<div className="text-lg md:text-xl text-primary">chance</div>
|
||||
</>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
export const ContractOverview = (props: {
|
||||
contract: Contract
|
||||
className?: string
|
||||
|
@ -95,39 +129,29 @@ export const ContractOverview = (props: {
|
|||
const user = useUser()
|
||||
const isCreator = user?.id === creatorId
|
||||
|
||||
const resolutionColor = {
|
||||
YES: 'text-primary',
|
||||
NO: 'text-red-400',
|
||||
MKT: 'text-blue-400',
|
||||
CANCEL: 'text-yellow-400',
|
||||
'': '', // Empty if unresolved
|
||||
}[contract.resolution || '']
|
||||
|
||||
return (
|
||||
<Col className={clsx('mb-6', className)}>
|
||||
<Col className="justify-between md:flex-row">
|
||||
<Col>
|
||||
<div className="text-3xl text-indigo-700 mb-4">
|
||||
<Row className="justify-between gap-4">
|
||||
<Col className="gap-4">
|
||||
<div className="text-2xl md:text-3xl text-indigo-700">
|
||||
<Linkify text={contract.question} />
|
||||
</div>
|
||||
|
||||
<ResolutionOrChance
|
||||
className="md:hidden"
|
||||
resolution={resolution}
|
||||
probPercent={probPercent}
|
||||
/>
|
||||
|
||||
<ContractDetails contract={contract} />
|
||||
</Col>
|
||||
|
||||
{resolution ? (
|
||||
<Col className="text-4xl mt-8 md:mt-0 md:ml-4 md:mr-6 items-end self-center md:self-start">
|
||||
<div className="text-xl text-gray-500">Resolved</div>
|
||||
<div className={resolutionColor}>
|
||||
{resolution === 'CANCEL' ? 'N/A' : resolution}
|
||||
</div>
|
||||
</Col>
|
||||
) : (
|
||||
<Col className="text-4xl mt-8 md:mt-0 md:ml-4 md:mr-6 text-primary items-end self-center md:self-start">
|
||||
{probPercent}
|
||||
<div className="text-xl">chance</div>
|
||||
</Col>
|
||||
)}
|
||||
</Col>
|
||||
<ResolutionOrChance
|
||||
className="hidden md:flex md:items-end"
|
||||
resolution={resolution}
|
||||
probPercent={probPercent}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<Spacer h={4} />
|
||||
|
||||
|
|
|
@ -3,87 +3,17 @@ import Link from 'next/link'
|
|||
import clsx from 'clsx'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import { Row } from '../components/layout/row'
|
||||
import {
|
||||
compute,
|
||||
Contract,
|
||||
listContracts,
|
||||
path,
|
||||
} from '../lib/firebase/contracts'
|
||||
import { formatMoney } from '../lib/util/format'
|
||||
import { User } from '../lib/firebase/users'
|
||||
import { UserLink } from './user-page'
|
||||
import { Linkify } from './linkify'
|
||||
import { Col } from './layout/col'
|
||||
import { SiteLink } from './site-link'
|
||||
import { parseTags } from '../lib/util/parse'
|
||||
|
||||
export function ContractDetails(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
const { truePool, createdDate, resolvedDate } = compute(contract)
|
||||
|
||||
return (
|
||||
<Row className="flex-wrap text-sm text-gray-500">
|
||||
<div className="whitespace-nowrap">
|
||||
<UserLink username={contract.creatorUsername} />
|
||||
</div>
|
||||
<div className="mx-2">•</div>
|
||||
<div className="whitespace-nowrap">
|
||||
{resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
|
||||
</div>
|
||||
<div className="mx-2">•</div>
|
||||
<div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
function ContractCard(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
const { probPercent } = compute(contract)
|
||||
|
||||
const resolutionColor = {
|
||||
YES: 'text-primary',
|
||||
NO: 'text-red-400',
|
||||
MKT: 'text-blue-400',
|
||||
CANCEL: 'text-yellow-400',
|
||||
'': '', // Empty if unresolved
|
||||
}[contract.resolution || '']
|
||||
|
||||
const resolutionText = {
|
||||
YES: 'YES',
|
||||
NO: 'NO',
|
||||
MKT: 'MKT',
|
||||
CANCEL: 'N/A',
|
||||
'': '',
|
||||
}[contract.resolution || '']
|
||||
|
||||
return (
|
||||
<Link href={path(contract)}>
|
||||
<a>
|
||||
<li className="col-span-1 bg-white hover:bg-gray-100 shadow-md rounded-lg divide-y divide-gray-200">
|
||||
<div className="card">
|
||||
<div className="card-body p-6">
|
||||
<Row className="justify-between gap-4 mb-2">
|
||||
<p className="font-medium text-indigo-700">
|
||||
<Linkify text={contract.question} />
|
||||
</p>
|
||||
<div className={clsx('text-4xl', resolutionColor)}>
|
||||
{resolutionText || (
|
||||
<div className="text-primary">
|
||||
{probPercent}
|
||||
<div className="text-lg">chance</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Row>
|
||||
<ContractDetails contract={contract} />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
import { ContractCard } from './contract-card'
|
||||
|
||||
function ContractsGrid(props: { contracts: Contract[] }) {
|
||||
const [resolvedContracts, activeContracts] = _.partition(
|
||||
|
@ -117,7 +47,7 @@ function ContractsGrid(props: { contracts: Contract[] }) {
|
|||
|
||||
const MAX_GROUPED_CONTRACTS_DISPLAYED = 6
|
||||
|
||||
export function CreatorContractsGrid(props: { contracts: Contract[] }) {
|
||||
function CreatorContractsGrid(props: { contracts: Contract[] }) {
|
||||
const { contracts } = props
|
||||
|
||||
const byCreator = _.groupBy(contracts, (contract) => contract.creatorId)
|
||||
|
@ -165,7 +95,7 @@ export function CreatorContractsGrid(props: { contracts: Contract[] }) {
|
|||
)
|
||||
}
|
||||
|
||||
export function TagContractsGrid(props: { contracts: Contract[] }) {
|
||||
function TagContractsGrid(props: { contracts: Contract[] }) {
|
||||
const { contracts } = props
|
||||
|
||||
const contractTags = _.flatMap(contracts, (contract) =>
|
||||
|
|
Loading…
Reference in New Issue
Block a user