diff --git a/Screenshots/discover.jpg b/Screenshots/discover.jpg new file mode 100755 index 00000000..ce24d300 Binary files /dev/null and b/Screenshots/discover.jpg differ diff --git a/src/assets/backgrounds/discover.jpg b/src/assets/backgrounds/discover.jpg index ce24d300..ffaa3120 100755 Binary files a/src/assets/backgrounds/discover.jpg and b/src/assets/backgrounds/discover.jpg differ diff --git a/src/js/components/AutocompleteField.js b/src/js/components/AddSeedField.js similarity index 60% rename from src/js/components/AutocompleteField.js rename to src/js/components/AddSeedField.js index 729b313b..e36cfb0a 100755 --- a/src/js/components/AutocompleteField.js +++ b/src/js/components/AddSeedField.js @@ -8,7 +8,7 @@ import ArtistSentence from './ArtistSentence' import * as helpers from '../helpers' import * as spotifyActions from '../services/spotify/actions' -class AutocompleteField extends React.Component{ +class AddSeedField extends React.Component{ constructor(props) { super(props) @@ -24,7 +24,7 @@ class AutocompleteField extends React.Component{ componentDidMount(){ window.addEventListener("click", this.handleClick, false) - if (this.props.types.includes('genre') && !this.props.genres){ + if (!this.props.genres){ this.props.spotifyActions.getGenres() } } @@ -34,8 +34,8 @@ class AutocompleteField extends React.Component{ } handleClick(e){ - if ($(e.target).closest('.autocomplete-field').length <= 0){ - this.props.spotifyActions.clearAutocompleteResults() + if ($(e.target).closest('.add-seed-field').length <= 0){ + this.props.spotifyActions.clearAutocompleteResults(this.id) } } @@ -44,11 +44,6 @@ class AutocompleteField extends React.Component{ // update our local state this.setState({value: value}) - - // pass the change up the line - if (this.props.onChange){ - this.props.onChange(e,value) - } // start a timer to perform the actual search // this provides a wee delay between key presses to avoid request spamming @@ -56,49 +51,15 @@ class AutocompleteField extends React.Component{ this.timer = setTimeout( function(){ self.setState({searching: true}) - self.props.spotifyActions.getAutocompleteResults(self.id,value,self.props.types) + self.props.spotifyActions.getAutocompleteResults(self.id,value,['artist','track','genre']) }, 500 ) } handleSelect(e,item){ - if (this.props.clearOnSelect){ - this.setState({value: ''}) - } else { - this.setState({value: item.name}) - } - - // if we have a handler to pass down to - if (this.props.onSelect){ - this.props.onSelect(e,item) - - // no handler, so let's just go to this asset - } else { - switch (helpers.uriType(item.uri)){ - - case 'album': - hashHistory.push(global.baseURL+'album/'+item.uri) - break - - case 'artist': - hashHistory.push(global.baseURL+'artist/'+item.uri) - break - - case 'playlist': - hashHistory.push(global.baseURL+'playlist/'+item.uri) - break - - case 'track': - hashHistory.push(global.baseURL+'album/'+item.album.uri) - break - - case 'search': - hashHistory.push(global.baseURL+'search/'+item.uri) - break - } - } - + this.setState({value: ''}) + this.props.onSelect(e,item) this.props.spotifyActions.clearAutocompleteResults(this.id) } @@ -112,18 +73,6 @@ class AutocompleteField extends React.Component{ } } - renderAllResultsButton(){ - if (this.props.hideAllResultsButton || !this.results()){ - return null - } else { - return ( -
this.handleSelect(e,{uri:'iris:search:all:'+this.state.value, name: ''})}> - All results -
- ) - } - } - renderResults(type){ var results = this.results() if (!results || typeof(results[type]) === 'undefined' || results[type].length <= 0) return null @@ -149,7 +98,7 @@ class AutocompleteField extends React.Component{ } render(){ - var className = "field autocomplete-field" + var className = "field autocomplete-field add-seed-field" if (this.results() && this.results().loading){ className += " loading" } @@ -163,16 +112,9 @@ class AutocompleteField extends React.Component{ placeholder={this.props.placeholder ? this.props.placeholder : "Start typing..."} />
- { - this.props.types.map(type => { - return ( -
- {this.renderResults(type+'s')} -
- ) - }) - } - {this.renderAllResultsButton()} + {this.renderResults('artists')} + {this.renderResults('tracks')} + {this.renderResults('genres')}
); @@ -192,4 +134,4 @@ const mapDispatchToProps = (dispatch) => { } } -export default connect(mapStateToProps, mapDispatchToProps)(AutocompleteField) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(AddSeedField) \ No newline at end of file diff --git a/src/js/components/SearchForm.js b/src/js/components/SearchForm.js index facfd73f..ffc367f1 100755 --- a/src/js/components/SearchForm.js +++ b/src/js/components/SearchForm.js @@ -5,7 +5,6 @@ import { Link, hashHistory } from 'react-router' import { createStore, bindActionCreators } from 'redux' import FontAwesome from 'react-fontawesome' -import AutocompleteField from './AutocompleteField' import * as helpers from '../helpers' import * as uiActions from '../services/ui/actions' @@ -19,7 +18,7 @@ class SearchForm extends React.Component{ } } - handleSubmit(e,value){ + handleSubmit(e){ e.preventDefault() // check for uri type matching @@ -47,12 +46,12 @@ class SearchForm extends React.Component{ render(){ return ( -
this.handleSubmit(e, this.state.query)}> - this.handleSubmit(e) }> + this.setState({query: value})} /> + onChange={ e => this.setState({ query: e.target.value }) } + value={ this.state.query } /> ) } diff --git a/src/js/views/discover/Discover.js b/src/js/views/discover/Discover.js index c4d71870..91c3480a 100755 --- a/src/js/views/discover/Discover.js +++ b/src/js/views/discover/Discover.js @@ -9,7 +9,7 @@ import GridSlider from '../../components/GridSlider' import ArtistSentence from '../../components/ArtistSentence' import TrackList from '../../components/TrackList' import Parallax from '../../components/Parallax' -import AutocompleteField from '../../components/AutocompleteField' +import AddSeedField from '../../components/AddSeedField' import * as helpers from '../../helpers' import * as spotifyActions from '../../services/spotify/actions' @@ -88,13 +88,7 @@ class Discover extends React.Component{ ) }) } - this.handleSelect(e,item)} - clearOnSelect - hideAllResultsButton /> + this.handleSelect(e,item)} /> ) } diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index 1b34689b..21922ebc 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -159,5 +159,9 @@ $bp_shallow: 650px; @media( min-width: $min_width ){ @content; } + }@else if $min_height { + @media( min-height: $min_height ){ + @content; + } } }