forked from tanner/qotnews
Hide fullscreen button if it's not available
This commit is contained in:
parent
08d02f6013
commit
7c9c07a4cf
|
@ -73,6 +73,10 @@ class App extends React.Component {
|
|||
render() {
|
||||
const theme = this.state.theme;
|
||||
document.body.style.backgroundColor = theme ? '#000' : '#eeeeee';
|
||||
const fullScreenAvailable = document.fullscreenEnabled ||
|
||||
document.mozFullscreenEnabled ||
|
||||
document.webkitFullscreenEnabled ||
|
||||
document.msFullscreenEnabled;
|
||||
|
||||
return (
|
||||
<div className={theme}>
|
||||
|
@ -87,11 +91,13 @@ class App extends React.Component {
|
|||
</p>
|
||||
<Route path='/(|search)' component={Search} />
|
||||
<Route path='/(|search)' component={Submit} />
|
||||
{fullScreenAvailable &&
|
||||
<Route path='/(|search)' render={() => !document.fullscreenElement ?
|
||||
<button className='fullscreen' onClick={() => this.goFullScreen()}>Enter Fullscreen</button>
|
||||
:
|
||||
<button className='fullscreen' onClick={() => this.exitFullScreen()}>Exit Fullscreen</button>
|
||||
} />
|
||||
}
|
||||
</div>
|
||||
|
||||
<Route path='/' exact render={(props) => <Feed {...props} updateCache={this.updateCache} />} />
|
||||
|
|
|
@ -43,6 +43,7 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dark .story-text video,
|
||||
.dark .story-text img {
|
||||
filter: brightness(50%);
|
||||
}
|
||||
|
|
|
@ -59,6 +59,7 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.red .story-text video,
|
||||
.red .story-text img {
|
||||
filter: grayscale(100%) brightness(20%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user