Mobile view; Browser dragging issues

src/js/components/Dragger.js

@@ -46,6 +46,15 @@ class Dragger extends React.Component{
 				position_y: e.clientY
 			})
 
+			var dropzones = document.getElementsByClassName('dropzone')
+			for( var i = 0; i < dropzones.length; i++ ){
+				dropzones[i].classList.remove('hover')
+			}
+
+			if( e.target.classList.contains('dropzone') && !e.target.classList.contains('hover') ){
+				e.target.className += ' hover'
+			}
+
 			// if not already, activate
 			if( !this.props.dragger.active ) this.props.uiActions.dragActive()
 		}

src/js/services/ui/reducer.js

@@ -171,7 +171,7 @@ export default function reducer(ui = {}, action){
             var images = ui.artist.images
             if( images.length <= 0 ) images = action.data.image
             
-            var artist = Object.assign({}, ui.artist, { images: images, bio: action.data.bio }, )
+            var artist = Object.assign({}, ui.artist, { images: images, bio: action.data.bio, listeners: parseInt(action.data.stats.listeners), on_tour: action.data.ontour }, )
             return Object.assign({}, ui, { artist: artist });
 
         case 'SPOTIFY_ARTIST_LOADED':

src/js/views/Album.js

@@ -81,7 +81,10 @@ class Album extends React.Component{
 					</div>
 
 					<ul className="details">
-						<li>{ this.props.album.tracks_total } tracks, <Dater type="total-time" data={this.props.album.tracks} /></li>
+						<li>
+							{ this.props.album.tracks_total } tracks, 
+							{ this.props.album.tracks ? <Dater type="total-time" data={this.props.album.tracks} /> : null }
+						</li>
 						{ this.props.album.release_date ? <li>Released <Dater type="date" data={ this.props.album.release_date } /></li> : null }
 						<li><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /> {helpers.uriSource( this.props.params.uri )} playlist</li>	
 					</ul>

src/js/views/Artist.js

@@ -168,9 +168,11 @@ class Artist extends React.Component{
 						</div>
 
 						<ul className="details">
-							{ this.props.artist.followers ? <li>{ this.props.artist.followers.total.toLocaleString() } followers</li> : null }
+							<li>
-							{ this.props.artist.popularity ? <li>{ this.props.artist.popularity }% popularity</li> : null }
+								{ this.props.artist.followers ? <span>{ this.props.artist.followers.total.toLocaleString() } followers,&nbsp;</span> : null }
-							{ scheme == 'local' ? <li>{ this.props.artist.albums.length.toLocaleString() } albums</li> : null }
+								{ this.props.artist.popularity ? <span>{ this.props.artist.popularity }% popularity</span> : null }
+								{ scheme == 'local' ? <span>{ this.props.artist.listeners.toLocaleString() } listeners</span> : null }
+							</li>
 							{ scheme == 'spotify' ? <li><FontAwesome name='spotify' /> Spotify artist</li> : null }
 							{ scheme == 'local' ? <li><FontAwesome name='folder' /> Local artist</li> : null }
 						</ul>

src/js/views/Playlist.js

@@ -144,7 +144,10 @@ class Playlist extends React.Component{
 					</div>
 
 					<ul className="details">
-						<li>{ this.props.playlist.tracks_total } tracks, <Dater type="total-time" data={this.props.playlist.tracks} /></li>
+						<li>
+							{ this.props.playlist.tracks_total } tracks, 
+							{ this.props.playlist.tracks ? <Dater type="total-time" data={this.props.playlist.tracks} /> : null }
+						</li>
 						{ this.props.playlist.last_modified ? <li>Updated <Dater type="ago" data={this.props.playlist.last_modified} /> ago</li> : null }
 						{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
 						{ scheme == 'spotify' && this.props.playlist.owner ? <li>By <Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link> &nbsp;{ !this.props.playlist.public ? <FontAwesome name="lock" /> : null }</li> : null }

src/scss/components/_dragger.scss

@@ -3,6 +3,11 @@
 	cursor: grabbing !important;
 	cursor: -moz-grabbing !important;
 	cursor: -webkit-grabbing !important;
+	-webkit-touch-callout: none;
+	  -webkit-user-select: none;
+	     -moz-user-select: none;
+	      -ms-user-select: none;
+	          user-select: none;
 }
 
 .dragger {
@@ -40,7 +45,7 @@
 			width: 32px;
 		}
 
-		&:hover {
+		&.hover {
 			background: $turquoise;
 		}
 	}

src/scss/components/_lists.scss

@@ -64,10 +64,13 @@
 		:root .dragging &:hover {
 			border-top: 3px solid $blue;
 			margin-top: -3px;
+			background: transparent;
 		}
 
 
-		@include responsive( 849px ){
+		@include responsive( $bp_medium ){
+			padding: 7px 10px 7px 30px;
+
 			.col {
 				&.name { width: 50%; }
 				&.artists { width: 50%; }
@@ -78,6 +81,11 @@
 			&.header { 
 				display: none; 
 			}
+
+			.select-state {
+				top: 11px;
+				left: 10px;
+			}
 		}
 
 	}

src/scss/components/_sidebar.scss

@@ -22,8 +22,8 @@ aside{
 	}
 
 	@include responsive( $bp_medium ){
-		width: 50%;
+		width: 50vw;
-		left: -50%;
+		left: -50vw;
 
 		.sidebar-open & {
 			left: 0px;

src/scss/global/_core.scss

@@ -59,6 +59,18 @@ main {
 	section.list-wrapper {
 		padding: 20px 0;
 	}
+
+	@include responsive( $bp_medium ){
+
+		section.grid-wrapper,
+		section.text-wrapper {
+			padding: 20px;
+		}
+
+		section.list-wrapper {
+			padding: 10px 0;
+		}
+	}
 }
 
 h1 {
@@ -179,3 +191,11 @@ footer {
 		color: #FFFFFF;
 	}
 }
+
+
+@include responsive( $bp_medium ){
+	
+	.right-padding {		padding-right: 20px; }
+	.left-padding {			padding-left: 20px; }
+
+}

src/scss/global/_forms.scss

@@ -219,3 +219,24 @@ input[type="submit"] {
 		}
 	}
 }
+
+@include responsive( $bp_medium ){
+	.field {
+
+		.name {
+			float: none;
+			width: auto;
+			padding: 0 0 4px 0;
+		}
+
+		.input {
+			float: none;
+			width: auto;
+
+			.text {
+				padding: 0;
+			}
+		}
+
+	}
+}

src/scss/views/_artist.scss

@@ -70,6 +70,10 @@
 				float: left;
 				margin-right: 20px;
 			}
+
+			.details {
+				padding-top: 6px;
+			}
 		}
 
 	}

src/scss/views/_queue.scss

@@ -3,7 +3,7 @@
 
 	.player {
 		text-align: center;
-		padding: 40px 0 10px;
+		padding: 40px 20px 10px;
 
 		.artwork,
 		.controls a {

src/scss/views/_settings.scss

@@ -18,4 +18,10 @@
 			padding: 2px 14px;
 		}
 	}
+
+	@include responsive( $bp_medium ){
+		section {
+			padding: 20px;
+		}
+	}
 }