From 1e1027aeb2a9f087ba1db027abce336f316b3746 Mon Sep 17 00:00:00 2001
From: Drew DeVault <sir@cmpwn.com>
Date: Wed, 23 Aug 2017 08:52:08 -0400
Subject: [PATCH] Improve torrent display

---
 scss/main.scss          |  6 +++++-
 src/ui/main.js          |  9 ++++-----
 src/ui/torrent_table.js | 16 ++++++++++++++--
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/scss/main.scss b/scss/main.scss
index fa1ad1d..8b77f78 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -25,6 +25,10 @@
     }
   }
 
+  &.pending {
+    background-image: linear-gradient(to right, darken($gray-lighter, 10), $gray-lighter);
+  }
+
   &.seeding {
     background-image: linear-gradient(to right, lighten($brand-info, 20), $brand-info);
   }
@@ -34,7 +38,7 @@
   }
 
   background-repeat: no-repeat;
-  background-position: bottom;
+  background-position: left bottom;
 }
 
 .navbar {
diff --git a/src/ui/main.js b/src/ui/main.js
index 1c14dd8..e8322b7 100644
--- a/src/ui/main.js
+++ b/src/ui/main.js
@@ -5,14 +5,13 @@ export default class Main extends Component {
   render() {
     return (
       <div className="row">
-        <div className="col-md-4">
-          <h3>Filter</h3>
-          <p>TODO</p>
-        </div>
         <div className="col-md-8">
-          <h3>Torrents</h3>
           <TorrentTable />
         </div>
+        <div className="col-md-4">
+          <h3>archlinux-2017.08.01-x86_64.iso</h3>
+          <p>TODO details</p>
+        </div>
       </div>
     );
   }
diff --git a/src/ui/torrent_table.js b/src/ui/torrent_table.js
index 6d1d3c3..787df72 100644
--- a/src/ui/torrent_table.js
+++ b/src/ui/torrent_table.js
@@ -1,6 +1,18 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+function formatBitrate(bitrate) {
+  if (bitrate > 1000000000) {
+    return `${(bitrate / 1000000000).toFixed(2)} Gb/s`;
+  } else if (bitrate > 1000000) {
+    return `${(bitrate / 1000000).toFixed(2)} Mb/s`;
+  } else if (bitrate > 1000) {
+    return `${(bitrate / 1000).toFixed(2)} Kb/s`;
+  } else {
+    return `${bitrate} b/s`;
+  }
+}
+
 class TorrentTable extends Component {
   render() {
     const { torrents } = this.props;
@@ -31,8 +43,8 @@ class TorrentTable extends Component {
                   {t.name}
                 </a>
               </td>
-              <td>{t.rate_up}</td>
-              <td>{t.rate_down}</td>
+              <td>{formatBitrate(t.rate_up)}</td>
+              <td>{formatBitrate(t.rate_down)}</td>
             </tr>
           )}
         </tbody>