rob
/
torrents.csv
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merging jooolas ui_details branch, making a few fixes to navbar, and other styling.

This commit is contained in:
Dessalines 2018-12-01 15:47:14 -07:00
parent 8341e34337
commit ec53fc7678
8 changed files with 3277 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
server/ui/.gitignore vendored
View File

@ -25,6 +25,5 @@ node_modules
*~ *~
test/data/result.json test/data/result.json
yarn.lock
package-lock.json package-lock.json
*.orig *.orig

8
server/ui/package.json
View File

@ -8,8 +8,12 @@
"build": "node fuse prod" "build": "node fuse prod"
}, },
"keywords": [], "keywords": [],
"author": "Dominic Gannaway", "author": "Dessalines",
"license": "MIT", "license": "GPL-2.0-or-later",
"engines": {
"node": ">=8.9.0"
},
"engineStrict": true,
"dependencies": { "dependencies": {
"classcat": "^1.1.3", "classcat": "^1.1.3",
"inferno": "^6.3.1", "inferno": "^6.3.1",

60
server/ui/src/Main.css
View File

@ -1,37 +1,59 @@
html, /* globally disable dotted outlines on anchors */
body { a:focus {
/* assumes we won't target screens with a width smaller than 320px */ outline: none;
min-width: 320px;
} }
/* globally disable dotted outlines on anchors */ a::-moz-focus-inner {
a:focus { outline: none; } border: 0;
a::-moz-focus-inner { border: 0; } }
.search-name-col { width: 50%; } .search-name-col {
.search-name-cell { word-wrap: break-word; } width: 50%;
}
.table-fixed { table-layout: fixed; } .search-name-cell {
word-wrap: break-word;
}
.table-fixed {
table-layout: fixed;
}
/* add padding to first and last cell */ /* add padding to first and last cell */
.table-padding th:first-child, .table-padding th:first-child, .table-padding td:first-child {
.table-padding td:first-child { padding-left: 1em !important; } padding-left: 1em !important;
.table-padding th:last-child, }
.table-padding td:last-child { padding-right: 1em !important; }
.table-padding th:last-child, .table-padding td:last-child {
padding-right: 1em !important;
}
.table thead th {
border: 0px;
}
.table tr td {
vertical-align: middle !important;
}
/* Colors */ /* Colors */
.navbar-purple { background-color: #673ab7; } .navbar-purple {
.table-hover-purple tbody tr:hover { background-color: rgba(103, 58, 183, 0.2) !important; } background-color: #673ab7;
}
.table-hover-purple tbody tr:hover {
background-color: rgba(103, 58, 183, 0.2) !important;
}
/* Bootstrap fixes */
/* Boostrap fixes */
.rounded-right { .rounded-right {
/* disable radius on left when using on right side */ /* disable radius on left when using on right side */
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.no-outline, .no-outline, .no-outline:focus {
.no-outline:focus {
/* disable colored outline on btn or input */ /* disable colored outline on btn or input */
box-shadow: none !important; box-shadow: none !important;
outline: none !important; outline: none !important;

8
server/ui/src/components/navbar.tsx
View File

@ -29,9 +29,9 @@ export class Navbar extends Component<any, State> {
navbar() { navbar() {
return ( return (
<nav class="navbar navbar-dark navbar-purple p-2 p-sm-1 shadow"> <nav class="navbar navbar-dark navbar-purple p-1 shadow">
<a class="navbar-brand mx-1" href="#"> <a class="navbar-brand mx-1" href="#">
<i class="fas fa-fw fa-database mr-2"></i> <i class="fas fa-fw fa-database mr-1"></i>
Torrents.csv Torrents.csv
</a> </a>
<div class="navbar-nav ml-auto mr-2"> <div class="navbar-nav ml-auto mr-2">
@ -44,12 +44,12 @@ export class Navbar extends Component<any, State> {
searchForm() { searchForm() {
return ( return (
<form class="form-inline col-12 col-sm-8 col-md-9 col-xl-10 mx-0 mx-sm-1 my-1 my-sm-0 p-0" onSubmit={linkEvent(this, this.search)}> <form class="col-12 col-sm-6 m-0 px-1" onSubmit={linkEvent(this, this.search)}>
<div class="input-group w-100"> <div class="input-group w-100">
<input class="form-control border-0 no-outline" type="search" placeholder="Search..." aria-label="Search..." required <input class="form-control border-0 no-outline" type="search" placeholder="Search..." aria-label="Search..." required
value={this.state.searchParams.q} value={this.state.searchParams.q}
onInput={linkEvent(this, this.searchChange)}></input> onInput={linkEvent(this, this.searchChange)}></input>
<button class="btn btn-secondary border-0 rounded-right no-outline" type="submit"> <button class="btn btn-light bg-white border-0 rounded-right no-outline" type="submit">
<i className="fas fa-fw fa-search"></i> <i className="fas fa-fw fa-search"></i>
</button> </button>
</div> </div>

67
server/ui/src/components/search.tsx
View File

@ -68,19 +68,20 @@ export class Search extends Component<any, State> {
fetchData(searchParams: SearchParams): Promise<Results> { fetchData(searchParams: SearchParams): Promise<Results> {
let q = encodeURI(searchParams.q); let q = encodeURI(searchParams.q);
return fetch(`${endpoint}/service/search?q=${q}&page=${searchParams.page}&size=20`) return fetch(`${endpoint}/service/search?q=${q}&page=${searchParams.page}`)
.then(data => data.text()) .then(data => data.text())
.then(csv => convertCsvToJson(csv)); .then(csv => convertCsvToJson(csv));
} }
render() { render() {
return ( return (
<div>{ <div>
{
this.state.searching ? this.state.searching ?
this.spinner() this.spinner() : this.state.results.torrents[0] ?
: this.table() : this.noResults()
this.state.results.torrents[0] ? this.table() : this.noResults() }
}</div> </div>
); );
} }
@ -106,39 +107,39 @@ export class Search extends Component<any, State> {
<table class="table table-fixed table-hover table-sm table-striped table-hover-purple table-padding"> <table class="table table-fixed table-hover table-sm table-striped table-hover-purple table-padding">
<thead> <thead>
<tr> <tr>
<th class="border-0 align-middle search-name-col">Name</th> <th class="search-name-col">Name</th>
<th class="border-0 align-middle text-right">Size</th> <th class="text-right">Size</th>
<th class="border-0 align-middle text-right"><i class="fas fa-fw fa-arrow-up text-success d-inline d-md-none"></i><span class="d-none d-md-inline">Seeds</span></th> <th class="text-right">Seeds</th>
<th class="border-0 align-middle text-right d-none d-md-table-cell">Leeches</th> <th class="text-right d-none d-md-table-cell">Leeches</th>
<th class="border-0 align-middle text-right d-none d-md-table-cell">Created</th> <th class="text-right d-none d-md-table-cell">Created</th>
<th class="border-0"></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{this.state.results.torrents.map(torrent => ( {this.state.results.torrents.map(torrent => (
<tr> <tr>
<td class="align-middle search-name-cell">{torrent.name}</td> <td class="search-name-cell">{torrent.name}</td>
<td class="align-middle text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td> <td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
<td class="align-middle text-right text-success"><i class="fas fa-fw fa-arrow-up d-none d-md-inline mr-1"></i>{torrent.seeders}</td> <td class="text-right text-success"><i class="fas fa-fw fa-arrow-up d-none d-sm-inline mr-1"></i>{torrent.seeders}</td>
<td class="align-middle text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down mr-1"></i>{torrent.leechers}</td> <td class="text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down mr-1"></i>{torrent.leechers}</td>
<td class="align-middle text-right text-muted d-none d-md-table-cell" <td class="text-right text-muted d-none d-md-table-cell"
data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`} data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}
data-balloon-pos="down"> data-balloon-pos="down">
{moment(torrent.created_unix * 1000).fromNow()} {moment(torrent.created_unix * 1000).fromNow()}
</td> </td>
<td class="align-middle text-right"> <td class="text-right">
<a class="btn btn-sm no-outline p-1" <a class="btn btn-sm no-outline p-1"
href={magnetLink(torrent.infohash, torrent.name)} href={magnetLink(torrent.infohash, torrent.name)}
data-balloon="Magnet link" data-balloon="Magnet link"
data-balloon-pos="left"> data-balloon-pos="left">
<i class="fas fa-fw fa-magnet"></i> <i class="fas fa-fw fa-magnet"></i>
</a> </a>
<a class="btn btn-sm no-outline p-1 d-none d-md-inline" <a class="btn btn-sm no-outline p-1 d-none d-sm-inline"
href={`https://gitlab.com/dessalines/torrents.csv/issues/new?issue[title]=Report%20Torrent%20infohash%20${torrent.infohash}`} href={`https://gitlab.com/dessalines/torrents.csv/issues/new?issue[title]=Report%20Torrent%20infohash%20${torrent.infohash}`}
target="_blank" target="_blank"
data-balloon="Report Torrent" data-balloon="Report Torrent"
data-balloon-pos="left"> data-balloon-pos="left">
<i class="fas fa-fw fa-flag"></i> <i class="fas fa-fw fa-flag"></i>
</a> </a>
</td> </td>
</tr> </tr>
@ -157,13 +158,13 @@ export class Search extends Component<any, State> {
<li className={(this.state.searchParams.page == 1) ? "page-item disabled" : "page-item"}> <li className={(this.state.searchParams.page == 1) ? "page-item disabled" : "page-item"}>
<button class="page-link" <button class="page-link"
onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}> onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}>
Previous Previous
</button> </button>
</li> </li>
<li class="page-item"> <li class="page-item">
<button class="page-link" <button class="page-link"
onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}> onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}>
Next Next
</button> </button>
</li> </li>
</ul> </ul>

2
server/ui/src/env.ts
View File

@ -1 +1 @@
export const endpoint = "http://localhost:8080"; export const endpoint = "http://0.0.0.0:8080";

2
server/ui/src/index.tsx
View File

@ -14,7 +14,7 @@ class Index extends Component<any, any> {
return ( return (
<HashRouter> <HashRouter>
<Navbar /> <Navbar />
<div class="container-fluid mt-3 p-0"> <div class="mt-3 p-0">
<Switch> <Switch>
<Route exact path="/" component={Home} /> <Route exact path="/" component={Home} />
<Route path={`/search/:q/:page`} component={Search} /> <Route path={`/search/:q/:page`} component={Search} />

3190
server/ui/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff