diff --git a/main/windows.js b/main/windows.js index d786eb00..01ad5ad8 100644 --- a/main/windows.js +++ b/main/windows.js @@ -80,7 +80,7 @@ function createWebTorrentHiddenWindow () { } var HEADER_HEIGHT = 37 -var TORRENT_HEIGHT = 120 +var TORRENT_HEIGHT = 100 function createMainWindow () { if (windows.main) { @@ -97,7 +97,7 @@ function createMainWindow () { titleBarStyle: 'hidden-inset', // Hide OS chrome, except traffic light buttons (OS X) useContentSize: true, // Specify web page size without OS chrome width: 500, - height: HEADER_HEIGHT + (TORRENT_HEIGHT * 5) // header height + 4 torrents + height: HEADER_HEIGHT + (TORRENT_HEIGHT * 6) // header height + 5 torrents }) win.loadURL(config.WINDOW_MAIN) if (process.platform === 'darwin') { diff --git a/renderer/index.css b/renderer/index.css index d3e30f51..096c6967 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -276,7 +276,6 @@ table { } .modal label { - font-size: 16px; font-weight: bold; } @@ -434,7 +433,7 @@ input { .torrent, .torrent-placeholder { - height: 120px; + height: 100px; } .torrent:not(:last-child) { @@ -447,9 +446,9 @@ input { .torrent .metadata { position: absolute; - top: 20px; - left: 20px; - right: 20px; + top: 25px; + left: 15px; + right: 15px; width: calc(100% - 40px); text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px; } @@ -459,12 +458,15 @@ input { } .torrent .metadata span:not(:last-child)::after { - content: ' — '; + content: ' • '; + opacity: 0.7; + padding-left: 4px; + padding-right: 4px; } .torrent .buttons { position: absolute; - top: 25px; + top: 29px; right: 10px; align-items: center; display: none; @@ -547,17 +549,11 @@ input { } .torrent .name { - font-size: 1.5em; + font-size: 18px; font-weight: bold; line-height: 1.5em; } -.torrent .status, -.torrent .status2 { - font-size: 1em; - line-height: 1.5em; -} - /* * TORRENT LIST: DRAG-DROP TARGET */ diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js index 401b3494..615fc92f 100644 --- a/renderer/views/torrent-list.js +++ b/renderer/views/torrent-list.js @@ -67,39 +67,49 @@ function TorrentList (state) { // If it's downloading/seeding then show progress info var prog = torrentSummary.progress if (torrentSummary.status !== 'paused' && prog) { - var progress = Math.floor(100 * prog.progress) - var downloaded = prettyBytes(prog.downloaded) - var total = prettyBytes(prog.length || 0) - if (downloaded !== total) downloaded += ` / ${total}` - elements.push(hx` -
- ${getFilesLength()} - ${getPeers()} - ↓ ${prettyBytes(prog.downloadSpeed || 0)}/s - ↑ ${prettyBytes(prog.uploadSpeed || 0)}/s -
- `) - elements.push(hx` -
- ${progress}% - ${downloaded} +
+ ${renderPercentProgress()} + ${renderTotalProgress()} + ${renderPeers()} + ${renderDownloadSpeed()} + ${renderUploadSpeed()}
`) } return hx`
${elements}
` - function getPeers () { - var count = prog.numPeers === 1 ? 'peer' : 'peers' - return `${prog.numPeers} ${count}` + function renderPercentProgress () { + var progress = Math.floor(100 * prog.progress) + return hx`${progress}%` } - function getFilesLength () { - if (torrentSummary.files && torrentSummary.files.length > 1) { - return hx`${torrentSummary.files.length} files` + function renderTotalProgress () { + var downloaded = prettyBytes(prog.downloaded) + var total = prettyBytes(prog.length || 0) + if (downloaded === total) { + return hx`${downloaded}` + } else { + return hx`${downloaded} / ${total}` } } + + function renderPeers () { + if (prog.numPeers === 0) return + var count = prog.numPeers === 1 ? 'peer' : 'peers' + return hx`${prog.numPeers} ${count}` + } + + function renderDownloadSpeed () { + if (prog.downloadSpeed === 0) return + return hx`↓ ${prettyBytes(prog.downloadSpeed)}/s` + } + + function renderUploadSpeed () { + if (prog.uploadSpeed === 0) return + return hx`↑ ${prettyBytes(prog.uploadSpeed)}/s` + } } // Download button toggles between torrenting (DL/seed) and paused