diff --git a/functions/package.json b/functions/package.json index 5839b5eb..d6278c25 100644 --- a/functions/package.json +++ b/functions/package.json @@ -39,6 +39,7 @@ "lodash": "4.17.21", "mailgun-js": "0.22.0", "module-alias": "2.2.2", + "react-masonry-css": "1.0.16", "stripe": "8.194.0", "zod": "3.17.2" }, diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx index ebcba985..feb0de3b 100644 --- a/web/components/contract-search.tsx +++ b/web/components/contract-search.tsx @@ -83,7 +83,6 @@ export function ContractSearch(props: { highlightOptions?: ContractHighlightOptions onContractClick?: (contract: Contract) => void hideOrderSelector?: boolean - overrideGridClassName?: string cardHideOptions?: { hideGroupLink?: boolean hideQuickBet?: boolean @@ -99,7 +98,6 @@ export function ContractSearch(props: { defaultFilter, additionalFilter, onContractClick, - overrideGridClassName, hideOrderSelector, cardHideOptions, highlightOptions, @@ -183,7 +181,6 @@ export function ContractSearch(props: { loadMore={performQuery} showTime={showTime} onContractClick={onContractClick} - overrideGridClassName={overrideGridClassName} highlightOptions={highlightOptions} cardHideOptions={cardHideOptions} /> diff --git a/web/components/contract/contracts-grid.tsx b/web/components/contract/contracts-grid.tsx index 05c66d56..0839777c 100644 --- a/web/components/contract/contracts-grid.tsx +++ b/web/components/contract/contracts-grid.tsx @@ -9,6 +9,7 @@ import { useCallback } from 'react' import clsx from 'clsx' import { LoadingIndicator } from '../loading-indicator' import { VisibilityObserver } from '../visibility-observer' +import Masonry from 'react-masonry-css' export type ContractHighlightOptions = { contractIds?: string[] @@ -20,7 +21,6 @@ export function ContractsGrid(props: { loadMore?: () => void showTime?: ShowTime onContractClick?: (contract: Contract) => void - overrideGridClassName?: string cardHideOptions?: { hideQuickBet?: boolean hideGroupLink?: boolean @@ -32,7 +32,6 @@ export function ContractsGrid(props: { showTime, loadMore, onContractClick, - overrideGridClassName, cardHideOptions, highlightOptions, } = props @@ -64,12 +63,11 @@ export function ContractsGrid(props: { return ( <Col className="gap-8"> - <ul - className={clsx( - overrideGridClassName - ? overrideGridClassName - : 'grid w-full grid-cols-1 gap-4 md:grid-cols-2' - )} + <Masonry + // Show only 1 column on tailwind's md breakpoint (768px) + breakpointCols={{ default: 2, 768: 1 }} + className="-ml-4 flex w-auto" + columnClassName="pl-4 bg-clip-padding" > {contracts.map((contract) => ( <ContractCard @@ -81,14 +79,13 @@ export function ContractsGrid(props: { } hideQuickBet={hideQuickBet} hideGroupLink={hideGroupLink} - className={ - contractIds?.includes(contract.id) - ? highlightClassName - : undefined - } + className={clsx( + 'mb-4 break-inside-avoid-column', + contractIds?.includes(contract.id) && highlightClassName + )} /> ))} - </ul> + </Masonry> <VisibilityObserver onVisibilityUpdated={onVisibilityUpdated} className="relative -top-96 h-1" diff --git a/web/components/editor/market-modal.tsx b/web/components/editor/market-modal.tsx index 85b7a978..ea62b960 100644 --- a/web/components/editor/market-modal.tsx +++ b/web/components/editor/market-modal.tsx @@ -65,9 +65,6 @@ export function MarketModal(props: { <ContractSearch hideOrderSelector onContractClick={addContract} - overrideGridClassName={ - 'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1' - } cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }} highlightOptions={{ contractIds: contracts.map((c) => c.id), diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx index 2ee9fa49..4e42a0bd 100644 --- a/web/pages/group/[...slugs]/index.tsx +++ b/web/pages/group/[...slugs]/index.tsx @@ -607,9 +607,6 @@ function AddContractButton(props: { group: Group; user: User }) { user={user} hideOrderSelector={true} onContractClick={addContractToCurrentGroup} - overrideGridClassName={ - 'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1' - } cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }} additionalFilter={{ excludeContractIds: group.contractIds }} highlightOptions={{ diff --git a/yarn.lock b/yarn.lock index b28b373b..bbc13091 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9947,6 +9947,11 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1: dependencies: "@babel/runtime" "^7.10.3" +react-masonry-css@1.0.16: + version "1.0.16" + resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c" + integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ== + react-motion@^0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"