style improvements

- make torrent placeholder the exact size of a normal torrent
- make torrent list window minimum size of two torrents
- make window start out sized for 4 torrents
- increase font size responsively

main/windows.js

@@ -21,12 +21,12 @@ function createMainWindow (menu) {
     backgroundColor: '#282828',
     darkTheme: true, // Forces dark theme (GTK+3 only)
     minWidth: 375,
-    minHeight: 38 + (120 * 2), // header height + two torrents
+    minHeight: 38 + (120 * 2), // header height + 2 torrents
     show: false, // Hide window until DOM finishes loading
     title: config.APP_NAME,
     titleBarStyle: 'hidden-inset', // Hide OS chrome, except traffic light buttons (OS X)
     width: 450,
-    height: 600
+    height: 38 + (120 * 4) // header height + 4 torrents
   })
   win.loadURL(config.INDEX)
 

renderer/index.css

@@ -11,18 +11,21 @@
 html,
 body {
   background: rgb(40, 40, 40);
-  color: #FFF;
   cursor: default;
   height: 100%;
-  font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 1.5em;
   margin: 0;
   padding: 0;
   width: 100%;
   overflow: hidden;
 }
 
+body {
+  color: #FFF;
+  font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 1.5em;
+}
+
 .loading {
   display: flex;
   flex-direction: column;
@@ -150,6 +153,8 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   right: 0;
   z-index: 1000;
   transition: opacity 0.15s ease-out;
+  font-size: 14px;
+  line-height: 1.5em;
 }
 
 .view-player .header {
@@ -245,19 +250,22 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   padding-top: 37px;
 }
 
-.drop-target {
-  margin: 10px;
+.torrent-placeholder {
+  padding: 10px;
+  color: #666;
+  font-size: 1.1em;
+}
+
+.torrent-placeholder span {
   border: 5px #444 dashed;
   border-radius: 5px;
-  color: #666;
-  font-size: 16px;
-  flex: 1 1 auto;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-body.drag .drop-target {
+body.drag .torrent-placeholder {
   border-color: #def;
   color: #def;
 }
@@ -272,22 +280,10 @@ body.drag .drop-target {
   animation: fadein .4s;
 }
 
-.torrent, .drop-target {
+.torrent, .torrent-placeholder {
   height: 120px;
 }
 
-@media only screen and (min-width: 700px) {
-  .torrent, .drop-target {
-    height: 150px;
-  }
-}
-
-@media only screen and (min-width: 900px) {
-  .torrent, .drop-target {
-    height: 180px;
-  }
-}
-
 .torrent:not(:last-child) {
   border-bottom: 1px solid rgb(20, 20, 20);
 }
@@ -507,3 +503,27 @@ body.drag .drop-target {
   margin-top: 0;
   margin-left: 0;
 }
+
+/*
+ * MEDIA QUERIES
+ */
+
+@media only screen and (min-width: 700px) {
+  body {
+    font-size: 16px;
+    line-height: 1.5em;
+  }
+  .torrent, .torrent-placeholder {
+    height: 150px;
+  }
+}
+
+@media only screen and (min-width: 900px) {
+  body {
+    font-size: 18px;
+    line-height: 1.5em;
+  }
+  .torrent, .torrent-placeholder {
+    height: 180px;
+  }
+}

renderer/views/torrent-list.js

@@ -11,8 +11,8 @@ function TorrentList (state, dispatch) {
   return hx`
     <div class='torrent-list'>
       ${list}
-      <div class='drop-target'>
-        <p>Drop a torrent file here or paste a magnet link</p>
+      <div class='torrent-placeholder'>
+        <span class='ellipsis'>Drop a torrent file here or paste a magnet link</span>
       </div>
     </div>`
 }