mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
front page styling
This commit is contained in:
parent
532d84426f
commit
4e30eb14d1
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"site": {
|
"site": {
|
||||||
"siteTitle": "Ocean Market",
|
"siteTitle": "Ocean Market",
|
||||||
"siteTagline": "A marketplace to find and publish open data sets in the Ocean Network.",
|
"siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
|
||||||
"siteUrl": "https://market.oceanprotocol.now.sh",
|
"siteUrl": "https://market.oceanprotocol.now.sh",
|
||||||
"siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png",
|
"siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png",
|
||||||
"siteImage": "../src/images/share.png",
|
"siteImage": "../src/images/share.png",
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
.app {
|
.app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg')
|
||||||
|
no-repeat center 10rem;
|
||||||
|
|
||||||
/* sticky footer technique */
|
/* sticky footer technique */
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -12,6 +12,7 @@ export interface LayoutProps {
|
|||||||
uri: string
|
uri: string
|
||||||
description?: string
|
description?: string
|
||||||
noPageHeader?: boolean
|
noPageHeader?: boolean
|
||||||
|
headerCenter?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Layout({
|
export default function Layout({
|
||||||
@ -19,7 +20,8 @@ export default function Layout({
|
|||||||
title,
|
title,
|
||||||
uri,
|
uri,
|
||||||
description,
|
description,
|
||||||
noPageHeader
|
noPageHeader,
|
||||||
|
headerCenter
|
||||||
}: LayoutProps): ReactElement {
|
}: LayoutProps): ReactElement {
|
||||||
return (
|
return (
|
||||||
<div className={styles.app}>
|
<div className={styles.app}>
|
||||||
@ -29,7 +31,11 @@ export default function Layout({
|
|||||||
<main className={styles.main}>
|
<main className={styles.main}>
|
||||||
<Container>
|
<Container>
|
||||||
{title && !noPageHeader && (
|
{title && !noPageHeader && (
|
||||||
<PageHeader title={title} description={description} />
|
<PageHeader
|
||||||
|
title={title}
|
||||||
|
description={description}
|
||||||
|
center={headerCenter}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{children}
|
{children}
|
||||||
</Container>
|
</Container>
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
import React, { ReactElement, ReactNode } from 'react'
|
import React, { ReactElement, ReactNode } from 'react'
|
||||||
|
import classNames from 'classnames/bind'
|
||||||
import styles from './Container.module.css'
|
import styles from './Container.module.css'
|
||||||
|
|
||||||
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
export default function Container({
|
export default function Container({
|
||||||
children,
|
children,
|
||||||
narrow,
|
narrow,
|
||||||
@ -10,13 +13,11 @@ export default function Container({
|
|||||||
narrow?: boolean
|
narrow?: boolean
|
||||||
className?: string
|
className?: string
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
return (
|
const styleClasses = cx({
|
||||||
<div
|
container: true,
|
||||||
className={`${styles.container} ${narrow && styles.narrow} ${
|
narrow: narrow,
|
||||||
className && className
|
[className]: className
|
||||||
}`}
|
})
|
||||||
>
|
|
||||||
{children}
|
return <div className={styleClasses}>{children}</div>
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
@ -14,3 +14,9 @@
|
|||||||
margin-top: calc(var(--spacer) / 4);
|
margin-top: calc(var(--spacer) / 4);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@ -6,14 +6,16 @@ const cx = classNames.bind(styles)
|
|||||||
|
|
||||||
export default function PageHeader({
|
export default function PageHeader({
|
||||||
title,
|
title,
|
||||||
description
|
description,
|
||||||
|
center
|
||||||
}: {
|
}: {
|
||||||
title: string
|
title: string
|
||||||
description?: string
|
description?: string
|
||||||
center?: boolean
|
center?: boolean
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const styleClasses = cx({
|
const styleClasses = cx({
|
||||||
header: true
|
header: true,
|
||||||
|
center: center
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,3 +1,2 @@
|
|||||||
.header {
|
.header {
|
||||||
background-color: var(--brand-white);
|
|
||||||
}
|
}
|
||||||
|
@ -1 +1,14 @@
|
|||||||
|
.searchWrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: calc(var(--spacer) * var(--line-height));
|
||||||
|
}
|
||||||
|
|
||||||
|
.latest {
|
||||||
|
margin-top: calc(var(--spacer) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.latest h3 {
|
||||||
|
font-size: var(--font-size-large);
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
import React, { ReactElement, useEffect, useState } from 'react'
|
import React, { ReactElement, useEffect, useState } from 'react'
|
||||||
import SearchBar from '../molecules/SearchBar'
|
import SearchBar from '../molecules/SearchBar'
|
||||||
import { ServiceMetaDataMarket } from '../../@types/MetaData'
|
|
||||||
import AssetTeaser from '../molecules/AssetTeaser'
|
|
||||||
import styles from './Home.module.css'
|
import styles from './Home.module.css'
|
||||||
import { oceanConfig } from '../../../app.config'
|
import { oceanConfig } from '../../../app.config'
|
||||||
import { MetadataStore, Logger } from '@oceanprotocol/lib'
|
import { MetadataStore, Logger } from '@oceanprotocol/lib'
|
||||||
import AssetList from '../organisms/AssetList'
|
import AssetList from '../organisms/AssetList'
|
||||||
import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
|
import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
|
||||||
|
import Container from '../atoms/Container'
|
||||||
|
import Loader from '../atoms/Loader'
|
||||||
|
|
||||||
async function getLatestAssets() {
|
async function getLatestAssets() {
|
||||||
try {
|
try {
|
||||||
@ -30,20 +30,31 @@ async function getLatestAssets() {
|
|||||||
|
|
||||||
export default function HomePage(): ReactElement {
|
export default function HomePage(): ReactElement {
|
||||||
const [queryResult, setQueryResult] = useState<QueryResult>()
|
const [queryResult, setQueryResult] = useState<QueryResult>()
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function init() {
|
async function init() {
|
||||||
const results = await getLatestAssets()
|
const results = await getLatestAssets()
|
||||||
setQueryResult(results)
|
setQueryResult(results)
|
||||||
|
setLoading(false)
|
||||||
}
|
}
|
||||||
init()
|
init()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SearchBar large />
|
<Container narrow className={styles.searchWrap}>
|
||||||
<h3>Latest Data Sets</h3>
|
<SearchBar large />
|
||||||
{queryResult && <AssetList queryResult={queryResult} />}
|
</Container>
|
||||||
|
|
||||||
|
<section className={styles.latest}>
|
||||||
|
<h3>Latest Data Sets</h3>
|
||||||
|
{loading ? (
|
||||||
|
<Loader />
|
||||||
|
) : (
|
||||||
|
queryResult && <AssetList queryResult={queryResult} />
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,12 @@ export default function PageGatsbyHome(props: PageProps): ReactElement {
|
|||||||
const { siteTitle, siteTagline } = useSiteMetadata()
|
const { siteTitle, siteTagline } = useSiteMetadata()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout title={siteTitle} description={siteTagline} uri={props.uri}>
|
<Layout
|
||||||
|
title={siteTitle}
|
||||||
|
description={siteTagline}
|
||||||
|
uri={props.uri}
|
||||||
|
headerCenter
|
||||||
|
>
|
||||||
<PageHome />
|
<PageHome />
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user