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

View File

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

View File

@@ -8,14 +8,11 @@ function Header (state, dispatch) {
var hideControls = state.url === '/player' &&
state.video.mouseStationarySince !== 0 &&
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`
<div class='header ${hideControls ? 'hide' : ''}'>
${getTitle()}
<div class='nav left' style=${navLeftStyle}>
<div class='nav left'>
<i
class='icon back'
title='back'