asset full view styling

src/Routes.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 
 import About from './routes/About'
-import Details from './routes/Details'
+import Details from './routes/Details/'
 import Home from './routes/Home'
 import NotFound from './routes/NotFound'
 import Publish from './routes/Publish/'

src/components/templates/Route.module.scss

@@ -2,7 +2,7 @@
 
 .header {
     margin-top: $spacer;
-    margin-bottom: $spacer * 2;
+    margin-bottom: $spacer;
 
     h1 {
         margin: 0;

src/components/templates/Route.tsx

@@ -24,12 +24,14 @@ const Route = ({
         </Helmet>
 
         <Content wide={wide}>
-            <header className={styles.header}>
-                <h1>{title}</h1>
-                {description && <p>{description}</p>}
-            </header>
+            <article>
+                <header className={styles.header}>
+                    <h1>{title}</h1>
+                    {description && <p>{description}</p>}
+                </header>
 
-            {children}
+                {children}
+            </article>
         </Content>
     </div>
 )

src/routes/Details/AssetDetails.module.scss

@@ -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%;
+    }
+}

src/routes/Details/AssetDetails.tsx

@@ -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>
+            </>
+        )
+    }
+}

src/routes/Details/index.tsx

@@ -1,9 +1,9 @@
 import { Logger } from '@oceanprotocol/squid'
 import React, { Component } from 'react'
-import Route from '../components/templates/Route'
-import Button from '../components/atoms/Button'
-import { User } from '../context/User'
+import Route from '../../components/templates/Route'
+import { User } from '../../context/User'
 import quertString from 'query-string'
+import AssetDetails from './AssetDetails'
 
 interface DetailsState {
     ddo: any
@@ -16,7 +16,7 @@ interface DetailsProps {
 }
 
 export default class Details extends Component<DetailsProps, DetailsState> {
-    public state = { ddo: null, metadata: null }
+    public state = { ddo: {}, metadata: {} }
 
     public async componentDidMount() {
         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() {
+        const { metadata, ddo } = this.state
+        const { base } = metadata
+
         return (
-            <Route title={'Details'}>
-                {this.state.metadata ? (
-                    this.showDetails(this.state.ddo)
+            <Route title={metadata && base ? base.name : 'Loading Details'}>
+                {metadata ? (
+                    <AssetDetails
+                        metadata={metadata}
+                        ddo={ddo}
+                        purchaseAsset={this.purchaseAsset}
+                    />
                 ) : (
                     <div>Loading</div>
                 )}