Beginning responsive

src/js/components/Sidebar.js

@@ -16,7 +16,7 @@ import * as mopidyActions from '../services/mopidy/actions'
 class Sidebar extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
 	}
 
 	render(){

src/js/components/SidebarToggleButton.js

@@ -0,0 +1,45 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
+
+import * as uiActions from '../services/ui/actions'
+
+class SidebarToggleButton extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	handleClick(e){
+		this.props.uiActions.toggleSidebar()
+	} 
+
+	render(){
+
+		var classname = 'sidebar-toggle'
+		if( this.props.open ) classname += ' open'
+
+		return (
+			<div className={classname} onClick={ () => this.handleClick() }>
+				<FontAwesome className="open" name="bars" /> 
+				<FontAwesome className="close" name="chevron-left" />
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		open: state.ui.sidebar_open
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SidebarToggleButton)

src/js/components/TrackList.js

@@ -165,7 +165,7 @@ class TrackList extends React.Component{
 
 		// if we've got a specific action, run it
 		if( typeof(this.props.playTracks) !== 'undefined' ){
-			return this.props.playURIs( tracks );
+			return this.props.playTracks( tracks );
 		}
 
 		// default to playing a bunch of uris
@@ -173,7 +173,7 @@ class TrackList extends React.Component{
 		for( var i = 0; i < tracks.length; i++ ){
 			uris.push( tracks[i].uri )
 		}
-		return this.props.mopidyActions.playURIs( uris )
+		return this.props.mopidyActions.playTracks( uris )
 	}
 
 	removeTracks(){

src/js/services/mopidy/middleware.js

@@ -217,6 +217,9 @@ const MopidyMiddleware = (function(){
                             if( response[i].uri.startsWith('m3u:')) response[i] = Object.assign({}, response[i], { can_edit: true })
                         }
                         store.dispatch({ type: 'MOPIDY_PLAYLISTS_LOADED', data: response });
+
+                        // TODO: dispatch an action to fetch extra data for each playlist
+                        // this will then trigger an PLAYLIST_REFRESHED action to update a specific store item
                     })
                 break;
 

src/js/services/ui/actions.js

@@ -40,6 +40,12 @@ export function lazyLoading( start ){
     }
 }
 
+export function toggleSidebar(){
+    return {
+        type: 'TOGGLE_SIDEBAR'
+    }
+}
+
 export function dragStart( e, context, victims, victims_indexes = false ){
     return {
         type: 'DRAG_START',

src/js/services/ui/reducer.js

@@ -9,11 +9,15 @@ export default function reducer(ui = {}, action){
 
 
         /**
-         * View views
+         * UI views and view modes
          **/
+
         case 'SET_VIEW':
             return Object.assign({}, ui, action.view)
 
+        case 'TOGGLE_SIDEBAR':
+            return Object.assign({}, ui, { sidebar_open : !ui.sidebar_open })
+
 
         /**
          * Context menu

src/js/views/App.js

@@ -6,6 +6,7 @@ import { Link } from 'react-router'
 import { connect } from 'react-redux'
 
 import Sidebar from '../components/Sidebar'
+import SidebarToggleButton from '../components/SidebarToggleButton'
 import ContextMenu from '../components/ContextMenu'
 import Dragger from '../components/Dragger'
 import Modal from '../components/Modal/Modal'
@@ -107,11 +108,13 @@ class App extends React.Component{
 	render(){
 		var className = '';
 		if( this.props.dragger && this.props.dragger.active ) className += ' dragging'
+		if( this.props.sidebar_open ) className += ' sidebar-open'
 
 		return (
 			<div className={className}>
 		        <Sidebar />
 		        <main>
+		        	<SidebarToggleButton />
 		      		{this.props.children}
 		        </main>
 		        <ContextMenu state={this.props.context_menu} />
@@ -133,6 +136,7 @@ const mapStateToProps = (state, ownProps) => {
 		mopidy_connected: state.mopidy.connected,
 		spotify_authorized: state.spotify.authorized,
 		play_state: state.mopidy.play_state,
+		sidebar_open: state.ui.sidebar_open,
 		dragger: state.ui.dragger,
 		modal: state.ui.modal,
 		context_menu: state.ui.context_menu

src/scss/app.scss

@@ -15,6 +15,7 @@
 @import 'components/slider';
 @import 'components/player';
 @import 'components/sidebar';
+@import 'components/sidebar-toggle-button';
 @import 'components/lists';
 @import 'components/grid';
 @import 'components/header';

src/scss/components/_sidebar-toggle-button.scss

@@ -0,0 +1,24 @@
+
+
+.sidebar-toggle {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 20px;
+	z-index: 98;
+	color: #FFFFFF;
+	font-size: 18px;
+	cursor: pointer;
+
+	&.open {
+		.open {
+			display: none;
+		}
+	}
+
+	&:not(.open) {
+		.close {
+			display: none;
+		}
+	}
+}

src/scss/components/_sidebar.scss

@@ -9,6 +9,15 @@ aside{
 	width: 200px;
 	overflow: hidden;
 	box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);
+
+	@include responsive( 800px ){
+		width: 50%;
+		left: -50%;
+
+		.sidebar-open & {
+			left: 0px;
+		}
+	}
 	
 	.thumbnail {
 		position: absolute;

src/scss/global/_core.scss

@@ -16,6 +16,15 @@ body {
 main,
 footer {
 	margin-left: 200px;
+
+	@include responsive( 800px ){
+		margin-left: 0;
+
+		.sidebar-open & {
+			margin-left: 50%;
+			margin-right: -50%;
+		}
+	}
 }
 
 main {