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

Better layout on mobile for contract page

Browse Source
This commit is contained in:
jahooma 2021-12-10 12:52:11 -06:00
parent b67c9bafc2
commit e18e7548d5
3 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/bet-panel.tsx
View File

@ -57,7 +57,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
const betDisabled = isSubmitting || wasSubmitted const betDisabled = isSubmitting || wasSubmitted
return ( return (
<Col className={'bg-gray-600 p-6 rounded ' + className}> <Col className={clsx('bg-gray-600 p-6 rounded w-full md:w-auto', className)}>
<div className="p-2 font-medium">Pick outcome</div> <div className="p-2 font-medium">Pick outcome</div>
<YesNoSelector <YesNoSelector
className="p-2" className="p-2"

8
web/components/contract-overview.tsx
View File

@ -44,12 +44,12 @@ export const ContractOverview = (props: { contract: Contract }) => {
<Col className="max-w-3xl w-full"> <Col className="max-w-3xl w-full">
<div className="text-3xl font-medium p-2">{contract.question}</div> <div className="text-3xl font-medium p-2">{contract.question}</div>
<Row> <Row className="flex-wrap text-sm">
<div className="p-2">By {contract.creatorName}</div> <div className="p-2 whitespace-nowrap">By {contract.creatorName}</div>
<div className="py-2">•</div> <div className="py-2">•</div>
<div className="p-2">Dec 9</div> <div className="p-2 whitespace-nowrap">Dec 9</div>
<div className="py-2">•</div> <div className="py-2">•</div>
<div className="p-2">200,000 volume</div> <div className="p-2 whitespace-nowrap">200,000 volume</div>
</Row> </Row>
<Spacer h={4} /> <Spacer h={4} />

8
web/pages/contract/[contractId].tsx
View File

@ -2,9 +2,9 @@ import React from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useContract } from '../../hooks/use-contract' import { useContract } from '../../hooks/use-contract'
import { Header } from '../../components/header' import { Header } from '../../components/header'
import { Row } from '../../components/layout/row'
import { ContractOverview } from '../../components/contract-overview' import { ContractOverview } from '../../components/contract-overview'
import { BetPanel } from '../../components/bet-panel' import { BetPanel } from '../../components/bet-panel'
import { Col } from '../../components/layout/col'
export default function ContractPage() { export default function ContractPage() {
const router = useRouter() const router = useRouter()
@ -25,11 +25,13 @@ export default function ContractPage() {
<Header /> <Header />
<div className="w-full flex flex-col p-4 mt-4"> <div className="w-full flex flex-col p-4 mt-4">
<Row className="justify-between"> <Col className="md:justify-between md:flex-row">
<ContractOverview contract={contract} /> <ContractOverview contract={contract} />
<div className="mt-12 md:mt-0" />
<BetPanel className="self-start" contract={contract} /> <BetPanel className="self-start" contract={contract} />
</Row> </Col>
</div> </div>
</div> </div>
) )