don't calculate styles in JavaScript whenever possible
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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(' ')}'>
|
||||
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user