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 { html,
table-layout: fixed; body {
/* assumes we won't target screens with a width smaller than 320px */
min-width: 320px;
} }
.search-name-col { /* globally disable dotted outlines on anchors */
width: 50%; a:focus { outline: none; }
} a::-moz-focus-inner { border: 0; }
.search-name-cell { .search-name-col { width: 50%; }
word-wrap: break-word; .search-name-cell { word-wrap: break-word; }
}
.navbar-purple { .table-fixed { table-layout: fixed; }
background-color: #673ab7;
-webkit-box-shadow: 0 8px 6px -6px #999; /* add padding to first and last cell */
-moz-box-shadow: 0 8px 6px -6px #999; .table-padding th:first-child,
box-shadow: 0 8px 6px -6px #999; .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,
.no-outline:focus { .no-outline:focus {
/* disable colored outline on btn or input */
box-shadow: none !important; box-shadow: none !important;
outline: 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() { onboard() {
return ( return (
<div> <p class="text-justify">
<br />
<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> 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 /> <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 /> 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>. 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>.
</p>
</div>
); );
} }

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

@ -23,35 +23,33 @@ export class Navbar extends Component<any, State> {
render() { render() {
return ( return (
<div>{this.navbar()}</div> <div class="sticky-top">{this.navbar()}</div>
) )
} }
navbar() { navbar() {
return ( 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="#"> <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 Torrents.csv
</a> </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()} {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> </nav>
); );
} }
searchForm() { searchForm() {
return ( 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"> <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} 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-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> <i className="fas fa-fw fa-search"></i>
</button> </button>
</div> </div>

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

@ -68,22 +68,19 @@ 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);
// Ability to have more rows per page ? 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 className="container-fluid"> <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,35 +103,42 @@ export class Search extends Component<any, State> {
table() { table() {
return ( return (
<div> <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> <thead>
<tr> <tr>
<th class="align-middle search-name-col">Name</th> <th class="border-0 align-middle search-name-col">Name</th>
<th class="align-middle text-right">Size</th> <th class="border-0 align-middle text-right">Size</th>
<th class="align-middle text-right">Seeds</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="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">Leeches</th>
<th class="align-middle text-right d-none d-md-table-cell">Created</th> <th class="border-0 align-middle text-right d-none d-md-table-cell">Created</th>
<th></th> <th class="border-0"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{this.state.results.torrents.map(torrent => ( {this.state.results.torrents.map(torrent => (
<tr class="clickable-row"> <tr>
<td class="align-middle search-name-cell"><pre class="mx-1 my-0 text-truncate">{torrent.name}</pre></td> <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-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-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"></i>{torrent.leechers}</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" <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={`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="text-right"> <td class="align-middle text-center">
<a data-balloon="Magnet link" data-balloon-pos="left" class="btn btn-sm" href={magnetLink(torrent.infohash, torrent.name)}> <a class="btn btn-sm no-outline p-1"
<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>
<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"
<i class="fas fa-fw fa-flag"></i> 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> </a>
</td> </td>
</tr> </tr>
@ -151,13 +155,13 @@ export class Search extends Component<any, State> {
<nav> <nav>
<ul class="pagination justify-content-center"> <ul class="pagination justify-content-center">
<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 rounded-0" <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 rounded-0" <button class="page-link"
onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}> onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}>
Next Next
</button> </button>

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

@ -8,10 +8,8 @@
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<title>Torrents.csv</title> <title>Torrents.csv</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
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://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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
</head> </head>

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

@ -13,8 +13,8 @@ class Index extends Component<any, any> {
render() { render() {
return ( return (
<HashRouter> <HashRouter>
<div> <Navbar />
<Navbar /> <div class="container-fluid 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} />