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

Tidy up messy markup on FR answers panel

Browse Source
This commit is contained in:
Marshall Polaris 2022-09-20 02:26:20 -07:00
parent 6e2aa622ab
commit a5a5a394d0
1 changed files with 39 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
web/components/answers/answers-panel.tsx
View File

@ -123,28 +123,26 @@ export function AnswersPanel(props: {
))} ))}
{!resolveOption && ( {!resolveOption && (
<div className={clsx('flow-root pr-2 md:pr-0')}> <Col
<div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}> className={clsx(
{answerItems.map((item) => ( 'gap-2 pr-2 md:pr-0',
<div key={item.id} className={'relative pb-2'}> tradingAllowed(contract) ? '' : '-mb-6'
<div className="relative flex items-start space-x-3"> )}
<OpenAnswer {...item} /> >
</div> {answerItems.map((item) => (
</div> <OpenAnswer key={item.id} {...item} />
))} ))}
<Row className={'justify-end'}> {hasZeroBetAnswers && !showAllAnswers && (
{hasZeroBetAnswers && !showAllAnswers && ( <Button
<Button className="self-end"
color={'gray-white'} color="gray-white"
onClick={() => setShowAllAnswers(true)} onClick={() => setShowAllAnswers(true)}
size={'md'} size="md"
> >
Show More Show More
</Button> </Button>
)} )}
</Row> </Col>
</div>
</div>
)} )}
{answers.length <= 1 && ( {answers.length <= 1 && (
@ -212,7 +210,7 @@ function OpenAnswer(props: {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
return ( return (
<Col className={'border-base-200 bg-base-200 flex-1 rounded-md px-2'}> <Col className="border-base-200 bg-base-200 relative flex-1 rounded-md px-2">
<Modal open={open} setOpen={setOpen} position="center"> <Modal open={open} setOpen={setOpen} position="center">
<AnswerBetPanel <AnswerBetPanel
answer={answer} answer={answer}
@ -229,37 +227,30 @@ function OpenAnswer(props: {
/> />
<Row className="my-4 gap-3"> <Row className="my-4 gap-3">
<div className="px-1"> <Avatar className="mx-1" username={username} avatarUrl={avatarUrl} />
<Avatar username={username} avatarUrl={avatarUrl} />
</div>
<Col className="min-w-0 flex-1 lg:gap-1"> <Col className="min-w-0 flex-1 lg:gap-1">
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500">
<UserLink username={username} name={name} /> answered <UserLink username={username} name={name} /> answered
</div> </div>
<Col className="align-items justify-between gap-4 sm:flex-row"> <Col className="align-items justify-between gap-4 sm:flex-row">
<span className="whitespace-pre-line text-lg"> <Linkify className="whitespace-pre-line text-lg" text={text} />
<Linkify text={text} /> <Row className="align-items items-center justify-end gap-4">
</span> <span
className={clsx(
<Row className="items-center justify-center gap-4"> 'text-2xl',
<div className={'align-items flex w-full justify-end gap-4 '}> tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
<span )}
className={clsx( >
'text-2xl', {probPercent}
tradingAllowed(contract) ? 'text-primary' : 'text-gray-500' </span>
)} <BuyButton
> className={clsx(
{probPercent} 'btn-sm flex-initial !px-6 sm:flex',
</span> tradingAllowed(contract) ? '' : '!hidden'
<BuyButton )}
className={clsx( onClick={() => setOpen(true)}
'btn-sm flex-initial !px-6 sm:flex', />
tradingAllowed(contract) ? '' : '!hidden'
)}
onClick={() => setOpen(true)}
/>
</div>
</Row> </Row>
</Col> </Col>
</Col> </Col>