Using grid layout with thumbnails.

assets/views/home.jsx

@@ -3,32 +3,88 @@
 const React = require('react');
 const moment = require('moment');
 
+const Layout = require('./layout.jsx');
+
 class Home extends React.Component {
     render() {
         return (
-            <table>
-                <tr>
-                    <th>Date</th>
-                    <th>ID</th>
-                    <th>Shoot ID / Entry ID</th>
-                    <th>Site</th>
-                    <th>Title</th>
-                    <th>Actors</th>
-                    <th>Tags</th>
-                </tr>
+            <Layout>
+                <ul className="scenes">
+                    {this.props.releases.map(release => (
+                        <li key={release.id} className="scene">
+                            <a
+                                href={`/item/${release.id}`}
+                                target="_blank"
+                            >
+                                <img
+                                    src={`/${release.site.id}/${release.id}/0.jpg`}
+                                    className="scene-thumbnail"
+                                />
+                            </a>
 
-                {this.props.releases.map(release => (
-                    <tr key={release.id}>
-                        <td>{ moment(release.date).format('YYYY-MM-DD') }</td>
-                        <td>{ release.id }</td>
-                        <td>{ release.shootId || release.entryId }</td>
-                        <td>{ release.site.name }</td>
-                        <td>{ release.title }</td>
-                        <td>{ release.actors.map(actor => actor.name).join(', ') }</td>
-                        <td>{ release.tags.map(tag => tag.tag).join(', ') }</td>
-                    </tr>
-                ))}
-            </table>
+                            <div className="scene-info">
+                                <a
+                                    href={`/item/${release.id}`}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="scene-row scene-link"
+                                ><h2 className="scene-title">{release.title}</h2></a>
+
+                                <span className="scene-row">
+                                    <a
+                                        href={`/site/${release.site.id}`}
+                                        className="scene-site site-link"
+                                    >{release.site.name}</a>
+
+                                    <span>
+                                        <a
+                                            className="scene-network"
+                                            href={`/network/${release.network.id}`}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                        >{release.network.name}</a>
+
+                                        <a
+                                            href={release.url}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="scene-date"
+                                        >{moment(release.date).format('YYYY-MM-DD')}</a>
+                                    </span>
+                                </span>
+
+                                <span className="scene-row">
+                                    <ul className="scene-actors nolist">{release.actors.map(actor =>
+                                        <li
+                                            key={actor.id}
+                                            className="scene-actor"
+                                        >
+                                            <a
+                                                href={`/actor/${actor.id}`}
+                                                className="actor-link"
+                                            >{actor.name}</a>
+                                        </li>
+                                    )}</ul>
+                                </span>
+
+                                <span className="scene-row">
+                                    <ul className="scene-tags nolist">{release.tags.map(tag =>
+                                        <li
+                                            key={tag.tag}
+                                            className="scene-tag"
+                                        >
+                                            <a
+                                                href={`/tag/${tag.tag}`}
+                                                className="tag-link"
+                                            >{tag.tag}</a>
+                                        </li>
+                                    )}</ul>
+                                </span>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </Layout>
         );
     }
 }