Improve ratio display

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;
 

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]}`;
 }

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 class="ratio">
       <span>
-      <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>
   );
 }

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>