Merge pull request #95 from feross/style

Style

main/windows.js

@@ -21,12 +21,12 @@ function createMainWindow (menu) {
     backgroundColor: '#282828',
     darkTheme: true, // Forces dark theme (GTK+3 only)
     minWidth: 375,
-    minHeight: 158,
+    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)
 

package.json

@@ -48,7 +48,7 @@
     "build": "electron-packager . $npm_package_productName --overwrite --out=dist --ignore='^/dist$' --prune --asar --all --version=$npm_package_devDependencies_electron_prebuilt",
     "debug": "DEBUG=* electron .",
     "start": "electron .",
-    "update-authors": "./bin/update-authors.sh",
-    "test": "standard"
+    "test": "standard",
+    "update-authors": "./bin/update-authors.sh"
   }
 }

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;
 }
@@ -267,27 +275,15 @@ body.drag .drop-target {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 50%;
-  transition: all 0.1s ease-out;
+  transition: -webkit-filter 0.1s ease-out;
   position: relative;
   animation: fadein .4s;
 }
 
-.torrent, .drop-target {
+.torrent, .torrent-placeholder {
   height: 120px;
 }
 
-@media only screen and (min-width: 600px) {
-  .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>`
 }