Upgrading non-track lists

mopidy_iris/static/app.css

@@ -2775,7 +2775,7 @@ h2 {
   font-family: "Overpass";
   letter-spacing: -0.04em;
   font-weight: 600;
-  font-size: 1.8rem;
+  font-size: 2rem;
   font-weight: 400;
   line-height: 2.2rem; }
   h2 a {
@@ -2789,8 +2789,8 @@ h2 {
 
 h3 {
   font-weight: 100;
-  font-size: 1.4em;
+  font-size: 1.8rem;
-  line-height: 1.6em; }
+  line-height: 1.8rem; }
   h3.bottom-padding {
     padding-bottom: 30px; }
 
@@ -2798,8 +2798,8 @@ h4 {
   font-family: "Overpass";
   letter-spacing: -0.04em;
   font-weight: 600;
-  font-size: 1.3rem;
+  font-size: 1.5rem;
-  margin-bottom: 14px;
+  margin-bottom: 16px;
   font-weight: 700; }
   h4.underline {
     padding-bottom: 4px;
@@ -3068,13 +3068,17 @@ footer {
 
 @media (max-width: 800px) {
   h1 {
-    font-size: 1.8rem;
+    font-size: 2rem;
     line-height: 1.8rem; }
   h2 {
-    font-size: 1.2rem;
+    font-size: 1.6rem;
     line-height: 1.5rem; }
   h3 {
-    font-size: 1rem; }
+    font-size: 1.4rem; }
+  h4 {
+    font-size: 1.3rem; }
+  h5 {
+    font-size: 1.1rem; }
   .right-padding {
     padding-right: 20px; }
   .left-padding {
@@ -3916,6 +3920,10 @@ input[type="submit"] {
       padding: 12px; } }
 
 .list__item {
+  -webkit-transition: all 0.1s ease-in-out;
+  -moz-transition: all 0.1s ease-in-out;
+  -o-transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -3947,10 +3955,10 @@ input[type="submit"] {
     opacity: 0; }
   .list__item:not(:first-child) {
     border-top: 1px solid rgba(128, 128, 128, 0.05); }
-  :root .notouch:not(.dragging) .list__item:not(.no-click).list__item--hover {
+  :root .notouch:not(.dragging) .list__item:not(.no-click):hover {
     background: rgba(255, 255, 255, 0.03);
     cursor: pointer; }
-    .light-theme :root .notouch:not(.dragging) .list__item:not(.no-click).list__item--hover {
+    .light-theme :root .notouch:not(.dragging) .list__item:not(.no-click):hover {
       background: rgba(0, 0, 0, 0.03); }
   .list__item .select-zone,
   .list__item .drag-zone {
@@ -4046,7 +4054,7 @@ input[type="submit"] {
   .list.related-artist-list .artist {
     display: block;
     border: 0;
-    margin: 10px 0; }
+    margin: 20px 0; }
     .list.related-artist-list .artist::after {
       content: '';
       clear: both;
@@ -4057,7 +4065,7 @@ input[type="submit"] {
       -o-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
       border-radius: 50%;
-      width: 50px;
+      width: 60px;
       margin-right: 15px;
       float: left;
       border: 3px solid transparent; }

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1541581314";
+	var build = "1541626234";
 	var version = "3.29.2";
 
 	// Construct the script tag

src/js/components/List.js

@@ -46,19 +46,21 @@ class List extends React.Component{
 	}
 
 	renderValue(row, key_string){
-		var key = key_string.split('.')
+		var key = key_string.split('.');
-		var value = row
+		var value = row;
 
 		for (var i = 0; i < key.length; i++){
 			if (value[key[i]] === undefined){
-				return <span>-</span>
+				return null
 			} else if (typeof(value[key[i]]) === 'string' && value[key[i]].replace(' ','') == ''){
-				return <span>-</span>
+				return null
 			} else {
 				value = value[key[i]]
 			}
 		}
 
+		if (key_string === 'tracks_total') return <span>{value} tracks</span>
+		if (key_string === 'followers') return <span>{value.toLocaleString()} followers</span>
 		if (key_string === 'added_at') return <span><Dater type="ago" data={value} /> ago</span>
 		if (key_string === 'owner') return <URILink type="user" uri={value.uri}>{value.id}</URILink>
 		if (key_string === 'popularity') return <Popularity full popularity={value} />
@@ -82,7 +84,9 @@ class List extends React.Component{
 					this.props.rows.map((row, row_index) => {
 
 						var class_name = 'list__item'
-						if (row.type ) class_name += ' '+row.type
+						if (row.type ){
+							class_name += ' list__item--'+row.type;
+						}
 
 						return (
 							<div
@@ -90,17 +94,46 @@ class List extends React.Component{
 								key={row_index}
 								onClick={e => this.handleClick(e, row.uri)}
 								onContextMenu={e => this.handleContextMenu(e,row)}>
+
+									<div className="list__item__actions">
 										{
-										this.props.columns.map((col, col_index) => {
+											(this.props.actions ? this.props.actions.map((action, index) => {
-											var className = 'col '+col.name.replace('.','_')
 												return (
-												<div className={className} key={col_index}>
+													<li className={'list__item__actions__item list__item__actions__item--'+action.replace('.','_')} key={index}>
-													{ this.renderValue(row, col.name) }
+														{this.renderValue(row, action)}
+													</li>
+												)
+											}) : null)
+										}
+
+										{this.props.nocontext ? null : <ContextMenuTrigger className="list__item__actions__item list__item__actions__item--context-menu-trigger subtle" key="context" onTrigger={e => this.handleContextMenu(e, row)} />}
+
 									</div>
+
+									<div className="list__item__content">
+
+										<div className="list__item__name">
+											{this.renderValue(row, 'name')}
+										</div>
+
+										<ul className="list__item__details">
+											{
+												this.props.details.map((detail, index) => {
+													var value = this.renderValue(row, detail);
+
+													if (!value){
+														return null;
+													}
+
+													return (
+														<li className={'list__item__details__item list__item__details__item--'+detail.replace('.','_')} key={index}>
+															{value}
+														</li>
 													)
 												})
 											}
-									{this.props.nocontext ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, row)} />}
+										</ul>
+									</div>
 							</div>
 						)
 					})

src/js/components/Track.js

@@ -310,7 +310,7 @@ export default class Track extends React.Component{
 							<div className="list__item__name">
 								{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
 								{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
-								{track.playing ? <Icon name="playing" type="gif"></Icon> : null}
+								{track.playing ? <Icon name="equalizer"></Icon> : null}
 							</div>
 							<ul className="list__item__details">
 								{track_details}

src/js/helpers.js

@@ -389,6 +389,7 @@ export let formatAlbum = function(data){
 		'provider',
 		'name',
 		'type',
+		'added_at',
 		'release_date',
 		'popularity',
 		'images',
@@ -440,6 +441,7 @@ export let formatArtist = function(data){
 		'popularity',
 		'followers',
 		'listeners',
+		'added_at',
 		'biography',
 		'biography_link',
 		'biography_publish_date',
@@ -505,6 +507,7 @@ export let formatPlaylist = function(data){
 		'images',
 		'popularity',
 		'followers',
+		'added_at',
 		'last_modified_date',
 		'can_edit',
 		'owner',

src/js/views/library/LibraryAlbums.js

@@ -216,8 +216,9 @@ class LibraryAlbums extends React.Component{
 					<List 
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						rows={albums} 
-						columns={columns} 
+						details={['artists','tracks_total']}
-						className="album-list"
+						extra_detail={['added_at']}
+						className="albums"
 						link_prefix={global.baseURL+"album/"} />
 					<LazyLoadListener
 						loadKey={this.state.limit}

src/js/views/library/LibraryArtists.js

@@ -174,27 +174,14 @@ class LibraryArtists extends React.Component{
 		artists = artists.slice(0, this.state.limit);
 
 		if (this.props.view == 'list'){
-			var columns = [
-				{
-					label: 'Name',
-					name: 'name'
-				},
-				{
-					label: 'Followers',
-					name: 'followers.total'
-				},
-				{
-					label: 'Popularity',
-					name: 'popularity'
-				}
-			]
 			return (
 				<section className="content-wrapper">
 					<List 
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						rows={artists} 
-						columns={columns} 
+						details={['followers','popularity']}
-						className="artist-list"
+						extra_detail={['source']}
+						className="artists"
 						link_prefix={global.baseURL+"artist/"} />
 					<LazyLoadListener 
 						loadKey={this.state.limit}

src/js/views/library/LibraryPlaylists.js

@@ -124,36 +124,14 @@ class LibraryPlaylists extends React.Component{
 		playlists = playlists.slice(0, this.state.limit);
 
 		if (this.props.view == 'list'){
-			var columns = [
-				{
-					label: 'Name',
-					name: 'name'
-				},
-				{
-					label: 'Owner',
-					name: 'owner'
-				},
-				{
-					label: 'Tracks',
-					name: 'tracks_total'
-				},
-				{
-					label: 'Editable',
-					name: 'can_edit'
-				},
-				{
-					label: 'Source',
-					name: 'source'
-				}
-			];
-
 			return (
 				<section className="content-wrapper">
 					<List
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						rows={playlists}
-						columns={columns}
+						details={['owner','tracks_total']}
-						className="playlist-list"
+						extra_detail={['source']}
+						className="playlists"
 						link_prefix={global.baseURL+"playlist/"} />
 					<LazyLoadListener 
 						loadKey={this.state.limit}

src/scss/components/_lists.scss

@@ -1,7 +1,8 @@
 
 .list {
 	&__item {
-		@include clearfix;
+		@include clearfix();
+		@include animate(0.1s);
 		-webkit-touch-callout: none;
 		-webkit-user-select: none;
 		-khtml-user-select: none;
@@ -37,7 +38,7 @@
 			border-top: 1px solid rgba(128,128,128,0.05);
 		}
 
-		:root .notouch:not(.dragging) &:not(.no-click).list__item--hover {
+		:root .notouch:not(.dragging) &:not(.no-click):hover {
 			background: rgba(255,255,255,0.03);
 			cursor: pointer;
 
@@ -197,13 +198,13 @@
 		.artist {
 			display: block;
 			border: 0;
-			margin: 10px 0;
+			margin: 20px 0;
 			@include clearfix;
 
 			.thumbnail {
 				@include animate();
 				border-radius: 50%;
-				width: 50px;
+				width: 60px;
 				margin-right: 15px;
 				float: left;
 				border: 3px solid transparent;

src/scss/global/_core.scss

@@ -184,7 +184,7 @@ h1 {
 
 h2 {
 	@include feature_font();
-	font-size: 1.8rem;
+	font-size: 2rem;
 	font-weight: 400;
 	line-height: 2.2rem;
 
@@ -207,8 +207,8 @@ h2 {
 
 h3 {
 	font-weight: 100;
-	font-size: 1.4em;
+	font-size: 1.8rem;
-	line-height: 1.6em;
+	line-height: 1.8rem;
 
 	&.bottom-padding {
 		padding-bottom: 30px;
@@ -217,8 +217,8 @@ h3 {
 
 h4 {
 	@include feature_font();
-	font-size: 1.3rem;
+	font-size: 1.5rem;
-	margin-bottom: 14px;
+	margin-bottom: 16px;
 	font-weight: 700;
 
 	&.underline {
@@ -501,17 +501,25 @@ footer {
 @include responsive($bp_medium){
 	
 	h1 {
-		font-size: 1.8rem;
+		font-size: 2rem;
 		line-height: 1.8rem;
 	}
 	
 	h2 {
-		font-size: 1.2rem;
+		font-size: 1.6rem;
 		line-height: 1.5rem;
 	}
 	
 	h3 {
-		font-size: 1rem;
+		font-size: 1.4rem;
+	}
+	
+	h4 {
+		font-size: 1.3rem;
+	}
+	
+	h5 {
+		font-size: 1.1rem;
 	}
 	
 	.right-padding {