diff --git a/src/js/components/ArtistSentence.js b/src/js/components/ArtistSentence.js index cbe637cb..3fb2a80d 100755 --- a/src/js/components/ArtistSentence.js +++ b/src/js/components/ArtistSentence.js @@ -22,8 +22,8 @@ export default class ArtistSentence extends React.Component{ } var link = '/artist/' + artist.uri; return ( - - { artist.name }{ separator } + + { artist.name }{ separator } ); }) diff --git a/src/js/components/PlaylistListItem.js b/src/js/components/PlaylistListItem.js index 1484cd05..cecf3fdb 100755 --- a/src/js/components/PlaylistListItem.js +++ b/src/js/components/PlaylistListItem.js @@ -15,7 +15,7 @@ export default class PlaylistListItem extends React.Component{ renderOwner(){ if( !this.props.item.owner ) return null; return ( - + { this.props.item.owner.id } ); diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js index 7bfbcb70..867b02c0 100755 --- a/src/js/components/SpotifyAuthenticationFrame.js +++ b/src/js/components/SpotifyAuthenticationFrame.js @@ -68,6 +68,7 @@ class SpotifyAuthenticationFrame extends React.Component{ return ( ); @@ -92,6 +93,7 @@ class SpotifyAuthenticationFrame extends React.Component{ return ( ); diff --git a/src/js/components/VolumeSlider.js b/src/js/components/VolumeSlider.js index 459dcaa7..35943ca3 100755 --- a/src/js/components/VolumeSlider.js +++ b/src/js/components/VolumeSlider.js @@ -15,21 +15,24 @@ export default class VolumeSlider extends React.Component{ this.setState({ volume: nextProps.volume }) } - handleChange(e){ - var newVolume = parseInt(e.target.value); - if( this.props.volume != newVolume ){ - this.props.onChange( newVolume ) + handleClick(e){ + var slider = e.target; + if( slider.className != 'slider' ) slider = slider.parentElement; + + var sliderX = e.clientX - slider.getBoundingClientRect().left; + var sliderWidth = slider.getBoundingClientRect().width; + var percent = parseInt( sliderX / sliderWidth * 100 ); + + if( this.props.volume != percent ){ + this.props.onChange( percent ) } - } + } render(){ return ( - this.handleChange(e) } /> +
this.handleClick(e) } > +
+
); } } \ No newline at end of file diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js index c7ac58fe..9d06f146 100755 --- a/src/js/views/Settings.js +++ b/src/js/views/Settings.js @@ -52,11 +52,17 @@ class Settings extends React.Component{
this.setMopidyConfig()}>
@@ -65,11 +71,17 @@ class Settings extends React.Component{
this.setSpotifyConfig()}>
diff --git a/src/js/views/discover/DiscoverFeatured.js b/src/js/views/discover/DiscoverFeatured.js index 3969e2e1..8fcfba13 100755 --- a/src/js/views/discover/DiscoverFeatured.js +++ b/src/js/views/discover/DiscoverFeatured.js @@ -23,7 +23,7 @@ class DiscoverFeatured extends React.Component{ return (
- { this.props.spotify.featuredPlaylists ? : null } + { this.props.spotify.featured_playlists ? : null }
); } diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index 033590e4..0d27fbf2 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -92,7 +92,7 @@ aside{ display: block; @include one_line_text; - .artist a { + .artist { color: inherit; text-decoration: none; border-bottom: 1px dotted transparent; diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index b001531e..51356df5 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -45,6 +45,10 @@ main { padding-bottom: 4px; border-bottom: 1px solid #000000; } + + &:not(:first-child){ + padding-top: 40px; + } } .no-top-padding { padding-top: 0; } diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 8f82eb81..47dbe842 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -1,14 +1,87 @@ -input { - padding: 5px 8px; - border: 1px solid #000000; +button, +textarea, +input[type="text"], +input[type="email"], +input[type="number"], +input[type="email"], +input[type="date"] { + padding: 10px 14px; + background: #FFFFFF; + color: #000000; + font-family: "Archivo Narrow", Helvetica, Arial, sans-serif; + font-size: 14px; } +.button, button, input[type="button"], input[type="submit"] { - padding: 5px 8px; - background: #000000; - color: #FFFFFF; + @include animate(); + padding: 10px 20px; border: 0; -} \ No newline at end of file + color: #000000; + background: $light_grey; + + &:hover{ + cursor: pointer; + background: darken( $light_grey, 6%); + } + + &.primary { + background: $turquoise; + color: #FFFFFF; + &:hover { + background: darken( $turquoise, 6% ); + } + } + + &.confirming, + &.destructive { + background: $red; + color: #FFFFFF; + &:hover { + background: darken( $red, 6% ); + } + } + + &[disabled], + &[disabled="disabled"] { + background: $light_grey !important; + color: $mid_grey !important; + cursor: not-allowed !important; + } +} + +label { + display: block; + padding-bottom: 8px; + @include clearfix; + + .label { + display: block; + padding-top: 10px; + width: 15%; + float: left; + } + + input { + width: 60%; + } +} + +.slider { + margin: 10px 0; + height: 5px; + position: relative; + background: rgba(255,255,255,0.3); + cursor: pointer; + + .progress { + left: 0; + top: 0; + height: 100%; + background: $turquoise; + pointer-events: none; + } +} diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index d020e7ac..f9a75519 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -1,8 +1,10 @@ $turquoise: #08d58f; $light_grey: #DDDDDD; +$mid_grey: #AAAAAA; $dark_grey: #333333; $secondary_grey: #888888; +$red: #cf2d2d; @mixin one_line_text { white-space: nowrap;