1
0
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:
Matthias Kretschmann 2021-09-03 14:50:09 +02:00
parent 1a54dda59c
commit 6d7ca84056
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 30 additions and 16 deletions

View File

@ -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);
} }

View File

@ -0,0 +1,7 @@
.filters {
margin-top: -1rem;
}
.assets {
margin-top: calc(var(--spacer) / 3);
}

View File

@ -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>
) )

View File

@ -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);

View File

@ -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

View File

@ -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