Consistent parallax size; Debugging /null requests, is Spotify the culprit?

mopidy_iris/static/app.css

@@ -2696,7 +2696,8 @@ main {
   left: 220px;
   bottom: 50px;
   right: 0;
-  perspective: 100px;
+  perspective: 1000px;
+  perspective-origin: top;
   background: #181818;
   z-index: 1;
   overflow-y: scroll;
@@ -4388,15 +4389,21 @@ input[type="submit"] {
 .parallax {
   overflow: hidden;
   position: absolute;
-  top: -10%;
+  top: 0;
-  right: -10px;
+  left: 0;
-  left: -10px;
+  right: 0;
-  height: 110%;
+  height: 100%;
-  transform: translateZ(-50px) scale(2);
-  transform-origin: bottom center;
-  z-index: -1;
   max-height: 80vh;
+  transform: translateZ(-200px) scale(1.2);
+  transform-origin: top center;
+  z-index: -1;
   background-color: #323232; }
+  .parallax__inner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0; }
   .parallax__image {
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
@@ -6621,9 +6628,8 @@ main header {
 main .album-view {
   padding-left: 30%;
   position: relative; }
-  @media (min-width: 800px) {
+  main .album-view .parallax {
-    main .album-view .parallax {
+    height: 60vh; }
-      display: none; } }
   main .album-view .title h2 a:hover {
     color: #706e6c; }
   main .album-view .title .details {
@@ -6639,6 +6645,9 @@ main .album-view {
     box-sizing: border-box; }
     main .album-view .thumbnail-wrapper .thumbnail {
       max-width: 100%; }
+  @media (min-width: 800px) {
+    main .album-view .parallax {
+      display: none; } }
   @media (max-width: 800px) {
     main .album-view {
       padding-top: 0;
@@ -6671,9 +6680,8 @@ main .album-view {
 main .playlist-view {
   padding-left: 30%;
   position: relative; }
-  @media (min-width: 800px) {
+  main .playlist-view .parallax {
-    main .playlist-view .parallax {
+    height: 60vh; }
-      display: none; } }
   main .playlist-view .title h2 a:hover {
     color: #706e6c; }
   main .playlist-view .title .details {
@@ -6689,6 +6697,9 @@ main .playlist-view {
     box-sizing: border-box; }
     main .playlist-view .thumbnail-wrapper .thumbnail {
       max-width: 100%; }
+  @media (min-width: 800px) {
+    main .playlist-view .parallax {
+      display: none; } }
   @media (max-width: 800px) {
     main .playlist-view {
       padding-top: 0;

mopidy_iris/static/index.html

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

src/js/components/Parallax.js

@@ -47,7 +47,7 @@ export default class Parallax extends React.Component{
 	}
 
 	render(){
-		var class_name = "parallax";
+		var class_name = "parallax preserve-3d";
 		if (this.props.blur){
 			class_name += " parallax--blur";
 		}
@@ -62,8 +62,10 @@ export default class Parallax extends React.Component{
 
 		return (
 			<div className={class_name}>
-				<div className="parallax__image" style={style}></div>
+				<div className="parallax__inner preserve-3d">
-				<div className="parallax__overlay"></div>
+					<div className="parallax__image" style={style}></div>
+					<div className="parallax__overlay"></div>
+				</div>
 			</div>
 		);
 	}

src/js/services/spotify/actions.js

@@ -28,6 +28,10 @@ const request = (dispatch, getState, endpoint, method = 'GET', data = false) =>
             .then(
                 response => {
 
+                    if (!endpoint || enpoint == ""){
+                        console.error("No Spotify endpoint provided????", endpoint, method, data);
+                    }
+
                     // prepend the API baseurl, unless the endpoint already has it (ie pagination requests)
                     var url = 'https://api.spotify.com/v1/'+endpoint
                     if (endpoint.startsWith('https://api.spotify.com/')){

src/js/views/Playlist.js

@@ -200,7 +200,7 @@ class Playlist extends React.Component{
 		}
 
 		return (
-			<div className="view playlist-view content-wrapper">
+			<div className="view playlist-view content-wrapper preserve-3d">
 
 				<Parallax image={playlist.images ? playlist.images.huge : null} blur />
 				

src/scss/components/_parallax.scss

@@ -3,16 +3,24 @@ $parallax: 'parallax';
 .#{$parallax} {
 	overflow: hidden;
 	position: absolute;
-	top: -10%;
+	top: 0;
-	right: -10px;
+	left: 0;
-	left: -10px;
+	right: 0;
-	height: 110%;
+	height: 100%;
-	transform: translateZ(-50px) scale(2);
-	transform-origin: bottom center;
-	z-index: -1;
 	max-height: 80vh;
+	transform: translateZ(-200px) scale(1.2);
+	transform-origin: top center;
+	z-index: -1;
 	background-color: lighten(colour(dark_grey), 10%);
 
+	&__inner {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+	}
+
 	&__image {
 		@include animate(0.5s);
 		position: absolute;

src/scss/global/_core.scss

@@ -74,7 +74,8 @@ main {
 	left: 220px;
 	bottom: 50px;
 	right: 0;
-	perspective: 100px;
+	perspective: 1000px;
+	perspective-origin: top;
 	background: colour(dark_grey);
 	z-index: 1;
 	overflow-y: scroll;

src/scss/views/_album.scss

@@ -3,10 +3,8 @@ main .album-view {
 	padding-left: 30%;
 	position: relative;
 
-	@include responsive(null, $bp_medium){
+	.parallax {
-		.parallax {
+		height: 60vh;
-			display: none;
-		}
 	}
 
 	.title {
@@ -37,6 +35,12 @@ main .album-view {
 			max-width: 100%;
 		}
 	}
+	
+	@include responsive(null, $bp_medium){
+		.parallax {
+			display: none;
+		}
+	}
 
 	@include responsive($bp_medium){
 		padding-top: 0;

src/scss/views/_playlist.scss

@@ -3,10 +3,8 @@ main .playlist-view {
 	padding-left: 30%;
 	position: relative;
 
-	@include responsive(null, $bp_medium){
+	.parallax {
-		.parallax {
+		height: 60vh;
-			display: none;
-		}
 	}
 
 	.title {
@@ -38,6 +36,12 @@ main .playlist-view {
 		}
 	}
 
+	@include responsive(null, $bp_medium){
+		.parallax {
+			display: none;
+		}
+	}
+
 	@include responsive($bp_medium){
 		padding-top: 0;
 		padding-left: 10px;