Updating navbar.

This commit is contained in:
Dessalines 2019-06-24 11:01:14 -07:00
parent 994323f696
commit 394f571717
3 changed files with 12 additions and 8 deletions

View File

@ -89,3 +89,7 @@ a::-moz-focus-inner {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); } 100% { transform: rotate(359deg); }
} }
icon-flag {
margin-top: 6px;
}

View File

@ -30,7 +30,7 @@ export class Navbar extends Component<any, State> {
navbar() { navbar() {
return ( return (
<nav class="navbar navbar-light bg-light p-1 shadow"> <nav class="navbar navbar-dark bg-dark p-1 shadow">
<a class="navbar-brand mx-1" href="#"> <a class="navbar-brand mx-1" href="#">
<svg class="icon icon-database mr-2"><use xlinkHref="#icon-database"></use></svg> <svg class="icon icon-database mr-2"><use xlinkHref="#icon-database"></use></svg>
Torrents.csv Torrents.csv

View File

@ -25,7 +25,7 @@ export class Search extends Component<any, State> {
searching: false searching: false
}; };
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
} }
@ -39,7 +39,7 @@ export class Search extends Component<any, State> {
} }
// Re-do search if the props have changed // Re-do search if the props have changed
componentDidUpdate(lastProps, lastState, snapshot) { componentDidUpdate(lastProps: any) {
if (lastProps.match && lastProps.match.params !== this.props.match.params) { if (lastProps.match && lastProps.match.params !== this.props.match.params) {
this.state.searchParams = { this.state.searchParams = {
page: Number(this.props.match.params.page), page: Number(this.props.match.params.page),
@ -141,11 +141,11 @@ export class Search extends Component<any, State> {
<td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td> <td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
<td class="text-right text-success"> <td class="text-right text-success">
<svg class="icon icon-arrow-up d-none d-sm-inline mr-1"><use xlinkHref="#icon-arrow-up"></use></svg> <svg class="icon icon-arrow-up d-none d-sm-inline mr-1"><use xlinkHref="#icon-arrow-up"></use></svg>
{torrent.seeders} <span>{torrent.seeders}</span>
</td> </td>
<td class="text-right text-danger d-none d-md-table-cell"> <td class="text-right text-danger d-none d-md-table-cell">
<svg class="icon icon-arrow-down mr-1"><use xlinkHref="#icon-arrow-down"></use></svg> <svg class="icon icon-arrow-down mr-1"><use xlinkHref="#icon-arrow-down"></use></svg>
{torrent.leechers} <span>{torrent.leechers}</span>
</td> </td>
<td class="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()}`}
@ -157,14 +157,14 @@ export class Search extends Component<any, State> {
href={magnetLink(torrent.infohash, (torrent.name) ? torrent.name : torrent.path, torrent.index_)} href={magnetLink(torrent.infohash, (torrent.name) ? torrent.name : torrent.path, torrent.index_)}
data-balloon="Magnet link" data-balloon="Magnet link"
data-balloon-pos="left"> data-balloon-pos="left">
<svg class="icon"><use xlinkHref="#icon-magnet"></use></svg> <svg class="icon icon-magnet"><use xlinkHref="#icon-magnet"></use></svg>
</a> </a>
<a class="btn btn-sm no-outline px-1 d-none d-sm-inline" <a class="btn btn-sm no-outline px-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">
<svg class="icon"><use xlinkHref="#icon-flag"></use></svg> <svg class="icon icon-flag"><use xlinkHref="#icon-flag"></use></svg>
</a> </a>
</td> </td>
</tr> </tr>
@ -197,7 +197,7 @@ export class Search extends Component<any, State> {
); );
} }
switchPage(a: { i: Search, nextPage: boolean }, event) { switchPage(a: { i: Search, nextPage: boolean }) {
let newSearch = a.i.state.searchParams; let newSearch = a.i.state.searchParams;
newSearch.page += (a.nextPage) ? 1 : -1; newSearch.page += (a.nextPage) ? 1 : -1;
a.i.props.history.push(`/search/${newSearch.type_}/${newSearch.q}/${newSearch.page}`); a.i.props.history.push(`/search/${newSearch.type_}/${newSearch.q}/${newSearch.page}`);