Merging jooolas ui_details branch, making a few fixes to navbar, and other styling.

server/ui/.gitignore

@@ -25,6 +25,5 @@ node_modules
 *~
 test/data/result.json
 
-yarn.lock
 package-lock.json
 *.orig

server/ui/package.json

@@ -8,8 +8,12 @@
     "build": "node fuse prod"
   },
   "keywords": [],
-  "author": "Dominic Gannaway",
+  "author": "Dessalines",
-  "license": "MIT",
+  "license": "GPL-2.0-or-later",
+  "engines": {
+    "node": ">=8.9.0"
+  },
+  "engineStrict": true,
   "dependencies": {
     "classcat": "^1.1.3",
     "inferno": "^6.3.1",

server/ui/src/Main.css

@@ -1,37 +1,59 @@
-html,
+/* globally disable dotted outlines on anchors */
-body {
+a:focus {
-  /* assumes we won't target screens with a width smaller than 320px */
+  outline: none;
-  min-width: 320px;
 }
 
-/* globally disable dotted outlines on anchors */
+a::-moz-focus-inner {
-a:focus { outline: none; }
+  border: 0;
-a::-moz-focus-inner { border: 0; }
+}
 
-.search-name-col { width: 50%; }
+.search-name-col {
-.search-name-cell { word-wrap: break-word; }
+  width: 50%;
+}
 
-.table-fixed { table-layout: fixed; }
+.search-name-cell {
+  word-wrap: break-word;
+}
+
+.table-fixed {
+  table-layout: fixed;
+}
 
 /* add padding to first and last cell */
-.table-padding th:first-child,
+.table-padding th:first-child, .table-padding td:first-child {
-.table-padding td:first-child { padding-left: 1em !important; }
+  padding-left: 1em !important;
-.table-padding th:last-child,
+}
-.table-padding td:last-child { padding-right: 1em !important; }
+
+.table-padding th:last-child, .table-padding td:last-child {
+  padding-right: 1em !important;
+}
+
+.table thead th {
+  border: 0px;
+}
+
+.table tr td {
+  vertical-align: middle !important;
+}
 
 /* Colors */
-.navbar-purple { background-color: #673ab7; }
+.navbar-purple {
-.table-hover-purple tbody tr:hover { background-color: rgba(103, 58, 183, 0.2) !important; }
+  background-color: #673ab7;
+}
+
+.table-hover-purple tbody tr:hover {
+  background-color: rgba(103, 58, 183, 0.2) !important;
+}
+
+/* Bootstrap fixes */
 
-/* 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;
   outline: none !important;

server/ui/src/components/navbar.tsx

@@ -29,9 +29,9 @@ export class Navbar extends Component<any, State> {
 
   navbar() {
     return (
-      <nav class="navbar navbar-dark navbar-purple p-2 p-sm-1 shadow">
+      <nav class="navbar navbar-dark navbar-purple p-1 shadow">
         <a class="navbar-brand mx-1" href="#">
-          <i class="fas fa-fw fa-database mr-2"></i>
+          <i class="fas fa-fw fa-database mr-1"></i>
           Torrents.csv
         </a>
         <div class="navbar-nav ml-auto mr-2">
@@ -44,12 +44,12 @@ export class Navbar extends Component<any, State> {
 
   searchForm() {
     return (
-      <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)}>
+      <form class="col-12 col-sm-6 m-0 px-1" onSubmit={linkEvent(this, this.search)}>
         <div class="input-group w-100">
           <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-right no-outline" type="submit">
+          <button class="btn btn-light bg-white border-0 rounded-right no-outline" type="submit">
             <i className="fas fa-fw fa-search"></i>
           </button>
         </div>

server/ui/src/components/search.tsx

@@ -68,19 +68,20 @@ export class Search extends Component<any, State> {
 
   fetchData(searchParams: SearchParams): Promise<Results> {
     let q = encodeURI(searchParams.q);
-    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(csv => convertCsvToJson(csv));
   }
 
   render() {
     return (
-      <div>{
+      <div>
+        {
           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,34 +107,34 @@ export class Search extends Component<any, State> {
         <table class="table table-fixed table-hover table-sm table-striped table-hover-purple table-padding">
           <thead>
             <tr>
-              <th class="border-0 align-middle search-name-col">Name</th>
+              <th class="search-name-col">Name</th>
-              <th class="border-0 align-middle text-right">Size</th>
+              <th class="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="text-right">Seeds</th>
-              <th class="border-0 align-middle text-right d-none d-md-table-cell">Leeches</th>
+              <th class="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="text-right d-none d-md-table-cell">Created</th>
-              <th class="border-0"></th>
+              <th></th>
             </tr>
           </thead>
           <tbody>
             {this.state.results.torrents.map(torrent => (
               <tr>
-                <td class="align-middle search-name-cell">{torrent.name}</td>
+                <td class="search-name-cell">{torrent.name}</td>
-                <td class="align-middle text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
+                <td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</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="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="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="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="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="align-middle text-right">
+                <td class="text-right">
                   <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 class="btn btn-sm no-outline p-1 d-none d-md-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}`}
                     target="_blank"
                     data-balloon="Report Torrent"

server/ui/src/env.ts

@@ -1 +1 @@
-export const endpoint = "http://localhost:8080";
+export const endpoint = "http://0.0.0.0:8080";

server/ui/src/index.tsx

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