diff --git a/src/js/components/DebugInfo.js b/src/js/components/DebugInfo.js index 607bce7b..d584b1d3 100755 --- a/src/js/components/DebugInfo.js +++ b/src/js/components/DebugInfo.js @@ -66,7 +66,7 @@ class DebugInfo extends React.Component{ Playlists: {this.props.ui.playlists ? Object.keys(this.props.ui.playlists).length : '0'}
- Tracks: {this.props.ui.tracks ? Object.keys(this.props.ui.tracks).length : '0'} ({this.props.ui.selected_tracks.length} selected) + Tracks: {this.props.ui.tracks ? Object.keys(this.props.ui.tracks).length : '0'}
Users: {this.props.ui.users ? Object.keys(this.props.ui.users).length : '0'} @@ -90,6 +90,16 @@ class DebugInfo extends React.Component{
Touch: {helpers.isTouchDevice() ? 'on' : 'off'}
+
+ Selected tracks: {this.props.ui.selected_tracks.length}
+ { + this.props.ui.selected_tracks.map((track_key, index) => { + return ( +
{track_key}
+ ) + }) + } +
{this.renderLoadQueue()}
); diff --git a/src/js/components/Parallax.js b/src/js/components/Parallax.js index 1a569c31..3aeb8619 100755 --- a/src/js/components/Parallax.js +++ b/src/js/components/Parallax.js @@ -114,7 +114,6 @@ export default class Parallax extends React.Component{ } updateCanvas(image = false){ - console.log(image) var canvasWidth = $('.parallax').outerWidth(); var canvasHeight = $('.parallax').outerHeight(); if (this.state.canvas.width != canvasWidth || this.state.canvas.height != canvasHeight){ @@ -133,10 +132,10 @@ export default class Parallax extends React.Component{ var canvasDOM = document.getElementById('parallax-canvas') var context = canvasDOM.getContext('2d') - // Fill the background with mid-gret + // Fill the background with mid-grey context.beginPath() context.rect(0, 0, this.state.canvas.width, this.state.canvas.height) - context.fillStyle = "#a3a19f" + context.fillStyle = "#121212" context.fill() if (image){ @@ -172,8 +171,8 @@ export default class Parallax extends React.Component{ // Construct a gradient overlay context.rect(0, 0, this.state.canvas.width, this.state.canvas.height) let gradient = context.createLinearGradient(0, 0, 0, this.state.canvas.height) - gradient.addColorStop(0, 'rgba(38,39,40,0)') - gradient.addColorStop(0.9, 'rgba(38,39,40,1)') + gradient.addColorStop(0, 'rgba(24,24,24,0)') + gradient.addColorStop(0.9, 'rgba(24,24,24,1)') context.fillStyle = gradient // And now drop it into place diff --git a/src/js/views/User.js b/src/js/views/User.js index de8c3483..b6d2f1a1 100755 --- a/src/js/views/User.js +++ b/src/js/views/User.js @@ -77,9 +77,8 @@ class User extends React.Component{
- +
-

{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }

    diff --git a/src/scss/components/_debug.scss b/src/scss/components/_debug.scss index a6952131..2c7c8c87 100755 --- a/src/scss/components/_debug.scss +++ b/src/scss/components/_debug.scss @@ -3,12 +3,13 @@ font-size: 10px; position: fixed; top: 10px; - right: 10px; + right: 1vw; border-radius: 3px; z-index: 96; padding: 10px; - background: rgba(10, 10, 10, 0.7); + background: rgba(100,100,100, 0.8); color: $white; pointer-events: none; - width: 200px; + width: 220px; + max-width: 98vw; } \ No newline at end of file diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss index 2167d4b8..410dcbdb 100755 --- a/src/scss/components/_notifications.scss +++ b/src/scss/components/_notifications.scss @@ -12,7 +12,7 @@ @include fadein(); display: block; position: relative; - background: $darkest_grey; + background: $blue; padding: 16px 40px 16px 22px; margin: 10px 0 0 0; color: $white; @@ -70,7 +70,7 @@ display: block; content: ''; background: $white; - opacity: 0.1; + opacity: 0.15; animation: slideloader 1s infinite; top: 0; right: 0; diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index c822b1b6..53fc357f 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -7,8 +7,8 @@ aside{ z-index: 96; width: 219px; overflow: hidden; - background: darken($dark_grey, 1%); - border-right: 1px solid lighten($dark_grey, 5%); + background: $darkest_grey; + border-right: 1px solid lighten($dark_grey, 2%); color: $white; .liner { diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index b6fd003a..04fd8e54 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -5,8 +5,8 @@ $faint_grey: #f4f2f0; $light_grey: #cecac4; $mid_grey: #a3a19f; $grey: #383734; -$dark_grey: #262728; -$darkest_grey: #171819; +$dark_grey: #181818; +$darkest_grey: #121212; $secondary_grey: #888888; $white: #FFFFFF; $black: #000000; diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index b2acbf05..1fc4a05b 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -25,7 +25,6 @@ padding: 35vh 40px 0; h1 { - color: $white; padding-bottom: 25px; font-size: 4rem; } diff --git a/src/scss/views/_user.scss b/src/scss/views/_user.scss index d0e841e8..aad0814b 100755 --- a/src/scss/views/_user.scss +++ b/src/scss/views/_user.scss @@ -17,22 +17,11 @@ .liner { position: relative; z-index: 1; - padding: 30vh 40px 90px 350px; - - .thumbnail { - position: absolute; - z-index: 2; - left: 40px; - bottom: 40px; - max-width: 264px; - - .image { - background-color: $darkest_grey; - } - } + padding: 35vh 40px 0; h1 { - color: $white; + padding-bottom: 15px; + font-size: 4rem; } h2 {