search results grid & asset tile

src/components/molecules/Asset.module.scss

@@ -0,0 +1,36 @@
+@import '../../styles/variables';
+
+.asset {
+    > a {
+        display: block;
+        padding: $spacer;
+        border: 1px solid $brand-grey-lighter;
+        border-radius: $border-radius;
+        background: $brand-white;
+        color: inherit;
+
+        &:hover,
+        &:focus {
+            color: inherit;
+            border-color: $brand-pink;
+            transform: none;
+        }
+    }
+
+    h1 {
+        font-size: $font-size-large;
+        margin-top: 0;
+    }
+
+    p {
+        margin-bottom: 0;
+        font-size: $font-size-small;
+    }
+}
+
+.assetFooter {
+    border-top: 1px solid $brand-grey-lighter;
+    padding-top: $spacer / 2;
+    margin-top: $spacer / 2;
+    font-size: $font-size-small;
+}

src/components/molecules/Asset.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import styles from './Asset.module.scss'
+
+const AssetLink = ({ asset }: { asset: any }) => {
+    const { metadata } = asset.findServiceByType('Metadata')
+
+    return (
+        <article className={styles.asset}>
+            <Link to={`/asset/${asset.id}`}>
+                <h1>{metadata.base.name}</h1>
+                <p>{metadata.base.description.substring(0, 140)}</p>
+
+                <footer className={styles.assetFooter}>
+                    <div>{metadata.base.category}</div>
+                </footer>
+            </Link>
+        </article>
+    )
+}
+
+export default AssetLink

src/data/form-publish.json

@@ -26,7 +26,6 @@
     "type": {
       "label": "Type",
       "type": "select",
-      "required": true,
       "options": ["Data set", "Algorithm", "Container", "Workflow", "Other"]
     },
     "author": {
@@ -58,7 +57,6 @@
     "categories": {
       "label": "Categories",
       "type": "select",
-      "required": true,
       "options": [
         "Image Recognition",
         "Dataset Of Datasets",

src/routes/Search.module.scss

@@ -0,0 +1,16 @@
+@import '../styles/variables';
+
+.results {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer * 2;
+    max-width: 100%;
+
+    @media (min-width: $break-point--small) {
+        grid-template-columns: 2fr 2fr;
+    }
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: 2fr 2fr 2fr;
+    }
+}

src/routes/Search.tsx

@@ -1,8 +1,9 @@
 import queryString from 'query-string'
 import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
 import Route from '../components/templates/Route'
 import { User } from '../context/User'
+import Asset from '../components/molecules/Asset'
+import styles from './Search.module.scss'
 
 interface SearchState {
     results: any[]
@@ -31,25 +32,21 @@ export default class Search extends Component<SearchProps, SearchState> {
         this.setState({ results: assets })
     }
 
-    private renderAssetBox = (asset: any) => {
-        const { metadata } = asset.findServiceByType('Metadata')
-        return (
-            <Link key={asset.id} to={`/asset/${asset.id}`}>
-                <div>{asset.id}</div>
-                <div>{metadata.base.name}</div>
-                <div>{metadata.base.description}</div>
-            </Link>
+    public renderResults = () =>
+        this.state.results.length ? (
+            <div className={styles.results}>
+                {this.state.results.map(asset => (
+                    <Asset key={asset} asset={asset} />
+                ))}
+            </div>
+        ) : (
+            <div>No data sets yet</div>
         )
-    }
 
     public render() {
         return (
             <Route title="Search Results" wide>
-                {this.state.results.length ? (
-                    this.state.results.map(asset => this.renderAssetBox(asset))
-                ) : (
-                    <div>No data sets yet</div>
-                )}
+                {this.renderResults()}
             </Route>
         )
     }