diff --git a/renderer/index.css b/renderer/index.css index 80bab32e..4f8e3640 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -247,22 +247,28 @@ body.drag::before { } .torrent:hover .metadata { - width: calc(100% - 170px); + width: calc(100% - 90px); } -.torrent .btn, .torrent .delete { +.torrent .buttons { float: right; margin-top: 20px; - margin-left: 15px; - padding-top: 10px; display: none; } +.torrent .buttons * { + padding-top: 10px; +} + +.torrent .buttons :not(:first-child) { + margin-left: 10px; +} + .torrent .delete { opacity: 0.5; } -.torrent:hover .btn, .torrent:hover .delete { +.torrent:hover .buttons { display: block; } @@ -284,11 +290,9 @@ body.drag::before { line-height: 1.5em; } -.torrent .status { +.torrent .status, .torrent .status2 { font-size: 1em; line-height: 1.5em; - position: absolute; - bottom: 20px; } .torrent span:not(:last-child)::after { diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js index a4a8101e..37858cc9 100644 --- a/renderer/views/torrent-list.js +++ b/renderer/views/torrent-list.js @@ -23,57 +23,62 @@ function renderTorrent (torrent, dispatch) { // Foreground: name of the torrent, basic info like size, play button, // cast buttons if available, and delete - var elements = [ - renderTorrentMetadata(torrent), - hx` - dispatch('deleteTorrent', torrent)}> - close - - `, - hx` - dispatch('openPlayer', torrent)}> - play_arrow - - ` - ] - - return hx`
${elements}
` -} - -// Renders the torrent name and download progress -function renderTorrentMetadata (torrent) { - var progress = Math.floor(100 * torrent.progress) - var downloaded = prettyBytes(torrent.downloaded) - var total = prettyBytes(torrent.length || 0) - - if (downloaded !== total) downloaded += ` / ${total}` - return hx` -
-
${torrent.name || 'Loading torrent...'}
-
- ${progress}% - ${downloaded} -
- ${getFilesLength()} - ${getPeers()} - ↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s - ↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s +
+ ${renderTorrentMetadata(torrent)} + ${renderTorrentButtons(torrent)}
` - function getPeers () { - var count = torrent.numPeers === 1 ? 'peer' : 'peers' - return `${torrent.numPeers} ${count}` - } + function renderTorrentMetadata () { + var progress = Math.floor(100 * torrent.progress) + var downloaded = prettyBytes(torrent.downloaded) + var total = prettyBytes(torrent.length || 0) - function getFilesLength () { - if (torrent.ready && torrent.files.length > 1) { - return hx`${torrent.files.length} files` + if (downloaded !== total) downloaded += ` / ${total}` + + return hx` + + ` + + function getPeers () { + var count = torrent.numPeers === 1 ? 'peer' : 'peers' + return `${torrent.numPeers} ${count}` + } + + function getFilesLength () { + if (torrent.ready && torrent.files.length > 1) { + return hx`${torrent.files.length} files` + } } } + + function renderTorrentButtons () { + return hx` +
+ dispatch('openPlayer', torrent)}> + play_arrow + + dispatch('deleteTorrent', torrent)}> + close + +
+ ` + } }