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

outpout category image on Asset page, refactor Asset components

This commit is contained in:
Matthias Kretschmann 2019-05-23 18:18:51 +02:00
parent 1b7d343984
commit c11fceaf17
Signed by: m
GPG Key ID: 606EEEF3C479A91F
54 changed files with 65 additions and 35 deletions

View File

@ -3,7 +3,6 @@ import { Route, Switch } from 'react-router-dom'
import withTracker from './hoc/withTracker' import withTracker from './hoc/withTracker'
import About from './routes/About' import About from './routes/About'
import Details from './routes/Details/'
import Home from './routes/Home' import Home from './routes/Home'
import NotFound from './routes/NotFound' import NotFound from './routes/NotFound'
import Publish from './routes/Publish/' import Publish from './routes/Publish/'
@ -13,6 +12,7 @@ import History from './routes/History'
import Channels from './routes/Channels' import Channels from './routes/Channels'
import Styleguide from './routes/Styleguide' import Styleguide from './routes/Styleguide'
import Asset from './components/templates/Asset'
import Channel from './components/templates/Channel' import Channel from './components/templates/Channel'
const Routes = () => ( const Routes = () => (
@ -22,7 +22,7 @@ const Routes = () => (
<Route component={withTracker(About)} path="/about" /> <Route component={withTracker(About)} path="/about" />
<Route component={withTracker(Publish)} path="/publish" /> <Route component={withTracker(Publish)} path="/publish" />
<Route component={withTracker(Search)} path="/search" /> <Route component={withTracker(Search)} path="/search" />
<Route component={withTracker(Details)} path="/asset/:did" /> <Route component={withTracker(Asset)} path="/asset/:did" />
<Route component={withTracker(Faucet)} path="/faucet" /> <Route component={withTracker(Faucet)} path="/faucet" />
<Route component={withTracker(History)} path="/history" /> <Route component={withTracker(History)} path="/history" />
<Route component={withTracker(Channels)} exact path="/channels" /> <Route component={withTracker(Channels)} exact path="/channels" />

View File

@ -11,3 +11,10 @@
opacity: .8; opacity: .8;
transition: .2s ease-out; transition: .2s ease-out;
} }
.header {
composes: categoryImage;
height: 8rem;
margin-top: $spacer;
opacity: .5;
}

View File

@ -138,13 +138,18 @@ const categoryImageFile = (category: string) => {
} }
} }
export default class CategoryImage extends PureComponent<{ category: string }> { export default class CategoryImage extends PureComponent<{
category: string
header?: boolean
}> {
public render() { public render() {
const image = categoryImageFile(this.props.category) const image = categoryImageFile(this.props.category)
return ( return (
<div <div
className={styles.categoryImage} className={
this.props.header ? styles.header : styles.categoryImage
}
style={{ style={{
backgroundImage: `url(${image})` backgroundImage: `url(${image})`
}} }}

View File

@ -3,10 +3,10 @@ import { Link } from 'react-router-dom'
import moment from 'moment' import moment from 'moment'
import Dotdotdot from 'react-dotdotdot' import Dotdotdot from 'react-dotdotdot'
import cx from 'classnames' import cx from 'classnames'
import styles from './Asset.module.scss' import styles from './AssetTeaser.module.scss'
import CategoryImage from '../atoms/CategoryImage' import CategoryImage from '../atoms/CategoryImage'
const Asset = ({ const AssetTeaser = ({
asset, asset,
list, list,
minimal minimal
@ -55,4 +55,4 @@ const Asset = ({
) )
} }
export default Asset export default AssetTeaser

View File

@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
import { Logger } from '@oceanprotocol/squid' import { Logger } from '@oceanprotocol/squid'
import { User } from '../../context' import { User } from '../../context'
import Spinner from '../atoms/Spinner' import Spinner from '../atoms/Spinner'
import Asset from '../molecules/Asset' import AssetTeaser from '../molecules/AssetTeaser'
import styles from './AssetsLatest.module.scss' import styles from './AssetsLatest.module.scss'
interface AssetsLatestState { interface AssetsLatestState {
@ -62,7 +62,11 @@ export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
) : latestAssets && latestAssets.length ? ( ) : latestAssets && latestAssets.length ? (
<div className={styles.latestAssets}> <div className={styles.latestAssets}>
{latestAssets.map((asset: any) => ( {latestAssets.map((asset: any) => (
<Asset key={asset.id} asset={asset} minimal /> <AssetTeaser
key={asset.id}
asset={asset}
minimal
/>
))} ))}
</div> </div>
) : ( ) : (

View File

@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
import { Logger } from '@oceanprotocol/squid' import { Logger } from '@oceanprotocol/squid'
import { User } from '../../context' import { User } from '../../context'
import Spinner from '../atoms/Spinner' import Spinner from '../atoms/Spinner'
import Asset from '../molecules/Asset' import AssetTeaser from '../molecules/AssetTeaser'
import styles from './AssetsUser.module.scss' import styles from './AssetsUser.module.scss'
export default class AssetsUser extends PureComponent< export default class AssetsUser extends PureComponent<
@ -82,7 +82,7 @@ export default class AssetsUser extends PureComponent<
) )
.filter(asset => !!asset) .filter(asset => !!asset)
.map((asset: any) => ( .map((asset: any) => (
<Asset <AssetTeaser
list={this.props.list} list={this.props.list}
key={asset.id} key={asset.id}
asset={asset} asset={asset}

View File

@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
import { User } from '../../context' import { User } from '../../context'
import { Logger } from '@oceanprotocol/squid' import { Logger } from '@oceanprotocol/squid'
import Spinner from '../atoms/Spinner' import Spinner from '../atoms/Spinner'
import Asset from '../molecules/Asset' import AssetTeaser from '../molecules/AssetTeaser'
import styles from './ChannelTeaser.module.scss' import styles from './ChannelTeaser.module.scss'
import channels from '../../data/channels.json' import channels from '../../data/channels.json'
@ -85,7 +85,7 @@ export default class ChannelTeaser extends Component<
) : channelAssets && channelAssets.length ? ( ) : channelAssets && channelAssets.length ? (
<div className={styles.channelResults}> <div className={styles.channelResults}>
{channelAssets.map((asset: any) => ( {channelAssets.map((asset: any) => (
<Asset key={asset.id} asset={asset} /> <AssetTeaser key={asset.id} asset={asset} />
))} ))}
</div> </div>
) : ( ) : (

View File

@ -1,4 +1,4 @@
@import '../../styles/variables'; @import '../../../styles/variables';
.metaPrimary { .metaPrimary {
margin-bottom: $spacer; margin-bottom: $spacer;

View File

@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import Moment from 'react-moment' import Moment from 'react-moment'
import { DDO, MetaData, File } from '@oceanprotocol/squid' import { DDO, MetaData, File } from '@oceanprotocol/squid'
import Markdown from '../../components/atoms/Markdown' import Markdown from '../../atoms/Markdown'
import styles from './AssetDetails.module.scss' import styles from './AssetDetails.module.scss'
import AssetFilesDetails from './AssetFilesDetails' import AssetFilesDetails from './AssetFilesDetails'

View File

@ -1,4 +1,4 @@
@import '../../styles/variables'; @import '../../../styles/variables';
.buttonMain { .buttonMain {
margin: auto; margin: auto;

View File

@ -5,7 +5,7 @@ import { render, fireEvent } from 'react-testing-library'
import { DDO } from '@oceanprotocol/squid' import { DDO } from '@oceanprotocol/squid'
import { StateMock } from '@react-mock/state' import { StateMock } from '@react-mock/state'
import ReactGA from 'react-ga' import ReactGA from 'react-ga'
import { User } from '../../context' import { User } from '../../../context'
import AssetFile, { messages } from './AssetFile' import AssetFile, { messages } from './AssetFile'
const file = { const file = {

View File

@ -1,9 +1,9 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import { Logger, DDO, File } from '@oceanprotocol/squid' import { Logger, DDO, File } from '@oceanprotocol/squid'
import filesize from 'filesize' import filesize from 'filesize'
import Button from '../../components/atoms/Button' import Button from '../../atoms/Button'
import Spinner from '../../components/atoms/Spinner' import Spinner from '../../atoms/Spinner'
import { User } from '../../context' import { User } from '../../../context'
import styles from './AssetFile.module.scss' import styles from './AssetFile.module.scss'
import ReactGA from 'react-ga' import ReactGA from 'react-ga'

View File

@ -1,4 +1,4 @@
@import '../../styles/variables'; @import '../../../styles/variables';
.files { .files {
text-align: center; text-align: center;

View File

@ -4,8 +4,8 @@ import React from 'react'
import { render } from 'react-testing-library' import { render } from 'react-testing-library'
import { DDO } from '@oceanprotocol/squid' import { DDO } from '@oceanprotocol/squid'
import AssetFilesDetails from './AssetFilesDetails' import AssetFilesDetails from './AssetFilesDetails'
import { User } from '../../context' import { User } from '../../../context'
import { userMockConnected } from '../../../__mocks__/user-mock' import { userMockConnected } from '../../../../__mocks__/user-mock'
describe('AssetFilesDetails', () => { describe('AssetFilesDetails', () => {
it('renders without crashing', () => { it('renders without crashing', () => {

View File

@ -1,8 +1,8 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import { DDO, File } from '@oceanprotocol/squid' import { DDO, File } from '@oceanprotocol/squid'
import AssetFile from './AssetFile' import AssetFile from './AssetFile'
import { User } from '../../context' import { User } from '../../../context'
import Web3message from '../../components/organisms/Web3message' import Web3message from '../../organisms/Web3message'
import styles from './AssetFilesDetails.module.scss' import styles from './AssetFilesDetails.module.scss'
export default class AssetFilesDetails extends PureComponent<{ export default class AssetFilesDetails extends PureComponent<{

View File

@ -1,11 +1,12 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { DDO, MetaData, Logger } from '@oceanprotocol/squid' import { DDO, MetaData, Logger } from '@oceanprotocol/squid'
import Route from '../../components/templates/Route' import Route from '../Route'
import Spinner from '../../components/atoms/Spinner' import Spinner from '../../atoms/Spinner'
import { User } from '../../context' import { User } from '../../../context'
import AssetDetails from './AssetDetails' import AssetDetails from './AssetDetails'
import stylesApp from '../../App.module.scss' import stylesApp from '../../../App.module.scss'
import Content from '../../components/atoms/Content' import Content from '../../atoms/Content'
import CategoryImage from '../../atoms/CategoryImage'
interface DetailsProps { interface DetailsProps {
location: Location location: Location
@ -46,7 +47,17 @@ export default class Details extends Component<DetailsProps, DetailsState> {
const { metadata, ddo } = this.state const { metadata, ddo } = this.state
return metadata.base.name !== '' ? ( return metadata.base.name !== '' ? (
<Route title={metadata.base.name}> <Route
title={metadata.base.name}
image={
metadata.base.categories && (
<CategoryImage
header
category={metadata.base.categories[0]}
/>
)
}
>
<Content> <Content>
<AssetDetails metadata={metadata} ddo={ddo} /> <AssetDetails metadata={metadata} ddo={ddo} />
</Content> </Content>

View File

@ -4,7 +4,7 @@ import { History } from 'history'
import Spinner from '../../components/atoms/Spinner' import Spinner from '../../components/atoms/Spinner'
import Route from '../../components/templates/Route' import Route from '../../components/templates/Route'
import { User } from '../../context' import { User } from '../../context'
import Asset from '../../components/molecules/Asset' import AssetTeaser from '../molecules/AssetTeaser'
import Pagination from '../../components/molecules/Pagination' import Pagination from '../../components/molecules/Pagination'
import styles from './Channel.module.scss' import styles from './Channel.module.scss'
import Content from '../../components/atoms/Content' import Content from '../../components/atoms/Content'
@ -101,7 +101,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
) : this.state.results && this.state.results.length ? ( ) : this.state.results && this.state.results.length ? (
<div className={styles.results}> <div className={styles.results}>
{this.state.results.map((asset: any) => ( {this.state.results.map((asset: any) => (
<Asset key={asset.id} asset={asset} /> <AssetTeaser key={asset.id} asset={asset} />
))} ))}
</div> </div>
) : ( ) : (

View File

@ -8,12 +8,14 @@ import Markdown from '../atoms/Markdown'
const Route = ({ const Route = ({
title, title,
description, description,
image,
wide, wide,
children, children,
className className
}: { }: {
title: string title: string
description?: string description?: string
image?: any
children: any children: any
wide?: boolean wide?: boolean
className?: string className?: string
@ -29,6 +31,7 @@ const Route = ({
<header className={styles.header}> <header className={styles.header}>
<Content wide={wide}> <Content wide={wide}>
<h1 className={styles.title}>{title}</h1> <h1 className={styles.title}>{title}</h1>
{image && image}
{description && ( {description && (
<Markdown <Markdown
text={description} text={description}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 217 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 284 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 186 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 279 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 158 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 423 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 227 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 196 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 318 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 182 KiB

View File

@ -5,7 +5,7 @@ import { Logger } from '@oceanprotocol/squid'
import Spinner from '../components/atoms/Spinner' import Spinner from '../components/atoms/Spinner'
import Route from '../components/templates/Route' import Route from '../components/templates/Route'
import { User } from '../context' import { User } from '../context'
import Asset from '../components/molecules/Asset' import AssetTeaser from '../components/molecules/AssetTeaser'
import Pagination from '../components/molecules/Pagination' import Pagination from '../components/molecules/Pagination'
import styles from './Search.module.scss' import styles from './Search.module.scss'
import Content from '../components/atoms/Content' import Content from '../components/atoms/Content'
@ -119,7 +119,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
) : this.state.results && this.state.results.length ? ( ) : this.state.results && this.state.results.length ? (
<div className={styles.results}> <div className={styles.results}>
{this.state.results.map((asset: any) => ( {this.state.results.map((asset: any) => (
<Asset key={asset.id} asset={asset} /> <AssetTeaser key={asset.id} asset={asset} />
))} ))}
</div> </div>
) : ( ) : (