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{
- - { this.props.album.tracks_total } tracks,
+ -
+ { this.props.album.tracks_total } tracks,
+ { this.props.album.tracks ? : null }
+
{ this.props.album.release_date ? - Released
: null }
- {helpers.uriSource( this.props.params.uri )} playlist
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{
- { this.props.artist.followers ? - { this.props.artist.followers.total.toLocaleString() } followers
: null }
- { this.props.artist.popularity ? - { this.props.artist.popularity }% popularity
: null }
- { scheme == 'local' ? - { this.props.artist.albums.length.toLocaleString() } albums
: null }
+ -
+ { this.props.artist.followers ? { this.props.artist.followers.total.toLocaleString() } followers, : null }
+ { this.props.artist.popularity ? { this.props.artist.popularity }% popularity : null }
+ { scheme == 'local' ? { this.props.artist.listeners.toLocaleString() } listeners : null }
+
{ scheme == 'spotify' ? - Spotify artist
: null }
{ scheme == 'local' ? - Local artist
: null }
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{
- - { this.props.playlist.tracks_total } tracks,
+ -
+ { this.props.playlist.tracks_total } tracks,
+ { this.props.playlist.tracks ? : null }
+
{ this.props.playlist.last_modified ? - Updated ago
: null }
{ this.props.playlist.followers ? - {this.props.playlist.followers.total.toLocaleString()} followers
: null }
{ scheme == 'spotify' && this.props.playlist.owner ? - By {this.props.playlist.owner.id} { !this.props.playlist.public ? : null }
: 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