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 (
-
)
}
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;
+ }
}
}