From 40c8c731665cd1771341feed21c725e8f606c2d7 Mon Sep 17 00:00:00 2001
From: Drew DeVault <sir@cmpwn.com>
Date: Fri, 29 Dec 2017 02:07:40 -0500
Subject: [PATCH] Improve ratio display

---
 scss/main.scss          | 16 ++++++++++++++++
 src/bitrate.js          |  4 ++++
 src/ui/ratio.js         | 20 ++++++++++++++------
 src/ui/torrent_table.js | 10 ++++++++--
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/scss/main.scss b/scss/main.scss
index cce229a..4fe2c90 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -188,6 +188,22 @@ fieldset .form-check-input:only-child {
   }
 }
 
+.ratio {
+  & > * {
+    padding: 0 0.5rem;
+  }
+}
+
+.torrents .ratio {
+  display: flex;
+
+  & > * {
+    padding: 0;
+    flex: 1 1 0;
+    text-align: right;
+  }
+}
+
 .progress {
   border-radius: 0;
 
diff --git a/src/bitrate.js b/src/bitrate.js
index eda98ca..098a4b5 100644
--- a/src/bitrate.js
+++ b/src/bitrate.js
@@ -33,6 +33,8 @@ export function formatBitrate(bitrate) {
     places = 0;
   } else if (rate >= 10) {
     places = 1;
+  } else if (rate == 0) {
+    places = 0;
   }
   return `${rate.toFixed(places)} ${unit}`;
 }
@@ -50,6 +52,8 @@ export function formatAmount(amount) {
     places = 0;
   } else if (rate >= 10) {
     places = 1;
+  } else if (rate == 0) {
+    places = 0;
   }
   return `${rate.toFixed(places)} ${units[unit]}`;
 }
diff --git a/src/ui/ratio.js b/src/ui/ratio.js
index 939fbe3..5db8c70 100644
--- a/src/ui/ratio.js
+++ b/src/ui/ratio.js
@@ -5,18 +5,26 @@ import { formatAmount } from '../bitrate';
 export default function Ratio({ up, down }) {
   const ratio = up / down;
   if (isNaN(ratio)) {
-    return <span>0</span>;
+    return <span class="ratio">
+      <span>0</span>
+      <span></span>
+      <span></span>
+    </span>;
   }
   if (!isFinite(ratio)) {
-    return <span>∞</span>;
+    return <span class="ratio">
+      <strong>∞</strong>
+      <span></span>
+      <span></span>
+    </span>;
   }
   return (
-    <span>
+    <span class="ratio">
       <span>
-        {`${ratio.toFixed(3)} `}
+        {`${ratio.toFixed(2)}`}
       </span>
-      <span>({formatAmount(up)} <FontAwesome name="arrow-up" /></span>
-      <span>{` ${formatAmount(down)}`} <FontAwesome name="arrow-down" />)</span>
+      <span>{formatAmount(up)} <FontAwesome name="arrow-up" /></span>
+      <span>{`${formatAmount(down)}`} <FontAwesome name="arrow-down" /></span>
     </span>
   );
 }
diff --git a/src/ui/torrent_table.js b/src/ui/torrent_table.js
index e62d5ff..68f9a8f 100644
--- a/src/ui/torrent_table.js
+++ b/src/ui/torrent_table.js
@@ -9,7 +9,7 @@ class TorrentTable extends Component {
   render() {
     const { selection, torrents, dispatch } = this.props;
     return (
-      <table className="table">
+      <table className="table torrents">
         <thead>
           <tr>
             <th style={{width: "1px"}}>
@@ -28,7 +28,13 @@ class TorrentTable extends Component {
             <th>name</th>
             <th>up</th>
             <th>down</th>
-            <th>ratio</th>
+            <th style={{width: "18rem"}}>
+              <span class="ratio">
+                <span>ratio</span>
+                <span></span>
+                <span></span>
+              </span>
+            </th>
             <th>progress</th>
           </tr>
         </thead>