Only show one of bet panel or bet row. Bring back sticky bet panel & sidebar

This commit is contained in:
James Grugett 2022-04-03 18:43:30 -05:00
parent ef0408dcdf
commit 6ce53a4418
4 changed files with 7 additions and 7 deletions

View File

@ -42,14 +42,14 @@ export const ContractOverview = (props: {
{(isBinary || resolution) && ( {(isBinary || resolution) && (
<ResolutionOrChance <ResolutionOrChance
className="hidden md:flex items-end" className="hidden items-end xl:flex"
contract={contract} contract={contract}
large large
/> />
)} )}
</Row> </Row>
<Row className="md:hidden items-center justify-between gap-4"> <Row className="items-center justify-between gap-4 xl:hidden">
{(isBinary || resolution) && ( {(isBinary || resolution) && (
<ResolutionOrChance contract={contract} /> <ResolutionOrChance contract={contract} />
)} )}
@ -103,7 +103,7 @@ export const ContractOverview = (props: {
comments={comments} comments={comments}
user={user} user={user}
mode="all" mode="all"
betRowClassName="!mt-0" betRowClassName="!mt-0 xl:hidden"
/> />
</Col> </Col>
) )

View File

@ -86,8 +86,8 @@ export default function Sidebar() {
const navigationOptions = user === null ? signedOutNavigation : navigation const navigationOptions = user === null ? signedOutNavigation : navigation
return ( return (
<nav aria-label="Sidebar" className="sticky divide-y divide-gray-300"> <nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300">
<div className="mt-2 space-y-1 pb-6"> <div className="space-y-1 pb-6">
<ManifoldLogo hideText /> <ManifoldLogo hideText />
</div> </div>

View File

@ -33,7 +33,7 @@ export function Page(props: {
<div className="block xl:hidden">{rightSidebar}</div> <div className="block xl:hidden">{rightSidebar}</div>
</main> </main>
<aside className="hidden xl:col-span-3 xl:block"> <aside className="hidden xl:col-span-3 xl:block">
<div className="sticky space-y-4">{rightSidebar}</div> <div className="sticky top-4 space-y-4">{rightSidebar}</div>
</aside> </aside>
</div> </div>

View File

@ -124,7 +124,7 @@ export default function ContractPage(props: {
const rightSidebar = hasSidePanel ? ( const rightSidebar = hasSidePanel ? (
<Col className="gap-4"> <Col className="gap-4">
{allowTrade && ( {allowTrade && (
<BetPanel className="hidden lg:flex" contract={contract} /> <BetPanel className="hidden xl:flex" contract={contract} />
)} )}
{allowResolve && <ResolutionPanel creator={user} contract={contract} />} {allowResolve && <ResolutionPanel creator={user} contract={contract} />}
</Col> </Col>