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

Random contract page fixups (#712)

Browse Source 
* Remove some divs and so on

* Correctly align bet avatars and text in feed

* Extract sidebar component on contract page
This commit is contained in:
Marshall Polaris 2022-08-09 13:25:42 -07:00 committed by GitHub
parent 1e3c5cb936
commit 5715b0e44a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 81 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/components/avatar.tsx
View File

@ -47,14 +47,21 @@ export function Avatar(props: {
)
}
export function EmptyAvatar(props: { size?: number; multi?: boolean }) {
const { size = 8, multi } = props
export function EmptyAvatar(props: {
className?: string
size?: number
multi?: boolean
}) {
const { className, size = 8, multi } = props
const insize = size - 3
const Icon = multi ? UsersIcon : UserIcon
return (
<div
className={`flex flex-shrink-0 h-${size} w-${size} items-center justify-center rounded-full bg-gray-200`}
className={clsx(
`flex flex-shrink-0 h-${size} w-${size} items-center justify-center rounded-full bg-gray-200`,
className
)}
>
<Icon className={`h-${insize} w-${insize} text-gray-500`} aria-hidden />
</div>

16
web/components/feed/feed-bets.tsx
View File

@ -36,8 +36,7 @@ export function FeedBet(props: {
const isSelf = user?.id === userId
return (
<>
<Row className={'flex w-full gap-2 pt-3'}>
<Row className={'flex w-full items-center gap-2 pt-3'}>
{isSelf ? (
<Avatar
className={clsx(smallAvatar && 'ml-1')}
@ -53,21 +52,17 @@ export function FeedBet(props: {
username={bettor.username}
/>
) : (
<div className="relative px-1">
<EmptyAvatar />
</div>
<EmptyAvatar className="mx-1" />
)}
<div className={'min-w-0 flex-1 py-1.5'}>
<BetStatusText
bet={bet}
contract={contract}
isSelf={isSelf}
bettor={bettor}
hideOutcome={hideOutcome}
className="flex-1"
/>
</div>
</Row>
</>
)
}
@ -77,8 +72,9 @@ export function BetStatusText(props: {
isSelf: boolean
bettor?: User
hideOutcome?: boolean
className?: string
}) {
const { bet, contract, bettor, isSelf, hideOutcome } = props
const { bet, contract, bettor, isSelf, hideOutcome, className } = props
const { outcomeType } = contract
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
const isFreeResponse = outcomeType === 'FREE_RESPONSE'
@ -123,7 +119,7 @@ export function BetStatusText(props: {
: formatPercent(bet.limitProb ?? bet.probAfter)
return (
<div className="text-sm text-gray-500">
<div className={clsx('text-sm text-gray-500', className)}>
{bettor ? (
<UserLink name={bettor.name} username={bettor.username} />
) : (

71
web/pages/[username]/[contractSlug].tsx
View File

@ -106,6 +106,43 @@ export default function ContractPage(props: {
return <ContractPageContent {...{ ...props, contract }} />
}
export function ContractPageSidebar(props: {
user: User | null | undefined
contract: Contract
}) {
const { contract, user } = props
const { creatorId, isResolved, outcomeType } = contract
const isCreator = user?.id === creatorId
const isBinary = outcomeType === 'BINARY'
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
const isNumeric = outcomeType === 'NUMERIC'
const allowTrade = tradingAllowed(contract)
const allowResolve = !isResolved && isCreator && !!user
const hasSidePanel =
(isBinary || isNumeric || isPseudoNumeric) && (allowTrade || allowResolve)
return hasSidePanel ? (
<Col className="gap-4">
{allowTrade &&
(isNumeric ? (
<NumericBetPanel className="hidden xl:flex" contract={contract} />
) : (
<BetPanel
className="hidden xl:flex"
contract={contract as CPMMBinaryContract}
/>
))}
{allowResolve &&
(isNumeric || isPseudoNumeric ? (
<NumericResolutionPanel creator={user} contract={contract} />
) : (
<ResolutionPanel creator={user} contract={contract} />
))}
</Col>
) : null
}
export function ContractPageContent(
props: Parameters<typeof ContractPage>[0] & { contract: Contract }
) {
@ -142,16 +179,9 @@ export function ContractPageContent(
setShowConfetti(shouldSeeConfetti)
}, [contract, user])
const { creatorId, isResolved, question, outcomeType } = contract
const { isResolved, question, outcomeType } = contract
const isCreator = user?.id === creatorId
const isBinary = outcomeType === 'BINARY'
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
const isNumeric = outcomeType === 'NUMERIC'
const allowTrade = tradingAllowed(contract)
const allowResolve = !isResolved && isCreator && !!user
const hasSidePanel =
(isBinary || isNumeric || isPseudoNumeric) && (allowTrade || allowResolve)
const ogCardProps = getOpenGraphProps(contract)
@ -160,26 +190,7 @@ export function ContractPageContent(
contractId: contract.id,
})
const rightSidebar = hasSidePanel ? (
<Col className="gap-4">
{allowTrade &&
(isNumeric ? (
<NumericBetPanel className="hidden xl:flex" contract={contract} />
) : (
<BetPanel
className="hidden xl:flex"
contract={contract as CPMMBinaryContract}
/>
))}
{allowResolve &&
(isNumeric || isPseudoNumeric ? (
<NumericResolutionPanel creator={user} contract={contract} />
) : (
<ResolutionPanel creator={user} contract={contract} />
))}
</Col>
) : null
const rightSidebar = <ContractPageSidebar user={user} contract={contract} />
return (
<Page rightSidebar={rightSidebar}>
{showConfetti && (
@ -216,7 +227,7 @@ export function ContractPageContent(
bets={bets.filter((b) => !b.challengeSlug)}
/>
{isNumeric && (
{outcomeType === 'NUMERIC' && (
<AlertBox
title="Warning"
text="Distributional numeric markets were introduced as an experimental feature and are now deprecated."
@ -232,7 +243,7 @@ export function ContractPageContent(
</>
)}
{isNumeric && allowTrade && (
{outcomeType === 'NUMERIC' && allowTrade && (
<NumericBetPanel className="xl:hidden" contract={contract} />
)}