From c29f7959ed2fe9ff198d08c229785284d5d2065b Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Wed, 24 Oct 2018 11:18:47 -0700
Subject: [PATCH] Changing scrape column to tooltip. Fixes #8"

---
 README.md               |  2 ++
 server/ui/package.json  |  6 ++---
 server/ui/src/index.tsx | 60 +++++++++++++++++++++--------------------
 3 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index bb45ad9..db281f2 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # Torrents.csv
 
+<!-- Torrents.csv - An open source, collaborative repository of torrents, with a self-hostable web server.  -->
+
 `Torrents.csv` is a collaborative, *vetted* repository of torrents, consisting of a single, searchable `torrents.csv` file. Its initially populated with a January 2017 backup of the pirate bay, and new torrents are periodically added from various torrents sites via a rust script. 
 
 `Torrents.csv` will only store torrents with at least one seeder to keep the file small, and will be periodically purged of non-seeded torrents, and sorted by seeders descending.
diff --git a/server/ui/package.json b/server/ui/package.json
index 02d3bde..c042b44 100644
--- a/server/ui/package.json
+++ b/server/ui/package.json
@@ -11,9 +11,9 @@
   "author": "Dominic Gannaway",
   "license": "MIT",
   "dependencies": {
+    "classcat": "^1.1.3",
     "inferno": "^6.0.3",
-    "moment": "^2.22.2",
-    "classcat": "^1.1.3"
+    "moment": "^2.22.2"
   },
   "devDependencies": {
     "fuse-box": "^3.1.3",
@@ -22,4 +22,4 @@
     "typescript": "^2.7.1",
     "uglify-es": "^3.3.9"
   }
-}
\ No newline at end of file
+}
diff --git a/server/ui/src/index.tsx b/server/ui/src/index.tsx
index 95bbb96..4a852a0 100644
--- a/server/ui/src/index.tsx
+++ b/server/ui/src/index.tsx
@@ -76,37 +76,39 @@ class TorrentSearchComponent extends Component<any, State> {
 
   table() {
     return (
-      <div class="table-responsive-sm">
-        <table class="table table-hover">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th class="text-right">Size</th>
-              <th class="text-right">Seeds</th>
-              <th class="text-right">Leeches</th>
-              <th>Created</th>
-              <th>Scraped</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {this.state.results.torrents.map(torrent => (
+      <div>
+        <div class="table-responsive-sm">
+          <table class="table table-hover">
+            <thead>
               <tr>
-                <td>{torrent.name}</td>
-                <td class="text-right">{humanFileSize(torrent.size_bytes, true)}</td>
-                <td class="text-right">{torrent.seeders}</td>
-                <td class="text-right">{torrent.leechers}</td>
-                <td>{moment(torrent.created_unix * 1000).fromNow()}</td>
-                <td>{moment(torrent.scraped_date * 1000).fromNow()}</td>
-                <td class="text-right">
-                  <a href={magnetLink(torrent.infohash)}>
-                    <i class="fas fa-magnet"></i>
-                  </a>
-                </td>
+                <th>Name</th>
+                <th class="text-right">Size</th>
+                <th class="text-right">Seeds</th>
+                <th class="text-right">Leeches</th>
+                <th>Created</th>
+                <th></th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {this.state.results.torrents.map(torrent => (
+                <tr>
+                  <td>{torrent.name}</td>
+                  <td class="text-right">{humanFileSize(torrent.size_bytes, true)}</td>
+                  <td class="text-right">{torrent.seeders}</td>
+                  <td class="text-right">{torrent.leechers}</td>
+                  <td title={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}>
+                    {moment(torrent.created_unix * 1000).fromNow()}
+                  </td>
+                  <td class="text-right">
+                    <a href={magnetLink(torrent.infohash)}>
+                      <i class="fas fa-magnet"></i>
+                    </a>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
         {this.paginator()}
       </div>
     );