secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

66
mopidy_iris/static/app.css
View File

@ -2678,24 +2678,48 @@ html {
html .light-theme {
color: #121212; }
body.touch-dragging, body.no-scrollbars {
overflow-y: hidden; }
@media (max-width: 800px) {
body.context-menu-open {
overflow-y: hidden; } }
body {
transform: translateZ(0px);
transform-style: preserve-3d; }
body.touch-dragging, body.no-scrollbars {
overflow-y: hidden; }
@media (max-width: 800px) {
body.context-menu-open {
overflow-y: hidden; } }
main {
position: absolute;
position: fixed;
top: 0;
left: 220px;
bottom: 50px;
right: 0;
overflow-y: scroll;
overflow-x: hidden;
perspective: 2px;
transform-style: preserve-3d;
background: #181818; }
perspective: 100px;
background: #181818;
scroll-behavior: smooth;
z-index: 1;
/* All children between <main> and the parallax need this to work in Firefox */ }
.notouch main::-webkit-scrollbar {
width: 8px;
height: 8px; }
.notouch main::-webkit-scrollbar-track {
background: #181818; }
.notouch main::-webkit-scrollbar-thumb {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: #383734; }
.notouch main::-webkit-scrollbar-thumb:hover {
background: #a3a19f; }
.modal-open main {
left: 0;
bottom: 0;
z-index: 999; }
main,
main .preserve-3d {
transform-style: preserve-3d; }
.light-theme main {
background: #FFFFFF; }
main .content-wrapper {
@ -4357,7 +4381,7 @@ input[type="submit"] {
right: -10px;
left: -10px;
height: 100%;
transform: translateZ(-0.6px) scale(1.33334);
transform: translateZ(-50px) scale(2);
transform-origin: bottom center;
z-index: -1;
max-height: 80vh; }
@ -4673,7 +4697,8 @@ $icon-websocket: \e920;
left: 0;
height: 50px;
background: #3e3e3e;
color: #FFFFFF; }
color: #FFFFFF;
transform-style: preserve-3d; }
.playback-controls .current-track {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
@ -4888,10 +4913,10 @@ $icon-websocket: \e920;
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100vw;
height: 100vh;
z-index: 99; }
.playback-controls.expanded {
height: 135px; }
@ -5068,7 +5093,8 @@ aside {
background: #121212;
border-right: 1px solid #1d1d1d;
color: #FFFFFF;
box-sizing: border-box; }
box-sizing: border-box;
transform-style: preserve-3d; }
.light-theme aside {
background: #f8f7f6;
border-right: none; }
@ -7173,14 +7199,10 @@ main .track-view {
animation-duration: 0.2s;
animation-timing-function: linear;
animation-iteration-count: 1;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
position: relative;
background: #0d0d0d;
overflow-y: auto; }
overflow-y: auto;
min-height: 100%; }
@keyframes fadein {
0% {

24621
mopidy_iris/static/app.js
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1540116540";
var build = "1540323451";
var version = "3.28.1";
// Construct the script tag

49
src/js/App.js
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>
);
}

4
src/js/components/LazyLoadListener.js
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);
}

4
src/js/views/Artist.js
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} />

2
src/js/views/Queue.js
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

14
src/js/views/discover/DiscoverFeatured.js
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,

8
src/js/views/discover/DiscoverNewReleases.js
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

8
src/js/views/discover/DiscoverRecommendations.js
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>

4
src/js/views/modals/Modal.js
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);
}

2
src/scss/components/_images.scss
View File

@ -75,7 +75,7 @@
right: -10px;
left: -10px;
height: 100%;
transform: translateZ(-0.6px) scale(1.33334);
transform: translateZ(-50px) scale(2);
transform-origin: bottom center;
z-index: -1;
max-height: 80vh;

5
src/scss/components/_playback-controls.scss
View File

@ -8,6 +8,7 @@
height: 50px;
background: lighten(colour(dark_grey), 15%);
color: colour(white);
transform-style: preserve-3d;
.current-track {
@include animate();
@ -253,10 +254,10 @@
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100vw;
height: 100vh;
z-index: 99;
}
}

1
src/scss/components/_sidebar.scss
View File

@ -11,6 +11,7 @@ aside{
border-right: 1px solid lighten(colour(dark_grey), 2%);
color: colour(white);
box-sizing: border-box;
transform-style: preserve-3d;
.light-theme & {
background: lighten(colour(faint_grey), 2%);

41
src/scss/global/_core.scss
View File

@ -49,6 +49,8 @@ html {
}
body {
transform: translateZ(0px);
transform-style: preserve-3d;
&.touch-dragging,
&.no-scrollbars {
@ -63,16 +65,49 @@ body {
}
main {
position: absolute;
position: fixed;
top: 0;
left: 220px;
bottom: 50px;
right: 0;
overflow-y: scroll;
overflow-x: hidden;
perspective: 2px;
transform-style: preserve-3d;
perspective: 100px;
background: colour(dark_grey);
scroll-behavior: smooth;
z-index: 1;
.notouch & {
&::-webkit-scrollbar{
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background: colour(dark_grey);
}
&::-webkit-scrollbar-thumb {
@include animate();
background: colour(grey);
&:hover {
background: colour(mid_grey);
}
}
}
.modal-open & {
left: 0;
bottom: 0;
z-index: 999;
}
/* All children between <main> and the parallax need this to work in Firefox */
&,
& .preserve-3d {
transform-style: preserve-3d;
}
.light-theme & {
background: colour(white);

8
src/scss/views/_modal.scss
View File

@ -1,14 +1,10 @@
.modal {
@include fadein();
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
position: relative;
background: darken(colour(darkest_grey), 2%);
overflow-y: auto;
min-height: 100%;
.light-theme & {
color: colour(white);