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

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

@ -122,51 +122,21 @@ export function ContractDetails(props: {
const { volumeLabel, resolvedDate } = contractMetrics(contract)
const user = useUser()
const isCreator = user?.id === creatorId
const [open, setOpen] = useState(false)
const { width } = useWindowSize()
const isMobile = (width ?? 0) < 600
const groupToDisplay = getGroupLinkToDisplay(contract)
const groupInfo = groupToDisplay ? (
<Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
<a
className={clsx(
linkClass,
'flex flex-row items-center truncate pr-0 sm:pr-2',
isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
)}
>
{/* <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">
{groupToDisplay.name}
</div>
</a>
</Link>
) : (
<Button
size={'xs'}
className={'max-w-[200px] pr-2'}
color={'gray-white'}
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 (
<Col>
<Row>
<Avatar
username={creatorUsername}
avatarUrl={creatorAvatarUrl}
noLink={disabled}
size={9}
className="mr-1.5"
/>
{!disabled && (
<div className="absolute mt-4">
<div className="absolute mt-2 ml-[11px]">
<MiniUserFollowButton userId={creatorId} />
</div>
)}
@ -183,7 +153,7 @@ export function ContractDetails(props: {
/>
)}
</Row>
<Row className="text-2xs text-greyscale-4 sm:text-xs">
<Row className="text-2xs text-greyscale-4 gap-2 sm:text-xs">
{(!!closeTime || !!resolvedDate) && (
<Row className="items-center gap-1">
{resolvedDate && resolutionTime ? (
@ -212,22 +182,97 @@ export function ContractDetails(props: {
)}
</Row>
)}
{/* <Row>
{disabled ? (
groupInfo
) : !groupToDisplay && !user ? (
<div />
{!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 groupInfo = groupToDisplay ? (
<Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
<a
className={clsx(
'flex flex-row items-center truncate pr-1',
isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
)}
>
<div className="bg-greyscale-6 hover:bg-greyscale-4 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs">
{groupToDisplay.name}
</div>
</a>
</Link>
) : (
<Row
className={clsx(
'cursor-default select-none items-center truncate pr-1',
isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
)}
>
<div
className={clsx(
'bg-greyscale-6 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs'
)}
>
No Group
</div>
</Row>
)
return (
<>
<Row className="align-middle">
{disabled ? (
{ groupInfo }
) : (
// !user ? (
// <div />
// ) :
<Row>
{groupInfo}
{user && groupToDisplay && (
<Button
size={'xs'}
color={'gray-white'}
{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>
</button>
)}
</Row>
)}
@ -240,21 +285,8 @@ export function ContractDetails(props: {
>
<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>
</Modal>
</>
)} */}
</Row>
</Col>
<div className="mt-0">
<ExtraContractActionsRow contract={contract} />
</div>
</Row>
)
}

2
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-3 px-2 sm:gap-4">
<ContractDetails contract={contract} />
<Row className="justify-between gap-4">
<OverviewQuestion text={contract.question} />
<BinaryResolutionOrChance
className="hidden items-end xl:flex"
contract={contract}
large
/>
</Row>
<Row className="items-center justify-between gap-4 xl:hidden">
<BinaryResolutionOrChance 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')}
aria-hidden="true"
/>
<circle className="absolute h-5 w-5 text-white" />
</Button>
</>
)