Refactored.

This commit is contained in:
ThePendulum 2019-05-17 21:59:14 +02:00
parent 665b77fb4e
commit 7825ae2727
4 changed files with 147 additions and 106 deletions

View File

@ -2,15 +2,14 @@
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 (
const Home = ({ releases }) => (
<Layout>
<ul className="scenes">
{this.props.releases.map(release => (
{releases.map(release => (
<li key={release.id} className="scene">
<span
className="scene-banner"
@ -20,18 +19,23 @@ class Home extends React.Component {
href={`/site/${release.site.id}`}
className="scene-site site-link"
title={release.network.name}
>{release.site.name}</a>
>
{release.site.name}
</a>
<a
href={release.url}
target="_blank"
rel="noopener noreferrer"
className="scene-date"
>{moment(release.date).format('YYYY-MM-DD')}</a>
>
{moment(release.date).format('MMM D, YYYY')}
</a>
</span>
<img
src={`/${release.site.id}/${release.id}/0.jpg`}
alt={release.id}
className="scene-thumbnail"
/>
</span>
@ -42,10 +46,13 @@ class Home extends React.Component {
target="_blank"
rel="noopener noreferrer"
className="scene-row scene-link"
><h2 className="scene-title">{release.title}</h2></a>
>
<h2 className="scene-title">{release.title}</h2>
</a>
<span className="scene-row">
<ul className="scene-actors nolist">{release.actors.map(actor =>
<ul className="scene-actors nolist">
{release.actors.map(actor => (
<li
key={actor.id}
className="scene-actor"
@ -53,16 +60,20 @@ class Home extends React.Component {
<a
href={`/actor/${actor.id}`}
className="actor-link"
>{actor.name}</a>
>
{actor.name}
</a>
</li>
)}</ul>
))}
</ul>
</span>
<span
title={release.tags.map(tag => tag.tag).join(', ')}
className="scene-row"
>
<ul className="scene-tags nolist">{release.tags.map(tag =>
<ul className="scene-tags nolist">
{release.tags.map(tag => (
<li
key={tag.tag}
className="scene-tag"
@ -70,17 +81,26 @@ class Home extends React.Component {
<a
href={`/tag/${tag.tag}`}
className="tag-link"
>{tag.tag}</a>
>
{tag.tag}
</a>
</li>
)}</ul>
))}
</ul>
</span>
</div>
</li>
))}
</ul>
</Layout>
);
}
}
);
Home.propTypes = {
releases: PropTypes.arrayOf(PropTypes.object),
};
Home.defaultProps = {
releases: [],
};
module.exports = Home;

View File

@ -1,23 +1,30 @@
'use strict';
const React = require('react');
const PropTypes = require('prop-types');
class Layout extends React.Component {
render() {
return (
const Layout = ({ children }) => (
<html lang="en">
<head>
<title>Traxxx</title>
<title>Porn Radar</title>
<link href="/css/style.css" rel="stylesheet" />
</head>
<body>
{this.props.children}
<header>
<h1>Porn Radar</h1>
</header>
<div className="content">
{children}
</div>
</body>
</html>
);
}
}
);
Layout.propTypes = {
children: PropTypes.node.isRequired,
};
module.exports = Layout;

View File

@ -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",

View File

@ -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;