Simplified lists for mobile

src/js/views/library/LibraryPlaylists.js

@@ -88,6 +88,18 @@ class LibraryPlaylists extends React.Component{
 		}
 
 		if( this.props.view == 'list' ){
+			if (this.props.slim_mode){
+				var columns = [
+					{
+						label: 'Name',
+						name: 'name'
+					},
+					{
+						label: 'Tracks',
+						name: 'tracks_total'
+					}
+				]
+			} else {
 				var columns = [
 					{
 						label: 'Name',
@@ -110,6 +122,10 @@ class LibraryPlaylists extends React.Component{
 						name: 'can_edit'
 					}
 				]
+			}
+
+			console.log(columns)
+
 			return (
 				<section className="content-wrapper">
 					<List
@@ -212,6 +228,7 @@ class LibraryPlaylists extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		slim_mode: state.ui.slim_mode,
 		load_queue: state.ui.load_queue,
 		me_id: (state.spotify.me ? state.spotify.me.id : (state.ui.config && state.ui.config.spotify_username ? state.ui.config.spotify_username : false)),
 		view: state.ui.library_playlists_view,

src/scss/components/_lists.scss

@@ -253,7 +253,7 @@
 					text-align: right;
 				}
 
-				&:not(.name):not(.duration){
+				&:not(.name):not(.duration):not(.album){
 					color: $mid_grey;
 					display: inline;
 					width: auto !important;
@@ -261,7 +261,7 @@
 					word-wrap: break-word;
 				}
 
-				&:not(.name):not(.duration):not(:nth-child(2)){
+				&:not(.name):not(.duration):not(.album):not(:nth-child(2)){
 					@include bullet();
 				}
 
@@ -277,6 +277,7 @@
 					content: '% popularity';
 				}
 
+				&.album,
 				&.can_edit,
 				&.release_date {
 					display: none;