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 0; + return + 0 + + + ; } if (!isFinite(ratio)) { - return ; + return + + + + ; } return ( - + - {`${ratio.toFixed(3)} `} + {`${ratio.toFixed(2)}`} - ({formatAmount(up)} - {` ${formatAmount(down)}`} ) + {formatAmount(up)} + {`${formatAmount(down)}`} ); } 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 ( - +
- +
@@ -28,7 +28,13 @@ class TorrentTable extends Component { name up downratio + + ratio + + + + progress