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

Create page: Chance => Initial probabilty, description out of advanced, advanced arrow clickable

Browse Source
This commit is contained in:
jahooma 2022-01-03 12:39:44 -06:00
parent f7d4926d22
commit a331faa1a7
1 changed files with 52 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
web/pages/create.tsx
View File

@ -8,7 +8,6 @@ import { useUser } from '../hooks/use-user'
import { path } from '../lib/firebase/contracts' import { path } from '../lib/firebase/contracts'
import { createContract } from '../lib/service/create-contract' import { createContract } from '../lib/service/create-contract'
import { Page } from '../components/page' import { Page } from '../components/page'
import { Row } from '../components/layout/row'
import clsx from 'clsx' import clsx from 'clsx'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@ -75,37 +74,52 @@ export default function NewContract() {
{/* Create a Tailwind form that takes in all the fields needed for a new contract */} {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
{/* When the form is submitted, create a new contract in the database */} {/* When the form is submitted, create a new contract in the database */}
<form> <form>
<div className="flex justify-between gap-4 items-center"> <div className="form-control w-full">
<div className="form-control w-full"> <label className="label">
<label className="label"> <span className="label-text">Prediction</span>
<span className="label-text">Prediction</span> </label>
</label>
<input
type="text"
placeholder="e.g. The FDA will approve Paxlovid before Jun 2nd, 2022"
className="input input-bordered"
value={question}
onChange={(e) => setQuestion(e.target.value || '')}
/>
</div>
<Spacer h={4} />
<div className="form-control">
<label className="label">
<span className="label-text">Initial probability</span>
</label>
<label className="input-group input-group-md w-fit">
<input <input
type="text" type="number"
placeholder="e.g. The FDA will approve Paxlovid before Jun 2nd, 2022" value={initialProb}
className="input input-bordered" className="input input-bordered input-md"
value={question} min={1}
onChange={(e) => setQuestion(e.target.value || '')} max={99}
onChange={(e) => setInitialProb(parseInt(e.target.value))}
/> />
</div> <span>%</span>
</label>
</div>
<div className="form-control"> <Spacer h={4} />
<label className="label">
<span className="label-text">Chance</span> <div className="form-control">
</label> <label className="label">
<label className="input-group input-group-md w-fit"> <span className="label-text">Description (optional)</span>
<input </label>
type="number" <textarea
value={initialProb} className="textarea w-full h-24 textarea-bordered"
className="input input-bordered input-md" placeholder={descriptionPlaceholder}
min={1} value={description}
max={99} onClick={(e) => e.stopPropagation()}
onChange={(e) => setInitialProb(parseInt(e.target.value))} onChange={(e) => setDescription(e.target.value || '')}
/> />
<span>%</span>
</label>
</div>
</div> </div>
{/* Collapsible "Advanced" section */} {/* Collapsible "Advanced" section */}
@ -116,32 +130,20 @@ export default function NewContract() {
collapsed ? 'collapse-close' : 'collapse-open' collapsed ? 'collapse-close' : 'collapse-open'
)} )}
> >
<div <div onClick={() => setCollapsed((collapsed) => !collapsed)}>
className="mt-4 mr-6 text-sm text-gray-400 text-right" <div className="mt-4 mr-6 text-sm text-gray-400 text-right">
onClick={() => setCollapsed((collapsed) => !collapsed)} Advanced
> </div>
Advanced
</div>
<Row>
<div <div
className="collapse-title p-0 absolute w-0 h-0 min-h-0" className="collapse-title p-0 absolute w-0 h-0 min-h-0"
style={{ top: -2, right: -15, color: '#9ca3af' /* gray-400 */ }} style={{
top: -2,
right: -15,
color: '#9ca3af' /* gray-400 */,
}}
/> />
</Row> </div>
<div className="collapse-content !p-0 m-0 !bg-transparent"> <div className="collapse-content !p-0 m-0 !bg-transparent">
<div className="form-control">
<label className="label">
<span className="label-text">Description (optional)</span>
</label>
<textarea
className="textarea w-full h-24 textarea-bordered"
placeholder={descriptionPlaceholder}
value={description}
onClick={(e) => e.stopPropagation()}
onChange={(e) => setDescription(e.target.value || '')}
></textarea>
</div>
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text">Close date (optional)</span> <span className="label-text">Close date (optional)</span>