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

54
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,7 +74,6 @@ 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>
@ -90,9 +88,11 @@ export default function NewContract() {
/> />
</div> </div>
<Spacer h={4} />
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text">Chance</span> <span className="label-text">Initial probability</span>
</label> </label>
<label className="input-group input-group-md w-fit"> <label className="input-group input-group-md w-fit">
<input <input
@ -106,29 +106,9 @@ export default function NewContract() {
<span>%</span> <span>%</span>
</label> </label>
</div> </div>
</div>
{/* Collapsible "Advanced" section */} <Spacer h={4} />
<div
tabIndex={0}
className={clsx(
'cursor-pointer relative collapse collapse-arrow',
collapsed ? 'collapse-close' : 'collapse-open'
)}
>
<div
className="mt-4 mr-6 text-sm text-gray-400 text-right"
onClick={() => setCollapsed((collapsed) => !collapsed)}
>
Advanced
</div>
<Row>
<div
className="collapse-title p-0 absolute w-0 h-0 min-h-0"
style={{ top: -2, right: -15, color: '#9ca3af' /* gray-400 */ }}
/>
</Row>
<div className="collapse-content !p-0 m-0 !bg-transparent">
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text">Description (optional)</span> <span className="label-text">Description (optional)</span>
@ -139,9 +119,31 @@ export default function NewContract() {
value={description} value={description}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onChange={(e) => setDescription(e.target.value || '')} onChange={(e) => setDescription(e.target.value || '')}
></textarea> />
</div> </div>
{/* Collapsible "Advanced" section */}
<div
tabIndex={0}
className={clsx(
'cursor-pointer relative collapse collapse-arrow',
collapsed ? 'collapse-close' : 'collapse-open'
)}
>
<div onClick={() => setCollapsed((collapsed) => !collapsed)}>
<div className="mt-4 mr-6 text-sm text-gray-400 text-right">
Advanced
</div>
<div
className="collapse-title p-0 absolute w-0 h-0 min-h-0"
style={{
top: -2,
right: -15,
color: '#9ca3af' /* gray-400 */,
}}
/>
</div>
<div className="collapse-content !p-0 m-0 !bg-transparent">
<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>