All the knock-ons from scrolling a div instead of the HTML...

This commit is contained in:
James Barnsley
2018-10-24 16:56:06 +13:00
parent 54344f80e3
commit 00811f7084
17 changed files with 14081 additions and 10760 deletions

View File

@ -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>
);
}

View File

@ -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);
}

View File

@ -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} />

View File

@ -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

View File

@ -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,

View File

@ -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

View File

@ -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>

View File

@ -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);
}