don't calculate styles in JavaScript whenever possible

This commit is contained in:
Feross Aboukhadijeh
2016-03-05 22:06:32 -08:00
parent f161a7c7e7
commit e0122f81e5
3 changed files with 14 additions and 12 deletions

View File

@@ -114,14 +114,14 @@ a:not(.disabled):hover, i:not(.disabled):hover {
top: 0; top: 0;
right: 0; right: 0;
z-index: 1000; z-index: 1000;
transition: opacity 0.2s ease-out; transition: opacity 0.15s ease-out;
} }
.app.player .header { .view-player .header {
opacity: 0; opacity: 0;
} }
.app.player:hover .header:not(.hide) { .view-player:hover .header:not(.hide) {
opacity: 0.8; opacity: 0.8;
cursor: default; cursor: default;
} }
@@ -144,6 +144,10 @@ a:not(.disabled):hover, i:not(.disabled):hover {
float: left; float: left;
} }
.darwin.not-fullscreen .header .nav.left {
margin-left: 78px;
}
.header .nav.right { .header .nav.right {
float: right; float: right;
} }
@@ -302,7 +306,7 @@ body.drag::before {
height: 38px; height: 38px;
bottom: 0; bottom: 0;
opacity: 0; opacity: 0;
transition: all 0.2s ease-out; transition: all 0.15s ease-out;
} }
.player:hover .player-controls { .player:hover .player-controls {

View File

@@ -11,10 +11,11 @@ var TorrentList = require('./torrent-list')
var isOSX = process.platform === 'darwin' var isOSX = process.platform === 'darwin'
function App (state, dispatch) { function App (state, dispatch) {
var cls = [] var cls = [
if (state.url === '/player') { process.platform,
cls.push('player') state.isFullScreen ? 'fullscreen' : 'not-fullscreen',
} state.url === '/player' ? 'view-player' : ''
]
return hx` return hx`
<div class='app ${cls.join(' ')}'> <div class='app ${cls.join(' ')}'>

View File

@@ -8,14 +8,11 @@ function Header (state, dispatch) {
var hideControls = state.url === '/player' && var hideControls = state.url === '/player' &&
state.video.mouseStationarySince !== 0 && state.video.mouseStationarySince !== 0 &&
new Date().getTime() - state.video.mouseStationarySince > 2000 new Date().getTime() - state.video.mouseStationarySince > 2000
var navLeftStyle = (process.platform === 'darwin' && !state.isFullScreen)
? { marginLeft: '78px' } /* OSX needs room on the left for min/max/close buttons */
: {} /* On Windows and Linux, the header is separate & underneath the title bar */
return hx` return hx`
<div class='header ${hideControls ? 'hide' : ''}'> <div class='header ${hideControls ? 'hide' : ''}'>
${getTitle()} ${getTitle()}
<div class='nav left' style=${navLeftStyle}> <div class='nav left'>
<i <i
class='icon back' class='icon back'
title='back' title='back'