Merging jooolas ui_details branch, making a few fixes to navbar, and other styling.
This commit is contained in:
Dessalines
parent
8341e34337
commit
ec53fc7678
|
|
@ -25,6 +25,5 @@ node_modules
|
|||
*~
|
||||
test/data/result.json
|
||||
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
*.orig
|
||||
|
|
|
|||
|
|
@ -8,8 +8,12 @@
|
|||
"build": "node fuse prod"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Dominic Gannaway",
|
||||
"license": "MIT",
|
||||
"author": "Dessalines",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"engines": {
|
||||
"node": ">=8.9.0"
|
||||
},
|
||||
"engineStrict": true,
|
||||
"dependencies": {
|
||||
"classcat": "^1.1.3",
|
||||
"inferno": "^6.3.1",
|
||||
|
|
|
|||
|
|
@ -1,37 +1,59 @@
|
|||
html,
|
||||
body {
|
||||
/* assumes we won't target screens with a width smaller than 320px */
|
||||
min-width: 320px;
|
||||
/* globally disable dotted outlines on anchors */
|
||||
a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* globally disable dotted outlines on anchors */
|
||||
a:focus { outline: none; }
|
||||
a::-moz-focus-inner { border: 0; }
|
||||
a::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.search-name-col { width: 50%; }
|
||||
.search-name-cell { word-wrap: break-word; }
|
||||
.search-name-col {
|
||||
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 */
|
||||
.table-padding th:first-child,
|
||||
.table-padding td:first-child { padding-left: 1em !important; }
|
||||
.table-padding th:last-child,
|
||||
.table-padding td:last-child { padding-right: 1em !important; }
|
||||
.table-padding th:first-child, .table-padding td:first-child {
|
||||
padding-left: 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 */
|
||||
.navbar-purple { background-color: #673ab7; }
|
||||
.table-hover-purple tbody tr:hover { background-color: rgba(103, 58, 183, 0.2) !important; }
|
||||
.navbar-purple {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
|
||||
.table-hover-purple tbody tr:hover {
|
||||
background-color: rgba(103, 58, 183, 0.2) !important;
|
||||
}
|
||||
|
||||
/* Bootstrap fixes */
|
||||
|
||||
/* Boostrap fixes */
|
||||
.rounded-right {
|
||||
/* disable radius on left when using on right side */
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.no-outline,
|
||||
.no-outline:focus {
|
||||
.no-outline, .no-outline:focus {
|
||||
/* disable colored outline on btn or input */
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@ export class Navbar extends Component<any, State> {
|
|||
|
||||
navbar() {
|
||||
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="#">
|
||||
<i class="fas fa-fw fa-database mr-2"></i>
|
||||
<i class="fas fa-fw fa-database mr-1"></i>
|
||||
Torrents.csv
|
||||
</a>
|
||||
<div class="navbar-nav ml-auto mr-2">
|
||||
|
|
@ -44,12 +44,12 @@ export class Navbar extends Component<any, State> {
|
|||
|
||||
searchForm() {
|
||||
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">
|
||||
<input class="form-control border-0 no-outline" type="search" placeholder="Search..." aria-label="Search..." required
|
||||
value={this.state.searchParams.q}
|
||||
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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -68,19 +68,20 @@ export class Search extends Component<any, State> {
|
|||
|
||||
fetchData(searchParams: SearchParams): Promise<Results> {
|
||||
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(csv => convertCsvToJson(csv));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>{
|
||||
<div>
|
||||
{
|
||||
this.state.searching ?
|
||||
this.spinner()
|
||||
:
|
||||
this.state.results.torrents[0] ? this.table() : this.noResults()
|
||||
}</div>
|
||||
this.spinner() : this.state.results.torrents[0] ?
|
||||
this.table() : this.noResults()
|
||||
}
|
||||
</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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="border-0 align-middle search-name-col">Name</th>
|
||||
<th class="border-0 align-middle 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="border-0 align-middle 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="border-0"></th>
|
||||
<th class="search-name-col">Name</th>
|
||||
<th class="text-right">Size</th>
|
||||
<th class="text-right">Seeds</th>
|
||||
<th class="text-right d-none d-md-table-cell">Leeches</th>
|
||||
<th class="text-right d-none d-md-table-cell">Created</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.state.results.torrents.map(torrent => (
|
||||
<tr>
|
||||
<td class="align-middle search-name-cell">{torrent.name}</td>
|
||||
<td class="align-middle 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="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="align-middle text-right text-muted d-none d-md-table-cell"
|
||||
data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}
|
||||
data-balloon-pos="down">
|
||||
{moment(torrent.created_unix * 1000).fromNow()}
|
||||
<td class="search-name-cell">{torrent.name}</td>
|
||||
<td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</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="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-muted d-none d-md-table-cell"
|
||||
data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}
|
||||
data-balloon-pos="down">
|
||||
{moment(torrent.created_unix * 1000).fromNow()}
|
||||
</td>
|
||||
<td class="align-middle text-right">
|
||||
<td class="text-right">
|
||||
<a class="btn btn-sm no-outline p-1"
|
||||
href={magnetLink(torrent.infohash, torrent.name)}
|
||||
data-balloon="Magnet link"
|
||||
data-balloon-pos="left">
|
||||
<i class="fas fa-fw fa-magnet"></i>
|
||||
href={magnetLink(torrent.infohash, torrent.name)}
|
||||
data-balloon="Magnet link"
|
||||
data-balloon-pos="left">
|
||||
<i class="fas fa-fw fa-magnet"></i>
|
||||
</a>
|
||||
<a class="btn btn-sm no-outline p-1 d-none d-md-inline"
|
||||
href={`https://gitlab.com/dessalines/torrents.csv/issues/new?issue[title]=Report%20Torrent%20infohash%20${torrent.infohash}`}
|
||||
target="_blank"
|
||||
data-balloon="Report Torrent"
|
||||
data-balloon-pos="left">
|
||||
<i class="fas fa-fw fa-flag"></i>
|
||||
<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}`}
|
||||
target="_blank"
|
||||
data-balloon="Report Torrent"
|
||||
data-balloon-pos="left">
|
||||
<i class="fas fa-fw fa-flag"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -157,13 +158,13 @@ export class Search extends Component<any, State> {
|
|||
<li className={(this.state.searchParams.page == 1) ? "page-item disabled" : "page-item"}>
|
||||
<button class="page-link"
|
||||
onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}>
|
||||
Previous
|
||||
Previous
|
||||
</button>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<button class="page-link"
|
||||
onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}>
|
||||
Next
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export const endpoint = "http://localhost:8080";
|
||||
export const endpoint = "http://0.0.0.0:8080";
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ class Index extends Component<any, any> {
|
|||
return (
|
||||
<HashRouter>
|
||||
<Navbar />
|
||||
<div class="container-fluid mt-3 p-0">
|
||||
<div class="mt-3 p-0">
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path={`/search/:q/:page`} component={Search} />
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue