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

Removing font-awesome 

Replacing with icomoon svgs.
Fixes #54
This commit is contained in:
Dessalines 2019-03-15 10:13:45 -07:00
parent 189646ef2e
commit ada12561c9
5 changed files with 78 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,3 +66,24 @@ a::-moz-focus-inner {
white-space: -moz-pre-wrap; white-space: -moz-pre-wrap;
white-space: -pre-wrap; white-space: -pre-wrap;
} }
.icon {
display: inline-flex;
width: .8em;
height: .8em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
vertical-align: initial;
}
.spinner {
animation: spin 2s linear infinite;
width: 20vw;
height: 20vh;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}

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

@ -32,11 +32,11 @@ export class Navbar extends Component<any, State> {
return ( return (
<nav class="navbar navbar-light bg-light p-1 shadow"> <nav class="navbar navbar-light bg-light 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-1"></i> <svg class="icon icon-database mr-2"><use xlinkHref="#icon-database"></use></svg>
Torrents.csv Torrents.csv
</a> </a>
<div class="navbar-nav ml-auto mr-2"> <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> <a class="nav-item nav-link" href={repoUrl}><svg class="icon icon-github"><use xlinkHref="#icon-github"></use></svg></a>
</div> </div>
{this.searchForm()} {this.searchForm()}
</nav> </nav>
@ -59,7 +59,7 @@ export class Navbar extends Component<any, State> {
<option value="file">File</option> <option value="file">File</option>
</select> </select>
<button class="btn btn-secondary border-0 rounded-right 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> <svg class="icon icon-search"><use xlinkHref="#icon-search"></use></svg>
</button> </button>
</div> </div>
</div> </div>

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

@ -93,7 +93,7 @@ export class Search extends Component<any, State> {
spinner() { spinner() {
return ( return (
<div class="text-center m-5 p-5"> <div class="text-center m-5 p-5">
<i class="fas fa-spinner fa-spin fa-5x"></i> <svg class="icon icon-spinner spinner"><use xlinkHref="#icon-spinner"></use></svg>
</div> </div>
); );
} }
@ -139,8 +139,14 @@ export class Search extends Component<any, State> {
</td> </td>
)} )}
<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"><i class="fas fa-fw fa-arrow-up d-none d-sm-inline mr-1"></i>{torrent.seeders}</td> <td class="text-right text-success">
<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> <svg class="icon icon-arrow-up d-none d-sm-inline mr-1"><use xlinkHref="#icon-arrow-up"></use></svg>
{torrent.seeders}
</td>
<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>
{torrent.leechers}
</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()}`}
data-balloon-pos="down"> data-balloon-pos="down">
@ -151,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">
<i class="fas fa-fw fa-magnet"></i> <svg class="icon icon-magnet"><use xlinkHref="#icon-magnet"></use></svg>
</a> </a>
<a class="btn btn-sm no-outline p-1 d-none d-sm-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> <svg class="icon icon-flag"><use xlinkHref="#icon-flag"></use></svg>
</a> </a>
</td> </td>
</tr> </tr>

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

@ -8,7 +8,6 @@
<title>Torrents.csv</title> <title>Torrents.csv</title>
<link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css"> <link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css">
<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>

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

@ -19,9 +19,51 @@ class Index extends Component<any, any> {
<Route exact path="/" component={Home} /> <Route exact path="/" component={Home} />
<Route path={`/search/:type_/:q/:page`} component={Search} /> <Route path={`/search/:type_/:q/:page`} component={Search} />
</Switch> </Switch>
{this.symbols()}
</div> </div>
</HashRouter> </HashRouter>
) );
}
symbols() {
return (
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-database" viewBox="0 0 24 28">
<title>database</title>
<path d="M12 12c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 24c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 18c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 0c6.625 0 12 1.797 12 4v2c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2c0-2.203 5.375-4 12-4z"></path>
</symbol>
<symbol id="icon-flag" viewBox="0 0 29 28">
<title>flag</title>
<path d="M5 4c0 0.719-0.391 1.359-1 1.719v19.781c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-19.781c-0.609-0.359-1-1-1-1.719 0-1.109 0.891-2 2-2s2 0.891 2 2zM28 5v11.922c0 0.578-0.359 0.797-0.812 1.031-1.766 0.953-3.719 1.813-5.766 1.813-2.875 0-4.25-2.188-7.656-2.188-2.484 0-5.094 1.125-7.25 2.281-0.172 0.094-0.328 0.141-0.516 0.141-0.547 0-1-0.453-1-1v-11.594c0-0.375 0.187-0.641 0.484-0.859 0.375-0.25 0.828-0.469 1.234-0.672 1.969-1 4.359-1.875 6.578-1.875 2.453 0 4.375 0.812 6.547 1.828 0.438 0.219 0.891 0.297 1.375 0.297 2.453 0 5.094-2.125 5.781-2.125 0.547 0 1 0.453 1 1z"></path>
</symbol>
<symbol id="icon-magnet" viewBox="0 0 24 28">
<title>magnet</title>
<path d="M24 13v2c0 6.375-5.047 11-12 11s-12-4.625-12-11v-2c0-0.547 0.453-1 1-1h6c0.547 0 1 0.453 1 1v2c0 2.859 3.328 3 4 3s4-0.141 4-3v-2c0-0.547 0.453-1 1-1h6c0.547 0 1 0.453 1 1zM8 3v6c0 0.547-0.453 1-1 1h-6c-0.547 0-1-0.453-1-1v-6c0-0.547 0.453-1 1-1h6c0.547 0 1 0.453 1 1zM24 3v6c0 0.547-0.453 1-1 1h-6c-0.547 0-1-0.453-1-1v-6c0-0.547 0.453-1 1-1h6c0.547 0 1 0.453 1 1z"></path>
</symbol>
<symbol id="icon-arrow-down" viewBox="0 0 32 32">
<title>arrow-down</title>
<path d="M16 31l15-15h-9v-16h-12v16h-9z"></path>
</symbol>
<symbol id="icon-arrow-up" viewBox="0 0 32 32">
<title>arrow-up</title>
<path d="M16 1l-15 15h9v16h12v-16h9z"></path>
</symbol>
<symbol id="icon-search" viewBox="0 0 32 32">
<title>search</title>
<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
</symbol>
<symbol id="icon-github" viewBox="0 0 32 32">
<title>github</title>
<path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path>
</symbol>
<symbol id="icon-spinner" viewBox="0 0 32 32">
<title>spinner</title>
<path d="M16 32c-4.274 0-8.292-1.664-11.314-4.686s-4.686-7.040-4.686-11.314c0-3.026 0.849-5.973 2.456-8.522 1.563-2.478 3.771-4.48 6.386-5.791l1.344 2.682c-2.126 1.065-3.922 2.693-5.192 4.708-1.305 2.069-1.994 4.462-1.994 6.922 0 7.168 5.832 13 13 13s13-5.832 13-13c0-2.459-0.69-4.853-1.994-6.922-1.271-2.015-3.066-3.643-5.192-4.708l1.344-2.682c2.615 1.31 4.824 3.313 6.386 5.791 1.607 2.549 2.456 5.495 2.456 8.522 0 4.274-1.664 8.292-4.686 11.314s-7.040 4.686-11.314 4.686z"></path>
</symbol>
</defs>
</svg>
);
} }
} }
render(<Index />, container); render(<Index />, container);