mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
published spacing tweaks, search filters renaming
This commit is contained in:
parent
1a54dda59c
commit
6d7ca84056
@ -29,7 +29,7 @@
|
|||||||
content: 'Copied!';
|
content: 'Copied!';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -150%;
|
top: -150%;
|
||||||
left: -100%;
|
left: -140%;
|
||||||
font-size: var(--font-size-mini);
|
font-size: var(--font-size-mini);
|
||||||
color: var(--brand-alert-green);
|
color: var(--brand-alert-green);
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,7 @@
|
|||||||
|
.filters {
|
||||||
|
margin-top: -1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.assets {
|
||||||
|
margin-top: calc(var(--spacer) / 3);
|
||||||
|
}
|
@ -7,9 +7,10 @@ import {
|
|||||||
queryMetadata,
|
queryMetadata,
|
||||||
transformChainIdsListToQuery
|
transformChainIdsListToQuery
|
||||||
} from '../../../../utils/aquarius'
|
} from '../../../../utils/aquarius'
|
||||||
import ServiceFilter from '../../../templates/Search/filterService'
|
import Filters from '../../../templates/Search/Filters'
|
||||||
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
|
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
|
||||||
import { useUserPreferences } from '../../../../providers/UserPreferences'
|
import { useUserPreferences } from '../../../../providers/UserPreferences'
|
||||||
|
import styles from './PublishedList.module.css'
|
||||||
|
|
||||||
export default function PublishedList({
|
export default function PublishedList({
|
||||||
accountId
|
accountId
|
||||||
@ -57,11 +58,12 @@ export default function PublishedList({
|
|||||||
}, [accountId, page, appConfig.metadataCacheUri, chainIds, service])
|
}, [accountId, page, appConfig.metadataCacheUri, chainIds, service])
|
||||||
|
|
||||||
return accountId ? (
|
return accountId ? (
|
||||||
<div>
|
<>
|
||||||
<ServiceFilter
|
<Filters
|
||||||
serviceType={service}
|
serviceType={service}
|
||||||
setServiceType={setServiceType}
|
setServiceType={setServiceType}
|
||||||
isSearch={false}
|
isSearch={false}
|
||||||
|
className={styles.filters}
|
||||||
/>
|
/>
|
||||||
<AssetList
|
<AssetList
|
||||||
assets={queryResult?.results}
|
assets={queryResult?.results}
|
||||||
@ -72,8 +74,9 @@ export default function PublishedList({
|
|||||||
onPageChange={(newPage) => {
|
onPageChange={(newPage) => {
|
||||||
setPage(newPage)
|
setPage(newPage)
|
||||||
}}
|
}}
|
||||||
|
className={styles.assets}
|
||||||
/>
|
/>
|
||||||
</div>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div>Please connect your Web3 wallet.</div>
|
<div>Please connect your Web3 wallet.</div>
|
||||||
)
|
)
|
||||||
|
@ -43,10 +43,6 @@ button.filter,
|
|||||||
color: var(--background-body);
|
color: var(--background-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filterList:first-of-type {
|
|
||||||
margin-bottom: calc(var(--spacer) / 6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.showClear:hover {
|
.showClear:hover {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
color: var(--color-primary);
|
color: var(--color-primary);
|
@ -1,9 +1,9 @@
|
|||||||
import React, { ReactElement, useState } from 'react'
|
import React, { ReactElement, useState } from 'react'
|
||||||
import { useNavigate } from '@reach/router'
|
import { useNavigate } from '@reach/router'
|
||||||
import styles from './filterService.module.css'
|
|
||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
import { addExistingParamsToUrl, FilterByTypeOptions } from './utils'
|
import { addExistingParamsToUrl, FilterByTypeOptions } from './utils'
|
||||||
import Button from '../../atoms/Button'
|
import Button from '../../atoms/Button'
|
||||||
|
import styles from './Filters.module.css'
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
@ -14,14 +14,16 @@ const serviceFilterItems = [
|
|||||||
{ display: 'algorithms', value: FilterByTypeOptions.Algorithm }
|
{ display: 'algorithms', value: FilterByTypeOptions.Algorithm }
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function FilterPrice({
|
export default function Filters({
|
||||||
serviceType,
|
serviceType,
|
||||||
setServiceType,
|
setServiceType,
|
||||||
isSearch
|
isSearch,
|
||||||
|
className
|
||||||
}: {
|
}: {
|
||||||
serviceType: string
|
serviceType: string
|
||||||
setServiceType: React.Dispatch<React.SetStateAction<string>>
|
setServiceType: React.Dispatch<React.SetStateAction<string>>
|
||||||
isSearch: boolean
|
isSearch: boolean
|
||||||
|
className?: string
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const [serviceSelections, setServiceSelections] = useState<string[]>([])
|
const [serviceSelections, setServiceSelections] = useState<string[]>([])
|
||||||
@ -72,11 +74,17 @@ export default function FilterPrice({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const styleClasses = cx({
|
||||||
|
filterList: true,
|
||||||
|
[className]: className
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.filterList}>
|
<div className={styleClasses}>
|
||||||
{serviceFilterItems.map((e, index) => {
|
{serviceFilterItems.map((e, index) => {
|
||||||
const isServiceSelected =
|
const isServiceSelected =
|
||||||
e.value === serviceType || serviceSelections.includes(e.value)
|
e.value === serviceType || serviceSelections.includes(e.value)
|
||||||
|
|
||||||
const selectFilter = cx({
|
const selectFilter = cx({
|
||||||
[styles.selected]: isServiceSelected,
|
[styles.selected]: isServiceSelected,
|
||||||
[styles.filter]: true
|
[styles.filter]: true
|
@ -2,15 +2,15 @@ import React, { ReactElement, useState, useEffect } from 'react'
|
|||||||
import Permission from '../../organisms/Permission'
|
import Permission from '../../organisms/Permission'
|
||||||
import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
|
import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
|
||||||
import AssetList from '../../organisms/AssetList'
|
import AssetList from '../../organisms/AssetList'
|
||||||
import styles from './index.module.css'
|
|
||||||
import queryString from 'query-string'
|
import queryString from 'query-string'
|
||||||
import ServiceFilter from './filterService'
|
import Filters from './Filters'
|
||||||
import Sort from './sort'
|
import Sort from './sort'
|
||||||
import { getResults } from './utils'
|
import { getResults } from './utils'
|
||||||
import { navigate } from 'gatsby'
|
import { navigate } from 'gatsby'
|
||||||
import { updateQueryStringParameter } from '../../../utils'
|
import { updateQueryStringParameter } from '../../../utils'
|
||||||
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
||||||
import { useUserPreferences } from '../../../providers/UserPreferences'
|
import { useUserPreferences } from '../../../providers/UserPreferences'
|
||||||
|
import styles from './index.module.css'
|
||||||
|
|
||||||
export default function SearchPage({
|
export default function SearchPage({
|
||||||
location,
|
location,
|
||||||
@ -72,7 +72,7 @@ export default function SearchPage({
|
|||||||
<>
|
<>
|
||||||
<div className={styles.search}>
|
<div className={styles.search}>
|
||||||
<div className={styles.row}>
|
<div className={styles.row}>
|
||||||
<ServiceFilter
|
<Filters
|
||||||
serviceType={service}
|
serviceType={service}
|
||||||
setServiceType={setServiceType}
|
setServiceType={setServiceType}
|
||||||
isSearch
|
isSearch
|
||||||
|
Loading…
x
Reference in New Issue
Block a user