diff --git a/src/js/components/Header.js b/src/js/components/Header.js index 83178401..ca5fb39a 100755 --- a/src/js/components/Header.js +++ b/src/js/components/Header.js @@ -3,7 +3,6 @@ import React, { PropTypes } from 'react' import FontAwesome from 'react-fontawesome' import Icon from './Icon' -import SearchForm from './SearchForm' import SidebarToggleButton from './SidebarToggleButton' import ContextMenuTrigger from './ContextMenuTrigger' @@ -44,24 +43,13 @@ export default class Header extends React.Component{ } render(){ - if (typeof(this.props.search) !== 'undefined'){ - return ( -
- - - - {this.renderOptions()} -
- ) - } else { - return ( -
- {this.props.icon ? : null} - -

{ this.props.title }

- {this.renderOptions()} -
- ) - } + return ( +
+ {this.props.icon ? : null} + + {this.props.title ?

{ this.props.title }

: null} + {this.renderOptions()} +
+ ) } } \ No newline at end of file diff --git a/src/js/components/SearchForm.js b/src/js/components/SearchForm.js index 91830b02..2f52bcef 100755 --- a/src/js/components/SearchForm.js +++ b/src/js/components/SearchForm.js @@ -14,7 +14,8 @@ class SearchForm extends React.Component{ super(props); this.state = { - query: '' + query: '', + in_focus: false } } @@ -25,7 +26,8 @@ class SearchForm extends React.Component{ } componentWillReceiveProps(newProps){ - if (newProps.query && newProps.query != this.state.query){ + if (newProps.query && newProps.query != this.state.query && newProps.query != this.props.query && !this.state.in_focus){ + console.log('changing',newProps.query,this.props.query) this.setState({query: newProps.query}) } } @@ -58,12 +60,16 @@ class SearchForm extends React.Component{ render(){ return ( -
this.handleSubmit(e) }> - this.setState({ query: e.target.value }) } - value={ this.state.query } /> + this.handleSubmit(e)}> +
) } diff --git a/src/js/views/Search.js b/src/js/views/Search.js index a1c03f4a..1f9d3a6b 100755 --- a/src/js/views/Search.js +++ b/src/js/views/Search.js @@ -32,6 +32,9 @@ class Search extends React.Component{ if (this.props.params && this.props.params.type && this.props.params.query){ this.props.uiActions.startSearch(this.props.params.type, this.props.params.query) } + + // Auto-focus on the input field + $(document).find('.search-form input').focus(); } componentWillReceiveProps(newProps){ @@ -243,7 +246,8 @@ class Search extends React.Component{ return (
-
+
+
{ this.renderResults() }
diff --git a/src/js/views/library/LibraryAlbums.js b/src/js/views/library/LibraryAlbums.js index f4e33cc8..4ec16204 100755 --- a/src/js/views/library/LibraryAlbums.js +++ b/src/js/views/library/LibraryAlbums.js @@ -111,9 +111,9 @@ class LibraryAlbums extends React.Component{
-

{ album.name }

+

{ album.name }

-

+

diff --git a/src/scss/components/_dropdown-field.scss b/src/scss/components/_dropdown-field.scss index 31914157..dbfd5f56 100755 --- a/src/scss/components/_dropdown-field.scss +++ b/src/scss/components/_dropdown-field.scss @@ -1,7 +1,7 @@ .dropdown-field { font-size: 13px; - font-weight: 600; + font-weight: 800; font-family: "Overpass"; position: relative; display: inline-block; @@ -9,6 +9,10 @@ .label { padding: 14px 10px; cursor: pointer; + + &:hover { + color: $blue; + } } &.expanded { diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index ee242f9b..ff846b6e 100755 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -19,8 +19,8 @@ main { .options { position: absolute; - top: 10px; - right: 10px; + top: 2.6rem; + right: 40px; .context-menu-trigger { display: none; @@ -31,7 +31,7 @@ main { .button, button { font-size: 13px; - font-weight: 600; + font-weight: 800; font-family: "Overpass"; background: transparent; text-transform: none; @@ -39,6 +39,15 @@ main { margin: 0; min-width: 0; color: $black; + + &:hover { + color: $blue; + box-shadow: none; + + &:before { + display: none; + } + } } } diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index 0ea2dfed..fa7a7049 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -17,7 +17,7 @@ .liner { position: relative; z-index: 1; - padding: 20vh 40px 0 260px; + padding: 30vh 40px 0 260px; .thumbnail { position: absolute; diff --git a/src/scss/views/_library.scss b/src/scss/views/_library.scss index 0984cf1c..d8f977ae 100755 --- a/src/scss/views/_library.scss +++ b/src/scss/views/_library.scss @@ -2,7 +2,7 @@ .library-albums-view { .albums-detail-subview > .album { position: relative; - padding-bottom: 40px; + padding-bottom: 60px; min-height: 220px; .thumbnail { @@ -11,19 +11,12 @@ } .detail { - padding-left: 220px; - - h3 { - padding: 0 0 0 40px; - } - - h4{ - padding: 0 0 10px 40px; - } + padding-bottom: 20px; } + .detail, .track-list { - padding-left: 220px; + padding-left: 260px; } } diff --git a/src/scss/views/_search.scss b/src/scss/views/_search.scss index 27f051b7..77905647 100755 --- a/src/scss/views/_search.scss +++ b/src/scss/views/_search.scss @@ -2,7 +2,9 @@ .search-view { .search-form { - display: inline-block; + position: absolute; + top: 40px; + left: 90px; input { @include feature_font(); @@ -11,6 +13,12 @@ font-weight: 700; height: 3rem; background: transparent; + border-bottom: 2px solid transparent; + + &:focus, + &:active { + border-color: $turquoise; + } } }