UI: Reduce font size, list item height

- Reduce torrent list item from 120px to 110px height
- Vertically center torrent list buttons
- Reduce font sizes (torrent list, modal labels)
This commit is contained in:
Feross Aboukhadijeh
2016-05-11 20:49:41 +02:00
parent 95019453fd
commit 0b1872fa28
3 changed files with 8 additions and 9 deletions

View File

@@ -80,7 +80,7 @@ function createWebTorrentHiddenWindow () {
} }
var HEADER_HEIGHT = 37 var HEADER_HEIGHT = 37
var TORRENT_HEIGHT = 120 var TORRENT_HEIGHT = 110
function createMainWindow () { function createMainWindow () {
if (windows.main) { if (windows.main) {

View File

@@ -276,7 +276,6 @@ table {
} }
.modal label { .modal label {
font-size: 16px;
font-weight: bold; font-weight: bold;
} }
@@ -434,7 +433,7 @@ input {
.torrent, .torrent,
.torrent-placeholder { .torrent-placeholder {
height: 120px; height: 110px;
} }
.torrent:not(:last-child) { .torrent:not(:last-child) {
@@ -464,7 +463,7 @@ input {
.torrent .buttons { .torrent .buttons {
position: absolute; position: absolute;
top: 25px; top: 34px;
right: 10px; right: 10px;
align-items: center; align-items: center;
display: none; display: none;
@@ -547,15 +546,15 @@ input {
} }
.torrent .name { .torrent .name {
font-size: 1.5em; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 1.5em; line-height: 1.5em;
} }
.torrent .status, .torrent .status,
.torrent .status2 { .torrent .status2 {
font-size: 1em; /* font-size: 14px;
line-height: 1.5em; line-height: 1.5em;*/
} }
/* /*

View File

@@ -73,7 +73,7 @@ function TorrentList (state) {
if (downloaded !== total) downloaded += ` / ${total}` if (downloaded !== total) downloaded += ` / ${total}`
elements.push(hx` elements.push(hx`
<div class='status ellipsis'> <div class='ellipsis'>
${getFilesLength()} ${getFilesLength()}
<span>${getPeers()}</span> <span>${getPeers()}</span>
<span>↓ ${prettyBytes(prog.downloadSpeed || 0)}/s</span> <span>↓ ${prettyBytes(prog.downloadSpeed || 0)}/s</span>
@@ -81,7 +81,7 @@ function TorrentList (state) {
</div> </div>
`) `)
elements.push(hx` elements.push(hx`
<div class='status2 ellipsis'> <div class='ellipsis'>
<span class='progress'>${progress}%</span> <span class='progress'>${progress}%</span>
<span>${downloaded}</span> <span>${downloaded}</span>
</div> </div>