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.

diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index bcd8cf9178b36b3a59029a1efc501fe6fa6e7cb3..91da9ec40e751474c22f91445724441192219930 100644 (file)
--- 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 6525df55c713cf286701a99658432383b54f1892..efd7db8f6aa297531d8c7207a9f20076890fbf1d 100644 (file)
--- 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 7764a315a8f43c1b55eebb7385cefc9e98275726..3959d98947226af9c8ee6bf43baf5b5dddbdade1 100644 (file)
--- 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>