Unsquash the UI when window is small

Fix #44

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 {

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`
-      <i
-        class='icon delete'
-        onclick=${() => dispatch('deleteTorrent', torrent)}>
-        close
-      </i>
-    `,
-    hx`
-      <i.btn.icon.play
-        class='${!torrent.ready ? 'disabled' : ''}'
-        onclick=${() => dispatch('openPlayer', torrent)}>
-        play_arrow
-      </i>
-    `
-  ]
-
-  return hx`<div class='torrent' style=${style}>${elements}</div>`
-}
-
-// 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`
-    <div class='metadata'>
-      <div class='name ellipsis'>${torrent.name || 'Loading torrent...'}</div>
-      <div class='status'>
-        <span class='progress'>${progress}%</span>
-        <span>${downloaded}</span>
-      </div>
-      ${getFilesLength()}
-      <span>${getPeers()}</span>
-      <span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
-      <span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
+    <div class='torrent' style=${style}>
+      ${renderTorrentMetadata(torrent)}
+      ${renderTorrentButtons(torrent)}
     </div>
   `
 
-  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`<span class='files'>${torrent.files.length} files</span>`
+    if (downloaded !== total) downloaded += ` / ${total}`
+
+    return hx`
+      <div class='metadata'>
+        <div class='name ellipsis'>${torrent.name || 'Loading torrent...'}</div>
+        <div class='status ellipsis'>
+          ${getFilesLength()}
+          <span>${getPeers()}</span>
+          <span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
+          <span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
+        </div>
+        <div class='status2 ellipsis'>
+          <span class='progress'>${progress}%</span>
+          <span>${downloaded}</span>
+        </div>
+      </div>
+    `
+
+    function getPeers () {
+      var count = torrent.numPeers === 1 ? 'peer' : 'peers'
+      return `${torrent.numPeers} ${count}`
+    }
+
+    function getFilesLength () {
+      if (torrent.ready && torrent.files.length > 1) {
+        return hx`<span class='files'>${torrent.files.length} files</span>`
+      }
     }
   }
+
+  function renderTorrentButtons () {
+    return hx`
+      <div class="buttons">
+        <i.btn.icon.play
+          class='${!torrent.ready ? 'disabled' : ''}'
+          onclick=${() => dispatch('openPlayer', torrent)}>
+          play_arrow
+        </i>
+        <i
+          class='icon delete'
+          onclick=${() => dispatch('deleteTorrent', torrent)}>
+          close
+        </i>
+      </div>
+    `
+  }
 }