All the knock-ons from scrolling a div instead of the HTML...
This commit is contained in:
@ -72,8 +72,11 @@ class App extends React.Component{
|
||||
ReactGA.pageview(window.location.hash);
|
||||
}
|
||||
|
||||
// Scroll to top of <main>
|
||||
document.getElementById('main').scrollTo(0, 0);
|
||||
|
||||
// Hide our sidebar
|
||||
this.props.uiActions.toggleSidebar(false )
|
||||
this.props.uiActions.toggleSidebar(false);
|
||||
|
||||
// Unselect any tracks
|
||||
this.props.uiActions.setSelectedTracks([]);
|
||||
@ -316,32 +319,32 @@ class App extends React.Component{
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<ErrorBoundary>
|
||||
|
||||
<div className="body">
|
||||
<Sidebar />
|
||||
<PlaybackControls />
|
||||
<main id="main">
|
||||
|
||||
<div className="body">
|
||||
<Sidebar />
|
||||
<PlaybackControls />
|
||||
<main id="main">
|
||||
<ErrorBoundary>
|
||||
{this.props.children}
|
||||
</main>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<ContextMenu />
|
||||
<Dragger />
|
||||
<Notifications
|
||||
uiActions={this.props.uiActions}
|
||||
spotifyActions={this.props.spotifyActions}
|
||||
geniusActions={this.props.geniusActions}
|
||||
lastfmActions={this.props.lastfmActions}
|
||||
snapcastActions={this.props.snapcastActions}
|
||||
notifications={this.props.notifications}
|
||||
processes={this.props.processes}
|
||||
broadcasts={this.props.broadcasts}
|
||||
/>
|
||||
<ContextMenu />
|
||||
<Dragger />
|
||||
<Notifications
|
||||
uiActions={this.props.uiActions}
|
||||
spotifyActions={this.props.spotifyActions}
|
||||
geniusActions={this.props.geniusActions}
|
||||
lastfmActions={this.props.lastfmActions}
|
||||
snapcastActions={this.props.snapcastActions}
|
||||
notifications={this.props.notifications}
|
||||
processes={this.props.processes}
|
||||
broadcasts={this.props.broadcasts}
|
||||
/>
|
||||
|
||||
{this.props.debug_info ? <DebugInfo /> : null}
|
||||
{this.props.debug_info ? <DebugInfo /> : null}
|
||||
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,11 +11,11 @@ export default class LazyLoadListener extends React.Component{
|
||||
loadKey: this.props.loadKey
|
||||
}
|
||||
|
||||
this.element = document.getElementById('main');
|
||||
this.handleScroll = helpers.throttle(this.handleScroll.bind(this), 50);
|
||||
}
|
||||
|
||||
componentWillMount(){
|
||||
componentDidMount(){
|
||||
this.element = document.getElementById('main');
|
||||
this.element.addEventListener("scroll", this.handleScroll, false);
|
||||
}
|
||||
|
||||
|
||||
@ -291,8 +291,8 @@ class Artist extends React.Component{
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="view artist-view">
|
||||
<div className="intro">
|
||||
<div className="view artist-view preserve-3d">
|
||||
<div className="intro preserve-3d">
|
||||
|
||||
<Parallax image={image} theme={this.props.theme} disabled={this.props.disable_parallax} />
|
||||
|
||||
|
||||
@ -160,7 +160,7 @@ class Queue extends React.Component{
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="view queue-view">
|
||||
<div className="view queue-view preserve-3d">
|
||||
<Header className="overlay" options={options} uiActions={this.props.uiActions}>
|
||||
<Icon name="play_arrow" type="material" />
|
||||
Now playing
|
||||
|
||||
@ -46,8 +46,8 @@ class DiscoverFeatured extends React.Component{
|
||||
renderIntro(playlist = null){
|
||||
if (playlist){
|
||||
return (
|
||||
<div className="intro">
|
||||
<Parallax image={playlist.images ? playlist.images.large : null} blur theme={this.props.theme} disabled={this.props.disable_parallax} />
|
||||
<div className="intro preserve-3d">
|
||||
<Parallax image={playlist.images ? playlist.images.large : null} blur />
|
||||
<div className="content cf">
|
||||
<Link
|
||||
to={global.baseURL+'playlist/'+playlist.uri}
|
||||
@ -111,7 +111,7 @@ class DiscoverFeatured extends React.Component{
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="view discover-featured-view">
|
||||
<div className="view discover-featured-view preserve-3d">
|
||||
<Header className="overlay" options={options}>
|
||||
<Icon name="star" type="material" />
|
||||
Featured playlists
|
||||
@ -125,16 +125,8 @@ class DiscoverFeatured extends React.Component{
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Export our component
|
||||
*
|
||||
* We also integrate our global store, using connect()
|
||||
**/
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
disable_parallax: state.ui.disable_parallax,
|
||||
theme: state.ui.theme,
|
||||
load_queue: state.ui.load_queue,
|
||||
featured_playlists: state.spotify.featured_playlists,
|
||||
|
||||
@ -59,7 +59,7 @@ class DiscoverNewReleases extends React.Component{
|
||||
renderIntro(album = null){
|
||||
if (album){
|
||||
return (
|
||||
<div className="intro">
|
||||
<div className="intro preserve-3d">
|
||||
<Parallax image={album.images ? album.images.large : null} blur />
|
||||
<div className="content cf">
|
||||
<Link
|
||||
@ -83,8 +83,8 @@ class DiscoverNewReleases extends React.Component{
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div className="intro">
|
||||
<Parallax disabled={this.props.disable_parallax} />
|
||||
<div className="intro preserve-3d">
|
||||
<Parallax />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -127,7 +127,7 @@ class DiscoverNewReleases extends React.Component{
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="view discover-new-releases-view">
|
||||
<div className="view discover-new-releases-view preserve-3d">
|
||||
<Header className="overlay" options={options}>
|
||||
<Icon name="new_releases" type="material" />
|
||||
New releases
|
||||
|
||||
@ -444,7 +444,7 @@ class Discover extends React.Component{
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="content-wrapper recommendations-results cf">
|
||||
<div className="content-wrapper recommendations-results">
|
||||
|
||||
<section className="col col--w70 tracks">
|
||||
<h4>
|
||||
@ -500,10 +500,10 @@ class Discover extends React.Component{
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="view discover-view">
|
||||
<div className="intro">
|
||||
<div className="view discover-view preserve-3d">
|
||||
<div className="intro preserve-3d">
|
||||
|
||||
<Parallax image="assets/backgrounds/discover.jpg" theme={this.props.theme} disabled={this.props.disable_parallax} />
|
||||
<Parallax image="assets/backgrounds/discover.jpg" />
|
||||
|
||||
<div className="liner">
|
||||
<h1>Explore new music</h1>
|
||||
|
||||
@ -14,12 +14,12 @@ class Modal extends React.Component{
|
||||
}
|
||||
|
||||
componentWillMount(){
|
||||
$('body').addClass('no-scrollbars');
|
||||
$('body').addClass('modal-open');
|
||||
window.addEventListener("keyup", this.handleKeyUp, false);
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
$('body').removeClass('no-scrollbars');
|
||||
$('body').removeClass('modal-open');
|
||||
window.removeEventListener("keyup", this.handleKeyUp, false);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user