diff --git a/assets/views/home.jsx b/assets/views/home.jsx
index 5dc00708..779857be 100644
--- a/assets/views/home.jsx
+++ b/assets/views/home.jsx
@@ -2,85 +2,105 @@
const React = require('react');
const moment = require('moment');
+const PropTypes = require('prop-types');
const Layout = require('./layout.jsx');
-class Home extends React.Component {
- render() {
- return (
-
-
- {this.props.releases.map(release => (
- -
- (
+
+
+
+
-
-
{release.title}
+
+
+ {release.title}
+
-
- {release.actors.map(actor =>
- -
+
-
+ {actor.name}
+
+
+ ))}
+
+
-
tag.tag).join(', ')}
- className="scene-row"
- >
- {release.tags.map(tag =>
- - tag.tag).join(', ')}
+ className="scene-row"
+ >
+
+ {release.tags.map(tag => (
+ -
+
- {tag.tag}
-
- )}
-
-
-
- ))}
-
-
- );
- }
-}
+ {tag.tag}
+
+
+ ))}
+
+
+
+
+ ))}
+
+
+);
+
+Home.propTypes = {
+ releases: PropTypes.arrayOf(PropTypes.object),
+};
+
+Home.defaultProps = {
+ releases: [],
+};
module.exports = Home;
diff --git a/assets/views/layout.jsx b/assets/views/layout.jsx
index 6d4e1211..8c8cf07a 100644
--- a/assets/views/layout.jsx
+++ b/assets/views/layout.jsx
@@ -1,23 +1,30 @@
'use strict';
const React = require('react');
+const PropTypes = require('prop-types');
-class Layout extends React.Component {
- render() {
- return (
-
-
- Traxxx
+const Layout = ({ children }) => (
+
+
+ Porn Radar
-
-
+
+
-
- {this.props.children}
-
-
- );
- }
-}
+
+
+
+
+ {children}
+
+
+
+);
+
+Layout.propTypes = {
+ children: PropTypes.node.isRequired,
+};
module.exports = Layout;
diff --git a/package.json b/package.json
index ce82dce6..89a2f515 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
"neo-blessed": "^0.2.0",
"opn": "^5.4.0",
"pg": "^7.9.0",
+ "prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"sqlite3": "^4.0.6",
diff --git a/public/css/style.css b/public/css/style.css
index 65cf2642..321e2bbd 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -25,12 +25,33 @@ body {
flex-direction: column;
box-sizing: border-box;
padding: 0 0 .5rem 0;;
+ border-radius: .25rem;
margin: .5rem;
- box-shadow: 0 0 3px rgba(0, 0, 0, .5);
+ overflow: hidden;
+ box-shadow: 0 0 3px rgba(0, 0, 0, .25);
}
.scene-banner {
position: relative;
+ margin: 0 0 .5rem 0;
+}
+
+.scene-thumbnail {
+ width: 100%;
+ height: 200px;
+ display: block;
+ background-position: center;
+ background-size: cover;
+ object-fit: cover;
+}
+
+.scene-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 0 .5rem;
+ margin: 0 0 .25rem 0;
}
.scene-details {
@@ -41,20 +62,21 @@ body {
position: absolute;
}
-.scene-thumbnail {
- width: 100%;
- height: 200px;
- object-fit: cover;
- background-position: center;
- background-size: cover;
+.scene-site,
+.scene-date {
+ color: #fff;
+ background: rgba(0, 0, 0, .5);
+ font-size: .8rem;
+ padding: .25rem;
+ text-decoration: none;
}
-.scene-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
- box-sizing: border-box;
- padding: .1rem .5rem;
+.scene-site {
+ border-radius: 0 0 .25rem 0;
+}
+
+.scene-date {
+ border-radius: 0 0 0 .25rem;
}
.scene-info {
@@ -75,15 +97,6 @@ body {
line-height: 1.5rem;
}
-.scene-site,
-.scene-date {
- color: #fff;
- background: rgba(0, 0, 0, .5);
- font-size: .8rem;
- padding: .25rem;
- text-decoration: none;
-}
-
.scene-network {
color: #555;
margin: 0 .25rem 0 0;