mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
asset full view styling
This commit is contained in:
parent
273025d8ef
commit
1d01d0edf2
|
@ -2,7 +2,7 @@ import React from 'react'
|
||||||
import { Route, Switch } from 'react-router-dom'
|
import { Route, Switch } from 'react-router-dom'
|
||||||
|
|
||||||
import About from './routes/About'
|
import About from './routes/About'
|
||||||
import Details from './routes/Details'
|
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/'
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
margin-top: $spacer;
|
margin-top: $spacer;
|
||||||
margin-bottom: $spacer * 2;
|
margin-bottom: $spacer;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -24,12 +24,14 @@ const Route = ({
|
||||||
</Helmet>
|
</Helmet>
|
||||||
|
|
||||||
<Content wide={wide}>
|
<Content wide={wide}>
|
||||||
<header className={styles.header}>
|
<article>
|
||||||
<h1>{title}</h1>
|
<header className={styles.header}>
|
||||||
{description && <p>{description}</p>}
|
<h1>{title}</h1>
|
||||||
</header>
|
{description && <p>{description}</p>}
|
||||||
|
</header>
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
|
</article>
|
||||||
</Content>
|
</Content>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
88
src/routes/Details/AssetDetails.module.scss
Normal file
88
src/routes/Details/AssetDetails.module.scss
Normal file
|
@ -0,0 +1,88 @@
|
||||||
|
@import '../../styles/variables';
|
||||||
|
|
||||||
|
.metaPrimary {
|
||||||
|
margin-bottom: $spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyrightHolder {
|
||||||
|
color: $brand-grey-light;
|
||||||
|
font-size: $font-size-large;
|
||||||
|
border-bottom: 1px solid $brand-grey-lighter;
|
||||||
|
margin-bottom: $spacer / 2;
|
||||||
|
padding-bottom: $spacer / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaPrimaryData {
|
||||||
|
font-size: $font-size-small;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $break-point--small) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
span {
|
||||||
|
flex: 0 0 48%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $break-point--medium) {
|
||||||
|
span {
|
||||||
|
flex: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
border-top: 1px solid $brand-grey-lighter;
|
||||||
|
border-bottom: 1px solid $brand-grey-lighter;
|
||||||
|
padding-top: $spacer;
|
||||||
|
padding-bottom: $spacer;
|
||||||
|
margin-top: $spacer;
|
||||||
|
margin-bottom: $spacer;
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: $spacer;
|
||||||
|
|
||||||
|
@media (min-width: $break-point--small) {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaLabel {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
@media (min-width: $break-point--small) {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaValue {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&,
|
||||||
|
code {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $break-point--small) {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
}
|
82
src/routes/Details/AssetDetails.tsx
Normal file
82
src/routes/Details/AssetDetails.tsx
Normal file
|
@ -0,0 +1,82 @@
|
||||||
|
import React, { PureComponent } from 'react'
|
||||||
|
import Button from '../../components/atoms/Button'
|
||||||
|
import styles from './AssetDetails.module.scss'
|
||||||
|
|
||||||
|
interface AssetDetailsProps {
|
||||||
|
metadata: any
|
||||||
|
ddo: any
|
||||||
|
purchaseAsset: any
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class AssetDetails extends PureComponent<AssetDetailsProps> {
|
||||||
|
public render() {
|
||||||
|
const { metadata, ddo, purchaseAsset } = this.props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<aside className={styles.metaPrimary}>
|
||||||
|
<h2 className={styles.copyrightHolder}>
|
||||||
|
{metadata.base.copyrightHolder}
|
||||||
|
</h2>
|
||||||
|
<div className={styles.metaPrimaryData}>
|
||||||
|
<span>{metadata.base.dateCreated}</span>
|
||||||
|
<span>json</span>
|
||||||
|
<span>18.5 MB</span>
|
||||||
|
{metadata.base.categories && (
|
||||||
|
<span>{metadata.base.categories[0]}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<div>{metadata.base.description}</div>
|
||||||
|
|
||||||
|
<ul className={styles.meta}>
|
||||||
|
<li>
|
||||||
|
<span className={styles.metaLabel}>
|
||||||
|
<strong>Author</strong>
|
||||||
|
</span>
|
||||||
|
<span className={styles.metaValue}>
|
||||||
|
{metadata.base.author}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span className={styles.metaLabel}>
|
||||||
|
<strong>License</strong>
|
||||||
|
</span>
|
||||||
|
<span className={styles.metaValue}>
|
||||||
|
{metadata.base.license}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span className={styles.metaLabel}>
|
||||||
|
<strong>File Encoding</strong>
|
||||||
|
</span>
|
||||||
|
<span className={styles.metaValue}>UTF-8</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span className={styles.metaLabel}>
|
||||||
|
<strong>Compression</strong>
|
||||||
|
</span>
|
||||||
|
<span className={styles.metaValue}>None</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span className={styles.metaLabel}>
|
||||||
|
<strong>DID</strong>
|
||||||
|
</span>
|
||||||
|
<span className={styles.metaValue}>
|
||||||
|
<code>{ddo.id}</code>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<Button onClick={() => purchaseAsset(ddo)}>
|
||||||
|
Purchase asset
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
<code>{JSON.stringify(metadata, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,9 +1,9 @@
|
||||||
import { Logger } from '@oceanprotocol/squid'
|
import { Logger } from '@oceanprotocol/squid'
|
||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
import Route from '../components/templates/Route'
|
import Route from '../../components/templates/Route'
|
||||||
import Button from '../components/atoms/Button'
|
import { User } from '../../context/User'
|
||||||
import { User } from '../context/User'
|
|
||||||
import quertString from 'query-string'
|
import quertString from 'query-string'
|
||||||
|
import AssetDetails from './AssetDetails'
|
||||||
|
|
||||||
interface DetailsState {
|
interface DetailsState {
|
||||||
ddo: any
|
ddo: any
|
||||||
|
@ -16,7 +16,7 @@ interface DetailsProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Details extends Component<DetailsProps, DetailsState> {
|
export default class Details extends Component<DetailsProps, DetailsState> {
|
||||||
public state = { ddo: null, metadata: null }
|
public state = { ddo: {}, metadata: {} }
|
||||||
|
|
||||||
public async componentDidMount() {
|
public async componentDidMount() {
|
||||||
const ddo = await this.context.ocean.resolveDID(
|
const ddo = await this.context.ocean.resolveDID(
|
||||||
|
@ -56,23 +56,18 @@ export default class Details extends Component<DetailsProps, DetailsState> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private showDetails = (ddo: any) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div>{JSON.stringify(this.state.metadata)}</div>
|
|
||||||
|
|
||||||
<Button onClick={() => this.purchaseAsset(ddo)}>
|
|
||||||
Purchase asset
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
|
const { metadata, ddo } = this.state
|
||||||
|
const { base } = metadata
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Route title={'Details'}>
|
<Route title={metadata && base ? base.name : 'Loading Details'}>
|
||||||
{this.state.metadata ? (
|
{metadata ? (
|
||||||
this.showDetails(this.state.ddo)
|
<AssetDetails
|
||||||
|
metadata={metadata}
|
||||||
|
ddo={ddo}
|
||||||
|
purchaseAsset={this.purchaseAsset}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div>Loading</div>
|
<div>Loading</div>
|
||||||
)}
|
)}
|
Loading…
Reference in New Issue
Block a user