Minor layout tweaks; Responsive tracks

src/js/components/SidebarToggleButton.js

@@ -20,6 +20,7 @@ class SidebarToggleButton extends React.Component{
 
 		var classname = 'sidebar-toggle'
 		if( this.props.open ) classname += ' open'
+		if( this.props.className ) classname += ' '+this.props.className
 
 		return (
 			<div className={classname} onClick={ () => this.handleClick() }>

src/js/components/SpotifyAuthenticationFrame.js

@@ -60,16 +60,14 @@ class SpotifyAuthenticationFrame extends React.Component{
 	}
 
 	renderMe(){
-		if( !this.props.spotify.me ) return null;
+		if( !this.props.authorized || !this.props.me ) return null;
 
 		return (
-			<div className="artist-list">
-				<div className="artist">
-					<Thumbnail circle={true} size="small" images={this.props.spotify.me.images} />
-					<div className="name">
-						Logged in as {this.props.spotify.me.display_name ? this.props.spotify.me.display_name : null }
-						&nbsp;(<Link to={'/user/'+this.props.spotify.me.uri}>{ this.props.spotify.me.id }</Link>)
-					</div>
+			<div className="me">
+				<Thumbnail circle={true} size="small" images={this.props.me.images} />
+				<div className="user-name">
+					Logged in as {this.props.me.display_name ? this.props.me.display_name : null }
+					&nbsp;(<Link to={'/user/'+this.props.me.uri}>{ this.props.me.id }</Link>)
 				</div>
 			</div>
 		)
@@ -84,12 +82,9 @@ class SpotifyAuthenticationFrame extends React.Component{
 					Authorizing...
 				</button>
 			);
-		}else if( this.props.spotify.authorized ){
+		}else if( this.props.authorized ){
 			return (
-				<div>
-					{ this.renderMe() }
-					<button onClick={() => this.props.actions.authorizationRevoked()}>Log out</button>
-				</div>
+				<button onClick={() => this.props.actions.authorizationRevoked()}>Log out</button>
 			);
 		}else{
 			return (
@@ -99,9 +94,9 @@ class SpotifyAuthenticationFrame extends React.Component{
 	}
 
 	renderRefreshButton(){
-		if( !this.props.spotify.authorized ) return null;
+		if( !this.props.authorized ) return null;
 
-		if( this.props.spotify.refreshing_token ){
+		if( this.props.refreshing_token ){
 			return (
 				<button disabled>
 					<FontAwesome name="circle-o-notch" spin />
@@ -119,7 +114,9 @@ class SpotifyAuthenticationFrame extends React.Component{
 	render(){
 		return (
 			<div>
+				{ this.renderMe() }
 				{ this.renderAuthorizeButton() }
+				&nbsp;&nbsp;
 				{ this.renderRefreshButton() }
 				<iframe src={this.state.frameUrl} style={{ display: 'none' }}></iframe>
 			</div>
@@ -128,7 +125,12 @@ class SpotifyAuthenticationFrame extends React.Component{
 }
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		authorized: state.spotify.authorized,
+		authorizing: state.spotify.authorizing,
+		refreshing_token: state.spotify.refreshing_token,
+		me: state.spotify.me
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {

src/js/components/TrackList.js

@@ -193,13 +193,13 @@ class TrackList extends React.Component{
 
 		let self = this;
 		return (
-			<ul>
-				<li className="list-item header track">
+			<div className="track-list">
+				<div className="list-item header track">
 					<span className="col name">Name</span>
 					<span className="col artists">Artists</span>
 					<span className="col album">Album</span>
 					<span className="col duration">Length</span>
-				</li>
+				</div>
 				{
 					this.state.tracks.map(
 						(track, index) => {
@@ -215,7 +215,7 @@ class TrackList extends React.Component{
 						}
 					)
 				}
-			</ul>
+			</div>
 		);
 	}
 }

src/js/views/Queue.js

@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
 import TrackList from '../components/TrackList'
 import Track from '../components/Track'
+import SidebarToggleButton from '../components/SidebarToggleButton'
 import FullPlayer from '../components/FullPlayer'
 import ArtistSentence from '../components/ArtistSentence'
 import Header from '../components/Header'
@@ -43,6 +44,8 @@ class Queue extends React.Component{
 	render(){
 		return (
 			<div className="view queue-view">
+			
+				<SidebarToggleButton className="dark-text" />
 
 				<FullPlayer />
 

src/js/views/Settings.js

@@ -178,10 +178,14 @@ class Settings extends React.Component{
 									value={ this.state.spotify_locale } />
 							</div>
 						</div>
+						<div className="field">
+							<div className="name">Authentication</div>
+							<div className="input">
+								<SpotifyAuthenticationFrame />
+							</div>
+						</div>
 					</form>
 
-			        <SpotifyAuthenticationFrame />
-
 					<h4 className="underline">Advanced</h4>
 
 					<div className="field">

src/scss/components/_lists.scss

@@ -65,6 +65,21 @@
 			border-top: 3px solid $blue;
 			margin-top: -3px;
 		}
+
+
+		@include responsive( 849px ){
+			.col {
+				&.name { width: 50%; }
+				&.artists { width: 50%; }
+				&.album { width: 50%; padding-left: 50%; color: $mid_grey; }
+				&.duration { display: none; }
+			}
+
+			&.header { 
+				display: none; 
+			}
+		}
+
 	}
 
 

src/scss/global/_core.scss

@@ -143,9 +143,10 @@ h4 {
 }
 
 .one-liner { @include one_line_text; }
-.grey-text { color: $mid_grey; }
-.red-text { color: $red; }
-.green-text { color: $green; }
+.grey-text { color: $mid_grey !important; }
+.red-text { color: $red !important; }
+.green-text { color: $green !important; }
+.dark-text { color: $dark_grey !important; }
 
 footer {
 	display: block;

src/scss/views/_settings.scss

@@ -3,4 +3,19 @@
 	section {
 		padding: 40px;
 	}
+
+	.me {
+		display: block;
+		float: left;
+
+		.thumbnail {
+			float: left;
+			margin-right: 10px;
+			max-width: 40px;
+		}
+
+		.user-name {
+			padding: 2px 14px;
+		}
+	}
 }