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

Fixes and enhancements 

- Moved main container to app root
- Add responsivness for the search bar
- Some text transformation (justify)
- Restore rounded buttons
- Some other small changes...
This commit is contained in:
jo 2018-12-01 20:11:00 +01:00
parent f5b05c3dc6
commit b77d090960
6 changed files with 70 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,38 @@
.table-fixed {
table-layout: fixed;
html,
body {
/* assumes we won't target screens with a width smaller than 320px */
min-width: 320px;
}
.search-name-col {
width: 50%;
}
/* globally disable dotted outlines on anchors */
a:focus { outline: none; }
a::-moz-focus-inner { border: 0; }
.search-name-cell {
word-wrap: break-word;
}
.search-name-col { width: 50%; }
.search-name-cell { word-wrap: break-word; }
.navbar-purple {
background-color: #673ab7;
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
.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; }
/* Colors */
.navbar-purple { background-color: #673ab7; }
.table-hover-purple tbody tr:hover { background-color: rgba(103, 58, 183, 0.2) !important; }
/* 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 {
/* disable colored outline on btn or input */
box-shadow: none !important;
outline: none !important;
}

6
server/ui/src/components/home.tsx
View File

@ -13,14 +13,12 @@ export class Home extends Component<any, any> {
onboard() {
return (
<div>
<br />
<p class="text-justify">
<a href={repoUrl}>Torrents.csv</a> is a <i>collaborative</i> git repository of torrents, consisting of a single, searchable <code>torrents.csv</code> file. Its initially populated with a January 2017 backup of the pirate bay, and new torrents are periodically added from various torrents sites. It comes with a self-hostable webserver, a command line search, and a folder scanner to add torrents.<br /><br />
<a href={repoUrl}>Torrents.csv</a> will only store torrents with at least one seeder to keep the file small, will be periodically purged of non-seeded torrents, and sorted by seeders descending.<br /><br />
To request more torrents, or add your own, go <a href={repoUrl}>here</a>.<br /><br />
Made with <a href="https://www.rust-lang.org">Rust</a>, <a href="https://github.com/BurntSushi/ripgrep">ripgrep</a>, <a href="https://actix.rs/">Actix</a>, <a href="https://www.infernojs.org">Inferno</a>, and <a href="https://www.typescriptlang.org/">Typescript</a>.
</div>
</p>
);
}

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

@ -23,35 +23,33 @@ export class Navbar extends Component<any, State> {
render() {
return (
<div>{this.navbar()}</div>
<div class="sticky-top">{this.navbar()}</div>
)
}
navbar() {
return (
<nav class="navbar navbar-dark navbar-purple py-1 mb-3">
<nav class="navbar navbar-dark navbar-purple p-2 p-sm-1 shadow">
<a class="navbar-brand mx-1" href="#">
<i class="fas fa-fw fa-database mr-1"></i>
<i class="fas fa-fw fa-database mr-2"></i>
Torrents.csv
</a>
<div class="navbar-nav ml-auto mr-2">
<a class="nav-item nav-link" href={repoUrl}><i class="fab fa-fw fa-github"></i></a>
</div>
{this.searchForm()}
<ul class="navbar-nav mx-1">
<li class="nav-item">
<a class="nav-link" href={repoUrl}><i class="fab fa-fw fa-github"></i></a>
</li>
</ul>
</nav>
);
}
searchForm() {
return (
<form class="form-inline col-7 col-sm-8 col-xl-10 mx-1 my-0" onSubmit={linkEvent(this, this.search)}>
<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)}>
<div class="input-group w-100">
<input class="form-control border-0 rounded-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}
onInput={linkEvent(this, this.searchChange)}></input>
<button class="btn btn-secondary border-0 rounded-0 no-outline" type="submit">
<button class="btn btn-secondary border-0 rounded-right no-outline" type="submit">
<i className="fas fa-fw fa-search"></i>
</button>
</div>

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

@ -68,22 +68,19 @@ export class Search extends Component<any, State> {
fetchData(searchParams: SearchParams): Promise<Results> {
let q = encodeURI(searchParams.q);
// Ability to have more rows per page ?
return fetch(`${endpoint}/service/search?q=${q}&page=${searchParams.page}`)
return fetch(`${endpoint}/service/search?q=${q}&page=${searchParams.page}&size=20`)
.then(data => data.text())
.then(csv => convertCsvToJson(csv));
}
render() {
return (
<div className="container-fluid">
{
<div>{
this.state.searching ?
this.spinner()
:
this.state.results.torrents[0] ? this.table() : this.noResults()
}
</div>
}</div>
);
}
@ -106,34 +103,41 @@ export class Search extends Component<any, State> {
table() {
return (
<div>
<table class="table table-fixed table-sm table-hover border">
<table class="table table-fixed table-hover table-sm table-striped table-hover-purple table-padding">
<thead>
<tr>
<th class="align-middle search-name-col">Name</th>
<th class="align-middle text-right">Size</th>
<th class="align-middle text-right">Seeds</th>
<th class="align-middle text-right d-none d-md-table-cell">Leeches</th>
<th class="align-middle text-right d-none d-md-table-cell">Created</th>
<th></th>
<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>
</tr>
</thead>
<tbody>
{this.state.results.torrents.map(torrent => (
<tr class="clickable-row">
<td class="align-middle search-name-cell"><pre class="mx-1 my-0 text-truncate">{torrent.name}</pre></td>
<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"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
<td class="align-middle text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</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>
<td class="text-right">
<a data-balloon="Magnet link" data-balloon-pos="left" class="btn btn-sm" href={magnetLink(torrent.infohash, torrent.name)}>
<td class="align-middle text-center">
<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>
</a>
<a data-balloon="Report Torrent" data-balloon-pos="left" class="btn btn-sm d-none d-md-inline" href={`https://gitlab.com/dessalines/torrents.csv/issues/new?issue[assignee_id]=&issue[milestone_id]=&issue[title]=Report%20Torrent%20infohash%20${torrent.infohash}`}>
<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>
</td>
@ -151,13 +155,13 @@ export class Search extends Component<any, State> {
<nav>
<ul class="pagination justify-content-center">
<li className={(this.state.searchParams.page == 1) ? "page-item disabled" : "page-item"}>
<button class="page-link rounded-0"
<button class="page-link"
onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}>
Previous
</button>
</li>
<li class="page-item">
<button class="page-link rounded-0"
<button class="page-link"
onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}>
Next
</button>

6
server/ui/src/index.html
View File

@ -8,10 +8,8 @@
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<title>Torrents.csv</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
</head>

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

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