Merge pull request #74 from feross/empty-list

add empty list state

renderer/index.css

@@ -253,7 +253,20 @@ body.drag::before {
  */
 
 .torrent-list {
-  margin-top: 37px;
+  padding-top: 37px;
+}
+
+.get-started {
+  opacity: .5;
+  padding: 24px;
+  margin: 6px;
+  text-align: center;
+  border: 5px #444 dashed;
+  flex: 1 1 auto;
+}
+
+.lead {
+  font-size: 150%;
 }
 
 .torrent {

renderer/views/torrent-list.js

@@ -8,9 +8,19 @@ var prettyBytes = require('pretty-bytes')
 
 function TorrentList (state, dispatch) {
   var list = state.client.torrents.map((torrent) => renderTorrent(torrent, dispatch))
+  if (list.length === 0) list = emptyList()
   return hx`<div class='torrent-list'>${list}</div>`
 }
 
+function emptyList () {
+  return hx`
+    <div class="get-started">
+      <p>No torrents here yet.</p>
+      <p>Drop a file or paste an address to get started!</p>
+    </div>
+  `
+}
+
 // Renders a torrent in the torrent list
 // Includes name, download status, play button, background image
 // May be expanded for additional info, including the list of files inside