diff --git a/server/ui/src/Main.css b/server/ui/src/Main.css index 4a2a01b..f031e60 100644 --- a/server/ui/src/Main.css +++ b/server/ui/src/Main.css @@ -66,3 +66,24 @@ a::-moz-focus-inner { white-space: -moz-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); } +} diff --git a/server/ui/src/components/navbar.tsx b/server/ui/src/components/navbar.tsx index 8fdd10b..7245df6 100644 --- a/server/ui/src/components/navbar.tsx +++ b/server/ui/src/components/navbar.tsx @@ -32,11 +32,11 @@ export class Navbar extends Component { return ( @@ -59,7 +59,7 @@ export class Navbar extends Component { diff --git a/server/ui/src/components/search.tsx b/server/ui/src/components/search.tsx index 0f8a872..080761f 100644 --- a/server/ui/src/components/search.tsx +++ b/server/ui/src/components/search.tsx @@ -93,7 +93,7 @@ export class Search extends Component { spinner() { return (
- +
); } @@ -139,8 +139,14 @@ export class Search extends Component { )} {humanFileSize(torrent.size_bytes, true)} - {torrent.seeders} - {torrent.leechers} + + + {torrent.seeders} + + + + {torrent.leechers} + @@ -151,14 +157,14 @@ export class Search extends Component { href={magnetLink(torrent.infohash, (torrent.name) ? torrent.name : torrent.path, torrent.index_)} data-balloon="Magnet link" data-balloon-pos="left"> - + - + diff --git a/server/ui/src/index.html b/server/ui/src/index.html index fcf50ba..2422032 100644 --- a/server/ui/src/index.html +++ b/server/ui/src/index.html @@ -8,7 +8,6 @@ Torrents.csv - diff --git a/server/ui/src/index.tsx b/server/ui/src/index.tsx index 774880e..638c559 100644 --- a/server/ui/src/index.tsx +++ b/server/ui/src/index.tsx @@ -19,9 +19,51 @@ class Index extends Component { + {this.symbols()} - ) + ); + } + symbols() { + return ( + + + ); } } render(, container);