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

moved groups around, added new subscribe button

Browse Source
This commit is contained in:
ingawei 2022-09-13 18:44:23 -07:00
parent 7d9a57bf86
commit 2c1dedac28
3 changed files with 156 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
web/components/contract/contract-details.tsx
View File

@ -122,140 +122,172 @@ export function ContractDetails(props: {
const { volumeLabel, resolvedDate } = contractMetrics(contract) const { volumeLabel, resolvedDate } = contractMetrics(contract)
const user = useUser() const user = useUser()
const isCreator = user?.id === creatorId const isCreator = user?.id === creatorId
const [open, setOpen] = useState(false)
const { width } = useWindowSize() const { width } = useWindowSize()
const isMobile = (width ?? 0) < 600 const isMobile = (width ?? 0) < 600
return (
<Col>
<Row>
<Avatar
username={creatorUsername}
avatarUrl={creatorAvatarUrl}
noLink={disabled}
size={9}
className="mr-1.5"
/>
{!disabled && (
<div className="absolute mt-2 ml-[11px]">
<MiniUserFollowButton userId={creatorId} />
</div>
)}
<Col className="text-greyscale-6 ml-2 flex-1 flex-wrap text-sm">
<Row className="w-full justify-between ">
{disabled ? (
creatorName
) : (
<UserLink
className="my-auto whitespace-nowrap"
name={creatorName}
username={creatorUsername}
short={isMobile}
/>
)}
</Row>
<Row className="text-2xs text-greyscale-4 gap-2 sm:text-xs">
{(!!closeTime || !!resolvedDate) && (
<Row className="items-center gap-1">
{resolvedDate && resolutionTime ? (
<>
<DateTimeTooltip
text="Market resolved:"
time={resolutionTime}
>
<Row>
<div>resolved&nbsp;</div>
<b>{resolvedDate}</b>
</Row>
</DateTimeTooltip>
</>
) : null}
{!resolvedDate && closeTime && user && (
<Row>
<div>Closes&nbsp;</div>
<EditableCloseDate
closeTime={closeTime}
contract={contract}
isCreator={isCreator ?? false}
/>
</Row>
)}
</Row>
)}
{!isMobile && (
<MarketGroups
contract={contract}
isMobile={isMobile}
disabled={disabled}
/>
)}
</Row>
</Col>
<div className="mt-0">
<ExtraContractActionsRow contract={contract} />
</div>
</Row>
{/* GROUPS */}
{isMobile && (
<div className="mt-2">
<MarketGroups
contract={contract}
isMobile={isMobile}
disabled={disabled}
/>
</div>
)}
{/* {user && (
<>
<Row className="hidden items-center gap-1 md:inline-flex">
<DatabaseIcon className="h-5 w-5" />
<div className="whitespace-nowrap">{volumeLabel}</div>
</Row>
</>
)} */}
</Col>
)
}
export function MarketGroups(props: {
contract: Contract
isMobile: boolean | undefined
disabled: boolean | undefined
}) {
const [open, setOpen] = useState(false)
const user = useUser()
const { contract, isMobile, disabled } = props
const groupToDisplay = getGroupLinkToDisplay(contract) const groupToDisplay = getGroupLinkToDisplay(contract)
const groupInfo = groupToDisplay ? ( const groupInfo = groupToDisplay ? (
<Link prefetch={false} href={groupPath(groupToDisplay.slug)}> <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
<a <a
className={clsx( className={clsx(
linkClass, 'flex flex-row items-center truncate pr-1',
'flex flex-row items-center truncate pr-0 sm:pr-2',
isMobile ? 'max-w-[140px]' : 'max-w-[250px]' isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
)} )}
> >
{/* <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" /> */} <div className="bg-greyscale-6 hover:bg-greyscale-4 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs">
<div className="bg-greyscale-6 items-center truncate rounded-full px-2 text-white">
{groupToDisplay.name} {groupToDisplay.name}
</div> </div>
</a> </a>
</Link> </Link>
) : ( ) : (
<Button <Row
size={'xs'} className={clsx(
className={'max-w-[200px] pr-2'} 'cursor-default select-none items-center truncate pr-1',
color={'gray-white'} isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
onClick={() => !groupToDisplay && setOpen(true)}
>
<Row>
{/* <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" /> */}
<div className="bg-greyscale-6 items-center truncate rounded-full px-2 text-white">
No Group
</div>
</Row>
</Button>
)
return (
<Row>
<Avatar
username={creatorUsername}
avatarUrl={creatorAvatarUrl}
noLink={disabled}
size={9}
/>
{!disabled && (
<div className="absolute mt-4">
<MiniUserFollowButton userId={creatorId} />
</div>
)} )}
<Col className="text-greyscale-6 ml-2 flex-1 flex-wrap text-sm"> >
<Row className="w-full justify-between "> <div
{disabled ? ( className={clsx(
creatorName 'bg-greyscale-6 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs'
) : ( )}
<UserLink >
className="my-auto whitespace-nowrap" No Group
name={creatorName}
username={creatorUsername}
short={isMobile}
/>
)}
</Row>
<Row className="text-2xs text-greyscale-4 sm:text-xs">
{(!!closeTime || !!resolvedDate) && (
<Row className="items-center gap-1">
{resolvedDate && resolutionTime ? (
<>
<DateTimeTooltip
text="Market resolved:"
time={resolutionTime}
>
<Row>
<div>resolved&nbsp;</div>
<b>{resolvedDate}</b>
</Row>
</DateTimeTooltip>
</>
) : null}
{!resolvedDate && closeTime && user && (
<Row>
<div>Closes&nbsp;</div>
<EditableCloseDate
closeTime={closeTime}
contract={contract}
isCreator={isCreator ?? false}
/>
</Row>
)}
</Row>
)}
{/* <Row>
{disabled ? (
groupInfo
) : !groupToDisplay && !user ? (
<div />
) : (
<Row>
{groupInfo}
{user && groupToDisplay && (
<Button
size={'xs'}
color={'gray-white'}
onClick={() => setOpen(!open)}
>
<PlusCircleIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
</Button>
)}
</Row>
)}
</Row>
<Modal open={open} setOpen={setOpen} size={'md'}>
<Col
className={
'max-h-[70vh] min-h-[20rem] overflow-auto rounded bg-white p-6'
}
>
<ContractGroupsList contract={contract} user={user} />
</Col>
</Modal> */}
{/* {user && (
<>
<Row className="hidden items-center gap-1 md:inline-flex">
<DatabaseIcon className="h-5 w-5" />
<div className="whitespace-nowrap">{volumeLabel}</div>
</Row>
</>
)} */}
</Row>
</Col>
<div className="mt-0">
<ExtraContractActionsRow contract={contract} />
</div> </div>
</Row> </Row>
) )
return (
<>
<Row className="align-middle">
{disabled ? (
{ groupInfo }
) : (
// !user ? (
// <div />
// ) :
<Row>
{groupInfo}
{user && (
<button
className="text-greyscale-6 hover:text-greyscale-4"
onClick={() => setOpen(!open)}
>
<PlusCircleIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
</button>
)}
</Row>
)}
</Row>
<Modal open={open} setOpen={setOpen} size={'md'}>
<Col
className={
'max-h-[70vh] min-h-[20rem] overflow-auto rounded bg-white p-6'
}
>
<ContractGroupsList contract={contract} user={user} />
</Col>
</Modal>
</>
)
} }
export function ExtraMobileContractDetails(props: { export function ExtraMobileContractDetails(props: {

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

@ -75,12 +75,14 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
<Col className="gap-1 md:gap-2"> <Col className="gap-1 md:gap-2">
<Col className="gap-3 px-2 sm:gap-4"> <Col className="gap-3 px-2 sm:gap-4">
<ContractDetails contract={contract} /> <ContractDetails contract={contract} />
<OverviewQuestion text={contract.question} /> <Row className="justify-between gap-4">
<BinaryResolutionOrChance <OverviewQuestion text={contract.question} />
className="hidden items-end xl:flex" <BinaryResolutionOrChance
contract={contract} className="hidden items-end xl:flex"
large contract={contract}
/> large
/>
</Row>
<Row className="items-center justify-between gap-4 xl:hidden"> <Row className="items-center justify-between gap-4 xl:hidden">
<BinaryResolutionOrChance contract={contract} /> <BinaryResolutionOrChance contract={contract} />
{/* <ExtraMobileContractDetails contract={contract} /> */} {/* <ExtraMobileContractDetails contract={contract} /> */}

1
web/components/follow-button.tsx
View File

@ -129,6 +129,7 @@ export function MiniUserFollowButton(props: { userId: string }) {
className={clsx('h-[24px] w-5 sm:mr-2')} className={clsx('h-[24px] w-5 sm:mr-2')}
aria-hidden="true" aria-hidden="true"
/> />
<circle className="absolute h-5 w-5 text-white" />
</Button> </Button>
</> </>
) )