Don't wrap collection cells.

This change makes sure cells are never wrapped.

If the text is too big for the column, ellipsis is
used instead.

3 files changed, 22 insertions, 22 deletions

diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index bcd8cf9178b..91da9ec40e7 100644
--- a/apps/media/css/music.css
+++ b/apps/media/css/music.css
@@ -17,20 +17,18 @@ a.jp-mute,a.jp-unmute { left:24em; }
 div.jp-volume-bar { position:absolute; overflow:hidden; background:#eee; width:4em; height:0.4em; cursor:pointer; top:1.3em; left:27em; }
 div.jp-volume-bar-value { background:#ccc; width:0; height:0.4em; }
 
-#collection { padding-top:1em; position:relative; width:100%; float:left; }
-#collection li.album,#collection li.song { margin-left:3em; }
+#collection { padding-top:1em; position:relative; width:100%; float:left; table-layout:fixed; }
+#collection td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 #leftcontent img.remove { display:none; float:right; cursor:pointer; opacity: 0; }
 #leftcontent li:hover img.remove { display:inline; opacity: .3; }
 #leftcontent li div.label { float: left; width: 200px; overflow: hidden; text-overflow: ellipsis; }
-#collection li button { float:right; }
-#collection li,#playlist li { list-style-type:none; }
+#playlist li { list-style-type:none; }
 .template { display:none; }
 .collection_playing { background:#eee; font-weight: bold; }
 
-#collection li { padding-right:10px; }
 #searchresults input.play, #searchresults input.add { float:left; height:1em; width:1em; }
 #collection tr.collapsed td.album, #collection tr.collapsed td.title { color:#ddd; }
-td.artist img, td.artist a, td.album img, td.album a { float: left; }
+#collection td.artist-expander, #collection td.album-expander { width:2em; text-align:center; }
 td.artist a.expander, td.album a.expander { float:right; padding:0 1em; }
 tr.active td { background-color:#eee; font-weight:bold; }
 tr td { border-top:1px solid #eee; height:2.2em; }
diff --git a/apps/media/js/collection.js b/apps/media/js/collection.js
index 6525df55c71..efd7db8f6aa 100644
--- a/apps/media/js/collection.js
+++ b/apps/media/js/collection.js
@@ -122,7 +122,7 @@ Collection={
 						}
 						tr.find('td.artist').addClass('buttons');
 						Collection.addButtons(tr,artist);
-						tr.children('td.artist').append(expander);
+						tr.children('td.artist-expander').append(expander);
 						tr.attr('data-artist',artist.name);
 						Collection.parent.find('tbody').append(tr);
 					}
@@ -144,7 +144,7 @@ Collection={
 					newRow.find('td.artist').text('');
 					newRow.find('.expander').remove();
 				}
-				newRow.find('td.album .expander').remove();
+				newRow.find('td.album-expander .expander').remove();
 				if(i==0){
 					newRow.find('td.album a').text(album.name);
 					newRow.find('td.album a').click(function(event){
@@ -165,7 +165,7 @@ Collection={
 								Collection.showAlbum(tr.data('artist'),tr.data('album'));
 							}
 						});
-						newRow.children('td.album').append(expander);
+						newRow.children('td.album-expander').append(expander);
 					}
 					Collection.addButtons(newRow,album);
 				} else {
@@ -192,15 +192,15 @@ Collection={
 			});
 		});
 		tr.removeClass('collapsed');
-		tr.find('td.artist a.expander').data('expanded',true);
-		tr.find('td.artist a.expander').addClass('expanded');
-		tr.find('td.artist a.expander').text('v');
+		tr.find('td.artist-expander a.expander').data('expanded',true);
+		tr.find('td.artist-expander a.expander').addClass('expanded');
+		tr.find('td.artist-expander a.expander').text('v');
 	},
 	hideArtist:function(artist){
 		var tr=Collection.parent.find('tr[data-artist="'+artist+'"]');
 		var artist=tr.first().data('artistData');
 		tr.first().find('td.album a').first().text(artist.albums.length+' '+t('media','albums'));
-		tr.first().find('td.album a.expander').remove();
+		tr.first().find('td.album-expander a.expander').remove();
 		tr.first().find('td.title a').text(artist.songs.length+' '+t('media','songs'));
 		tr.first().find('td.album a').unbind('click');
 		tr.first().find('td.title a').unbind('click');
@@ -209,18 +209,18 @@ Collection={
 				$(row).remove();
 			}
 		});
-		tr.find('td.artist a.expander').data('expanded',false);
-		tr.find('td.artist a.expander').removeClass('expanded');
-		tr.find('td.artist a.expander').text('>');
+		tr.find('td.artist-expander a.expander').data('expanded',false);
+		tr.find('td.artist-expander a.expander').removeClass('expanded');
+		tr.find('td.artist-expander a.expander').text('>');
 		Collection.addButtons(tr,artist);
 	},
 	showAlbum:function(artist,album){
 		var tr = Collection.parent.find('tr[data-artist="'+artist+'"][data-album="'+album+'"]');
 		var lastRow=tr;
 		var albumData=tr.data('albumData');
-		tr.find('td.album a.expander').data('expanded',true);
-		tr.find('td.album a.expander').addClass('expanded');
-		tr.find('td.album a.expander').text('v');
+		tr.find('td.album-expander a.expander').data('expanded',true);
+		tr.find('td.album-expander a.expander').addClass('expanded');
+		tr.find('td.album-expander a.expander').text('v');
 		$.each(albumData.songs,function(i,song){
 			if(i>0){
 				var newRow=tr.clone();
@@ -248,9 +248,9 @@ Collection={
 		var tr = Collection.parent.find('tr[data-artist="'+artist+'"][data-album="'+album+'"]');
 		var albumData=tr.data('albumData');
 		tr.first().find('td.title a').text(albumData.songs.length+' '+t('media','songs'));
-		tr.find('td.album a.expander').data('expanded',false);
-		tr.find('td.album a.expander').removeClass('expanded');
-		tr.find('td.album a.expander').text('> ');
+		tr.find('td.album-expander a.expander').data('expanded',false);
+		tr.find('td.album-expander a.expander').removeClass('expanded');
+		tr.find('td.album-expander a.expander').text('> ');
 		tr.each(function(i,row){
 			if(i>0){
 				$(row).remove();
diff --git a/apps/media/templates/music.php b/apps/media/templates/music.php
index 7764a315a8f..3959d989472 100644
--- a/apps/media/templates/music.php
+++ b/apps/media/templates/music.php
@@ -42,7 +42,9 @@
 	<tbody>
 		<tr class="template">
 			<td class="artist"><a></a></td>
+			<td class="artist-expander"><a></a></td>
 			<td class="album"><a></a></td>
+			<td class="album-expander"><a></a></td>
 			<td class="title"><a></a></td>
 		</tr>
 	</tbody>