boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
assets/views/home.jsx
View File

@ -2,85 +2,105 @@
const React = require('react'); const React = require('react');
const moment = require('moment'); const moment = require('moment');
const PropTypes = require('prop-types');
const Layout = require('./layout.jsx'); const Layout = require('./layout.jsx');
class Home extends React.Component { const Home = ({ releases }) => (
render() { <Layout>
return ( <ul className="scenes">
<Layout> {releases.map(release => (
<ul className="scenes"> <li key={release.id} className="scene">
{this.props.releases.map(release => ( <span
<li key={release.id} className="scene"> className="scene-banner"
<span >
className="scene-banner" <span className="scene-details">
<a
href={`/site/${release.site.id}`}
className="scene-site site-link"
title={release.network.name}
> >
<span className="scene-details"> {release.site.name}
<a </a>
href={`/site/${release.site.id}`}
className="scene-site site-link"
title={release.network.name}
>{release.site.name}</a>
<a <a
href={release.url} href={release.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="scene-date" className="scene-date"
>{moment(release.date).format('YYYY-MM-DD')}</a> >
</span> {moment(release.date).format('MMM D, YYYY')}
</a>
</span>
<img <img
src={`/${release.site.id}/${release.id}/0.jpg`} src={`/${release.site.id}/${release.id}/0.jpg`}
className="scene-thumbnail" alt={release.id}
/> className="scene-thumbnail"
</span> />
</span>
<div className="scene-info"> <div className="scene-info">
<a <a
href={`/item/${release.id}`} href={`/item/${release.id}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="scene-row scene-link" 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"> <span className="scene-row">
<ul className="scene-actors nolist">{release.actors.map(actor => <ul className="scene-actors nolist">
<li {release.actors.map(actor => (
key={actor.id} <li
className="scene-actor" key={actor.id}
className="scene-actor"
>
<a
href={`/actor/${actor.id}`}
className="actor-link"
> >
<a {actor.name}
href={`/actor/${actor.id}`} </a>
className="actor-link" </li>
>{actor.name}</a> ))}
</li> </ul>
)}</ul> </span>
</span>
<span <span
title={release.tags.map(tag => tag.tag).join(', ')} title={release.tags.map(tag => tag.tag).join(', ')}
className="scene-row" className="scene-row"
> >
<ul className="scene-tags nolist">{release.tags.map(tag => <ul className="scene-tags nolist">
<li {release.tags.map(tag => (
key={tag.tag} <li
className="scene-tag" key={tag.tag}
className="scene-tag"
>
<a
href={`/tag/${tag.tag}`}
className="tag-link"
> >
<a {tag.tag}
href={`/tag/${tag.tag}`} </a>
className="tag-link" </li>
>{tag.tag}</a> ))}
</li> </ul>
)}</ul> </span>
</span> </div>
</div> </li>
</li> ))}
))} </ul>
</ul> </Layout>
</Layout> );
);
} Home.propTypes = {
} releases: PropTypes.arrayOf(PropTypes.object),
};
Home.defaultProps = {
releases: [],
};
module.exports = Home; module.exports = Home;

37
assets/views/layout.jsx
View File

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

1
package.json
View File

@ -56,6 +56,7 @@
"neo-blessed": "^0.2.0", "neo-blessed": "^0.2.0",
"opn": "^5.4.0", "opn": "^5.4.0",
"pg": "^7.9.0", "pg": "^7.9.0",
"prop-types": "^15.7.2",
"react": "^16.8.6", "react": "^16.8.6",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"sqlite3": "^4.0.6", "sqlite3": "^4.0.6",

57
public/css/style.css
View File

@ -25,12 +25,33 @@ body {
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
padding: 0 0 .5rem 0;; padding: 0 0 .5rem 0;;
border-radius: .25rem;
margin: .5rem; 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 { .scene-banner {
position: relative; 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 { .scene-details {
@ -41,20 +62,21 @@ body {
position: absolute; position: absolute;
} }
.scene-thumbnail { .scene-site,
width: 100%; .scene-date {
height: 200px; color: #fff;
object-fit: cover; background: rgba(0, 0, 0, .5);
background-position: center; font-size: .8rem;
background-size: cover; padding: .25rem;
text-decoration: none;
} }
.scene-row { .scene-site {
display: flex; border-radius: 0 0 .25rem 0;
justify-content: space-between; }
align-items: center;
box-sizing: border-box; .scene-date {
padding: .1rem .5rem; border-radius: 0 0 0 .25rem;
} }
.scene-info { .scene-info {
@ -75,15 +97,6 @@ body {
line-height: 1.5rem; 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 { .scene-network {
color: #555; color: #555;
margin: 0 .25rem 0 0; margin: 0 .25rem 0 0;