Improve torrent display

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 {

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>
     );
   }

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>