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

Move search and sort/filter options in one line on mobile

Browse Source
This commit is contained in:
James Grugett 2022-05-18 10:42:52 -04:00
parent 7b3c21cf98
commit acd59767e4
2 changed files with 35 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/components/contract-search.tsx
View File

@ -82,54 +82,49 @@ export function ContractSearch(props: {
additionalFilter?.tag ?? additionalFilter?.creatorId ?? ''
}`}
>
<Row className="flex-wrap gap-2">
<Row className="gap-1 sm:gap-2">
<SearchBox
className="flex-1"
classNames={{
form: 'before:top-6',
input: '!pl-10 !input !input-bordered shadow-none',
resetIcon: 'mt-2',
input: '!pl-10 !input !input-bordered shadow-none w-[100px]',
resetIcon: 'mt-2 hidden sm:flex',
}}
/>
<select
className="!select !select-bordered"
value={filter}
onChange={(e) => setFilter(e.target.value as filter)}
>
<option value="open">Open</option>
<option value="closed">Closed</option>
<option value="resolved">Resolved</option>
<option value="all">All</option>
</select>
<SortBy
items={sortIndexes}
classNames={{
select: '!select !select-bordered',
}}
placeholder="Search markets"
/>
<Row className="mt-2 gap-2 sm:mt-0">
<select
className="!select !select-bordered"
value={filter}
onChange={(e) => setFilter(e.target.value as filter)}
>
<option value="open">Open</option>
<option value="closed">Closed</option>
<option value="resolved">Resolved</option>
<option value="all">All</option>
</select>
<SortBy
items={sortIndexes}
classNames={{
select: '!select !select-bordered',
}}
/>
</Row>
</Row>
<div>
{showCategorySelector && (
<>
<Spacer h={4} />
<CategorySelector
user={user}
category={category}
setCategory={setCategory}
/>
</>
)}
<Spacer h={4} />
<ContractSearchInner
querySortOptions={querySortOptions}
filter={filter}
additionalFilter={{ category, ...additionalFilter }}
<Spacer h={3} />
{showCategorySelector && (
<CategorySelector
className="mb-2"
user={user}
category={category}
setCategory={setCategory}
/>
</div>
)}
<ContractSearchInner
querySortOptions={querySortOptions}
filter={filter}
additionalFilter={{ category, ...additionalFilter }}
/>
</InstantSearch>
)
}

2
web/components/contract/contracts-list.tsx
View File

@ -37,7 +37,7 @@ export function ContractsGrid(props: {
return (
<Col className="gap-8">
<ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
<ul className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
{contracts.map((contract) => (
<ContractCard
contract={contract}