1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

latest assets styling

This commit is contained in:
Matthias Kretschmann 2019-05-23 13:19:13 +02:00
parent aaf425477f
commit 3199d89d8d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 177 additions and 89 deletions

View File

@ -1332,6 +1332,15 @@
"integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==",
"dev": true
},
"@sindresorhus/slugify": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-0.9.1.tgz",
"integrity": "sha512-b6heYM9dzZD13t2GOiEQTDE0qX+I1GyOotMwKh9VQqzuNiVdPVT8dM43fe9HNb/3ul+Qwd5oKSEDrDIfhq3bnQ==",
"requires": {
"escape-string-regexp": "^1.0.5",
"lodash.deburr": "^4.1.0"
}
},
"@svgr/babel-plugin-add-jsx-attribute": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@ -10234,6 +10243,11 @@
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
},
"lodash.deburr": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
"integrity": "sha1-3bG7s+8HRYwBd7oH3hRCLLAz/5s="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -14524,11 +14538,6 @@
}
}
},
"slugify": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
"integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw=="
},
"snapdragon": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

View File

@ -15,6 +15,7 @@
"@oceanprotocol/art": "^2.2.0",
"@oceanprotocol/squid": "^0.5.11",
"@oceanprotocol/typographies": "^0.1.0",
"@sindresorhus/slugify": "^0.9.1",
"classnames": "^2.2.6",
"ethereum-blockies": "MyEtherWallet/blockies",
"filesize": "^4.1.2",
@ -34,7 +35,6 @@
"react-popper": "^1.3.3",
"react-router-dom": "^5.0.0",
"react-transition-group": "^4.0.0",
"slugify": "^1.3.4",
"web3": "1.0.0-beta.37"
},
"devDependencies": {

View File

@ -1,6 +1,6 @@
import cx from 'classnames'
import React, { PureComponent, FormEvent, ChangeEvent } from 'react'
import slugify from 'slugify'
import slugify from '@sindresorhus/slugify'
import DatePicker from 'react-datepicker'
import { ReactComponent as SearchIcon } from '../../../img/search.svg'
import Help from './Help'
@ -131,20 +131,14 @@ export default class Input extends PureComponent<InputProps, InputState> {
<div className={styles.radioWrap} key={index}>
<input
className={styles.radio}
id={slugify(option, {
lower: true
})}
id={slugify(option)}
type={type}
name={name}
value={slugify(option, {
lower: true
})}
value={slugify(option)}
/>
<label
className={styles.radioLabel}
htmlFor={slugify(option, {
lower: true
})}
htmlFor={slugify(option)}
>
{option}
</label>

View File

@ -0,0 +1,40 @@
@import '../../styles/variables';
.latestAssetsWrap {
// full width break out of container
margin-right: calc(-50vw + 50%);
}
.latestAssets {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
display: grid;
grid-gap: $spacer;
grid-auto-flow: column;
padding: $spacer / 2 $spacer;
border-left: 1px solid $brand-grey-lighter;
&::-webkit-scrollbar,
&::-moz-scrollbar {
display: none;
}
> article {
min-width: calc(18rem + #{$spacer * 2.3});
}
}
.title {
font-size: $font-size-h3;
margin-top: $spacer * 2;
text-align: center;
margin-bottom: $spacer;
@media (min-width: $break-point--small) {
text-align: left;
margin-bottom: $spacer / 2;
}
}

View File

@ -0,0 +1,77 @@
import React, { PureComponent } from 'react'
import { Logger } from '@oceanprotocol/squid'
import { User } from '../../context'
import Spinner from '../atoms/Spinner'
import Asset from '../molecules/Asset'
import styles from './AssetsLatest.module.scss'
interface AssetsLatestState {
latestAssets?: any[]
isLoadingLatest?: boolean
}
export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
public state = { latestAssets: [], isLoadingLatest: true }
public _isMounted: boolean = false
public componentDidMount() {
this._isMounted = true
this._isMounted && this.getLatestAssets()
}
public componentWillUnmount() {
this._isMounted = false
}
private getLatestAssets = async () => {
const { ocean } = this.context
const searchQuery = {
offset: 15,
page: 1,
query: {
price: [-1, 1]
},
sort: {
created: -1
}
}
try {
const search = await ocean.aquarius.queryMetadata(searchQuery)
this.setState({
latestAssets: search.results,
isLoadingLatest: false
})
} catch (error) {
Logger.error(error.message)
this.setState({ isLoadingLatest: false })
}
}
public render() {
const { latestAssets, isLoadingLatest } = this.state
return (
<>
<h2 className={styles.title}>Latest published assets</h2>
<div className={styles.latestAssetsWrap}>
{isLoadingLatest ? (
<Spinner message="Loading..." />
) : latestAssets && latestAssets.length ? (
<div className={styles.latestAssets}>
{latestAssets.map((asset: any) => (
<Asset key={asset.id} asset={asset} />
))}
</div>
) : (
<div>No data sets found.</div>
)}
</div>
</>
)
}
}
AssetsLatest.contextType = User

View File

@ -0,0 +1,6 @@
[
{
"title": "AI for Good",
"description": "AI for Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The AI for Good Global Summit is THE leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership wutg UN Suster agencies, XPRIZE Foundtation and ACM."
}
]

View File

@ -0,0 +1,21 @@
@import '../styles/variables';
.results {
display: grid;
grid-template-columns: 1fr;
grid-gap: $spacer;
max-width: calc(18rem + #{$spacer * 2});
margin: auto;
margin-top: $spacer * 2;
@media (min-width: $break-point--small) {
margin-left: 0;
margin-right: 0;
max-width: none;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $break-point--medium) {
grid-template-columns: repeat(3, 1fr);
}
}

View File

@ -9,6 +9,9 @@ import Asset from '../components/molecules/Asset'
import Pagination from '../components/molecules/Pagination'
import styles from './Channel.module.scss'
import Content from '../components/atoms/Content'
import channels from '../data/channels.json'
const { title, description } = channels[0]
interface ChannelProps {
location: Location
@ -27,10 +30,6 @@ interface ChannelState {
isLoading: boolean
searchTerm: string
searchCategories: string
channel: {
title: string
description: string
}
}
export default class Channel extends PureComponent<ChannelProps, ChannelState> {
@ -42,12 +41,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
currentPage: 1,
isLoading: true,
searchTerm: '',
searchCategories: '',
channel: {
title: 'AI for Good',
description:
'AI 4 Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The AI for Good Global Summit is THE leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership wutg UN Suster agencies, XPRIZE Foundtation and ACM.'
}
searchCategories: ''
}
public async componentDidMount() {
@ -138,23 +132,11 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
)
public render() {
const { totalResults, totalPages, currentPage, channel } = this.state
const { match } = this.props
const { totalPages, currentPage } = this.state
return (
<Route title={channel.title} wide>
<Route title={title} description={description}>
<Content wide>
<div>{channel.description}</div>
{totalResults > 0 && (
<h2
className={styles.resultsTitle}
dangerouslySetInnerHTML={{
__html: `${totalResults} results for <span>${decodeURIComponent(
'' // this.state.channelName
)}</span>`
}}
/>
)}
{this.renderResults()}
<Pagination

View File

@ -1,5 +1,6 @@
import React, { ChangeEvent, Component, FormEvent } from 'react'
import { Link } from 'react-router-dom'
import slugify from '@sindresorhus/slugify'
import { User } from '../context'
import { Logger } from '@oceanprotocol/squid'
import Spinner from '../components/atoms/Spinner'
@ -15,6 +16,10 @@ import meta from '../data/meta.json'
import formPublish from '../data/form-publish.json'
import { History } from 'history'
import Content from '../components/atoms/Content'
import channels from '../data/channels.json'
import AssetsLatest from '../components/organisms/AssetsLatest'
const { title, description } = channels[0]
interface HomeProps {
history: History
@ -47,7 +52,6 @@ export default class Home extends Component<HomeProps, HomeState> {
public async componentDidMount() {
this.getCategoryAssets()
this.getLatestAssets()
}
private getCategoryAssets = async () => {
@ -77,32 +81,6 @@ export default class Home extends Component<HomeProps, HomeState> {
}
}
private getLatestAssets = async () => {
const { ocean } = this.context
const searchQuery = {
offset: 3,
page: 1,
query: {
price: [-1, 1]
},
sort: {
created: -1
}
}
try {
const search = await ocean.aquarius.queryMetadata(searchQuery)
this.setState({
latestAssets: search.results,
isLoadingLatest: false
})
} catch (error) {
Logger.error(error.message)
this.setState({ isLoadingLatest: false })
}
}
private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
this.setState({
[event.target.name]: event.target.value
@ -115,13 +93,7 @@ export default class Home extends Component<HomeProps, HomeState> {
}
public render() {
const {
categoryAssets,
isLoadingCategory,
latestAssets,
isLoadingLatest,
search
} = this.state
const { categoryAssets, isLoadingCategory, search } = this.state
return (
<Route
@ -149,7 +121,7 @@ export default class Home extends Component<HomeProps, HomeState> {
<Content wide>
<h2 className={styles.title}>
<Link to="/channels/ai-for-good">AI for Good</Link>
<Link to={`/channels/${slugify(title)}`}>{title}</Link>
</h2>
<div>
{isLoadingCategory ? (
@ -165,20 +137,7 @@ export default class Home extends Component<HomeProps, HomeState> {
)}
</div>
<h2 className={styles.title}>Latest published assets</h2>
<div>
{isLoadingLatest ? (
<Spinner message="Loading..." />
) : latestAssets && latestAssets.length ? (
<div className={styles.results}>
{latestAssets.map((asset: any) => (
<Asset key={asset.id} asset={asset} />
))}
</div>
) : (
<div>No data sets found.</div>
)}
</div>
<AssetsLatest />
</Content>
<Content>