Merge pull request #103 from feross/scrollbar

Fix scroll bar going under header bar

renderer/index.css

@@ -185,7 +185,7 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   background: rgb(50, 50, 50);
 }
 
-.view-player .header {
+.app.view-player .header {
   opacity: 0.8;
 }
 
@@ -246,6 +246,11 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   width: 100%;
   overflow: auto;
   flex: 1 1 auto;
+  margin-top: 37px;
+}
+
+.app.view-player .content {
+  margin-top: 0;
 }
 
 /*
@@ -274,10 +279,6 @@ a:not(.disabled):hover, i:not(.disabled):hover {
  * TORRENT LIST
  */
 
-.torrent-list {
-  padding-top: 37px;
-}
-
 .torrent-placeholder {
   padding: 10px;
   font-size: 1.1em;
@@ -430,7 +431,7 @@ body.drag .torrent-placeholder span {
   width: 100%;
   height: 38px;
   bottom: 0;
-  transition: all 0.15s ease-out;
+  transition: opacity 0.15s ease-out;
 }
 
 .app.hide-video-controls .player-controls {

renderer/index.js

@@ -457,14 +457,14 @@ function openPlayer (torrentSummary) {
     if (timedOut) return
 
     // otherwise, play the video
-    state.url = '/player'
+    state.url = 'player'
     state.window.title = torrentSummary.name
     update()
   })
 }
 
 function closePlayer () {
-  state.url = '/'
+  state.url = 'home'
   state.window.title = config.APP_NAME
   update()
 

renderer/state.js

@@ -13,7 +13,7 @@ module.exports = {
   torrentPlaying: null, /* the torrent we're streaming. see client.torrents */
   // history: [], /* track how we got to the current view. enables Back button */
   // historyIndex: 0,
-  url: '/',
+  url: 'home',
   devices: {
     airplay: null, /* airplay client. finds and manages AppleTVs */
     chromecast: null /* chromecast client. finds and manages Chromecasts */

renderer/views/app.js

@@ -15,20 +15,20 @@ function App (state, dispatch) {
   // Never hide the controls when:
   // * The mouse is over the controls or we're scrubbing (see CSS)
   // * The video is paused
-  var isVideoPlayer = state.url === '/player'
-  var hideControls = isVideoPlayer &&
+  var hideControls = state.url === 'player' &&
     state.video.mouseStationarySince !== 0 &&
     new Date().getTime() - state.video.mouseStationarySince > 2000 &&
     !state.video.isPaused
 
   var cls = [
-    'is-' + process.platform, /* 'is-darwin' (OS X), 'is-win32' (Windows), 'is-linux' */
-    state.window.isFullScreen ? 'is-fullscreen' : '',
-    state.window.isFocused ? 'is-focused' : '',
-    isVideoPlayer ? 'view-player' : '',
-    hideControls ? 'hide-video-controls' : ''
+    'view-' + state.url, /* e.g. view-home, view-player */
+    'is-' + process.platform /* e.g. is-darwin, is-win32, is-linux */
   ]
 
+  if (state.window.isFullScreen) cls.push('is-fullscreen')
+  if (state.window.isFocused) cls.push('is-focused')
+  if (hideControls) cls.push('hide-video-controls')
+
   return hx`
     <div class='app ${cls.join(' ')}'>
       ${getHeader()}
@@ -38,15 +38,15 @@ function App (state, dispatch) {
 
   function getHeader () {
     // Hide the header on Windows/Linux when in the player
-    if (isOSX || state.url !== '/player') {
+    if (isOSX || state.url !== 'player') {
       return Header(state, dispatch)
     }
   }
 
   function getView () {
-    if (state.url === '/') {
+    if (state.url === 'home') {
       return TorrentList(state, dispatch)
-    } else if (state.url === '/player') {
+    } else if (state.url === 'player') {
       return Player(state, dispatch)
     }
   }

renderer/views/header.js

@@ -35,7 +35,7 @@ function Header (state, dispatch) {
   }
 
   function getAddButton () {
-    if (state.url !== '/player') {
+    if (state.url !== 'player') {
       return hx`
         <i
           class='icon add'