From 48e00ed18ef913cc677bdbddbdb363b92a817f64 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Mon, 28 Nov 2016 07:27:30 +1300
Subject: [PATCH] Mobile view; Browser dragging issues

---
 src/js/components/Dragger.js      |  9 +++++++++
 src/js/services/ui/reducer.js     |  2 +-
 src/js/views/Album.js             |  5 ++++-
 src/js/views/Artist.js            |  8 +++++---
 src/js/views/Playlist.js          |  5 ++++-
 src/scss/components/_dragger.scss |  7 ++++++-
 src/scss/components/_lists.scss   | 10 +++++++++-
 src/scss/components/_sidebar.scss |  4 ++--
 src/scss/global/_core.scss        | 20 ++++++++++++++++++++
 src/scss/global/_forms.scss       | 21 +++++++++++++++++++++
 src/scss/views/_artist.scss       |  4 ++++
 src/scss/views/_queue.scss        |  2 +-
 src/scss/views/_settings.scss     |  6 ++++++
 13 files changed, 92 insertions(+), 11 deletions(-)

diff --git a/src/js/components/Dragger.js b/src/js/components/Dragger.js
index b4e79a4e..1f706fda 100755
--- a/src/js/components/Dragger.js
+++ b/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()
 		}
diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js
index 1e51db41..112095af 100755
--- a/src/js/services/ui/reducer.js
+++ b/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':
diff --git a/src/js/views/Album.js b/src/js/views/Album.js
index 7c8fa20f..5e322cf1 100755
--- a/src/js/views/Album.js
+++ b/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>
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index a5e632fc..935a7f80 100755
--- a/src/js/views/Artist.js
+++ b/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 }
-							{ this.props.artist.popularity ? <li>{ this.props.artist.popularity }% popularity</li> : null }
-							{ scheme == 'local' ? <li>{ this.props.artist.albums.length.toLocaleString() } albums</li> : null }
+							<li>
+								{ this.props.artist.followers ? <span>{ this.props.artist.followers.total.toLocaleString() } followers,&nbsp;</span> : 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>
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index effde6a4..25e13158 100755
--- a/src/js/views/Playlist.js
+++ b/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 }
diff --git a/src/scss/components/_dragger.scss b/src/scss/components/_dragger.scss
index 50fb64b1..37392423 100755
--- a/src/scss/components/_dragger.scss
+++ b/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;
 		}
 	}
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index f7730de6..ee7fb6e0 100755
--- a/src/scss/components/_lists.scss
+++ b/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;
+			}
 		}
 
 	}
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 55694407..3142dfa9 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -22,8 +22,8 @@ aside{
 	}
 
 	@include responsive( $bp_medium ){
-		width: 50%;
-		left: -50%;
+		width: 50vw;
+		left: -50vw;
 
 		.sidebar-open & {
 			left: 0px;
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index d6334aac..793c0ddf 100755
--- a/src/scss/global/_core.scss
+++ b/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; }
+
+}
\ No newline at end of file
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index d2f9ce22..231640d9 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -218,4 +218,25 @@ 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;
+			}
+		}
+
+	}
 }
\ No newline at end of file
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index b9b72765..b45b6501 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -70,6 +70,10 @@
 				float: left;
 				margin-right: 20px;
 			}
+
+			.details {
+				padding-top: 6px;
+			}
 		}
 
 	}
diff --git a/src/scss/views/_queue.scss b/src/scss/views/_queue.scss
index a0563114..72a291de 100755
--- a/src/scss/views/_queue.scss
+++ b/src/scss/views/_queue.scss
@@ -3,7 +3,7 @@
 
 	.player {
 		text-align: center;
-		padding: 40px 0 10px;
+		padding: 40px 20px 10px;
 
 		.artwork,
 		.controls a {
diff --git a/src/scss/views/_settings.scss b/src/scss/views/_settings.scss
index 5034be8b..6a4e620c 100755
--- a/src/scss/views/_settings.scss
+++ b/src/scss/views/_settings.scss
@@ -18,4 +18,10 @@
 			padding: 2px 14px;
 		}
 	}
+
+	@include responsive( $bp_medium ){
+		section {
+			padding: 20px;
+		}
+	}
 }
\ No newline at end of file