diff --git a/app/coffeescripts/player.coffee b/app/coffeescripts/player.coffee index 44d6552..ff3a4f9 100644 --- a/app/coffeescripts/player.coffee +++ b/app/coffeescripts/player.coffee @@ -51,17 +51,22 @@ class Player autoplay = false initial_count = $('.playlist-tracks li').length $('.playlist-tracks').append ' -
  • +
  • - ' +artist+ ' — ' +track+ ' +
    + + ' +artist+ ' + — + ' +track+ ' + ' +length+ '
    remove
    • ' - $('.playlist').html($('.playlist-tracks')).scrollbar() - $('.playlist-tracks').sortable() + $('.playlist').html($('.playlist-tracks')).scrollbar + $('.playlist-tracks').sortable axis: 'y', handle: '.dragbox' if autoplay _player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1]) @@ -200,8 +205,8 @@ $('.playlist-tracks li .remove').live 'click', -> $li.remove() false -$('.playlist-tracks li').live 'dblclick', -> - _player.setTrack $(this).attr('id').split('i')[1] +$('.playlist-tracks li .title .playtrack').live 'click', -> + _player.setTrack $(this).parent().parent().parent().attr('id').split('i')[1] false # Adding To Playlist actions @@ -230,7 +235,7 @@ $('.tracklist li').live 'mouseover mouseout', (e) -> $(this).find('.add-track').hide() false -$('.tracklist li').live 'dblclick', (e) -> +$('.tracklist li').live 'click', (e) -> artist = $('.artist-info .name').html() album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, '' track_name = $(this).find('.trackname').html() diff --git a/app/coffeescripts/search.coffee b/app/coffeescripts/search.coffee index ca00149..3cd30a4 100644 --- a/app/coffeescripts/search.coffee +++ b/app/coffeescripts/search.coffee @@ -58,3 +58,6 @@ $('#search_form').live 'submit', -> $('.suggestions a').live 'click', -> $('#search_field').val $(this).text() false +$('.data.artist').live 'click', -> + _ajax.go('/artist/'+$(this).text().replace(' ', '+')+'/'); + false; \ No newline at end of file diff --git a/public/images/drag.png b/public/images/drag.png new file mode 100644 index 0000000..3b0305a Binary files /dev/null and b/public/images/drag.png differ diff --git a/public/javascripts/coffee/player.js b/public/javascripts/coffee/player.js index 377ce3e..025e8db 100644 --- a/public/javascripts/coffee/player.js +++ b/public/javascripts/coffee/player.js @@ -59,16 +59,24 @@ Player = (function() { } initial_count = $('.playlist-tracks li').length; $('.playlist-tracks').append('\ -
  • \ +
  • \
    \
    \ - ' + artist + ' — ' + track + '\ +
    \ + \ + ' + artist + '\ + —\ + ' + track + '\ + \ ' + length + '\
    remove
    \
    \
    • '); - $('.playlist').html($('.playlist-tracks')).scrollbar(); - $('.playlist-tracks').sortable(); + $('.playlist').html($('.playlist-tracks')).scrollbar; + $('.playlist-tracks').sortable({ + axis: 'y', + handle: '.dragbox' + }); if (autoplay) { return _player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1]); } else if (initial_count === 0 && !_player.hasTrack()) { @@ -231,8 +239,8 @@ $('.playlist-tracks li .remove').live('click', function() { $li.remove(); return false; }); -$('.playlist-tracks li').live('dblclick', function() { - _player.setTrack($(this).attr('id').split('i')[1]); +$('.playlist-tracks li .title .playtrack').live('click', function() { + _player.setTrack($(this).parent().parent().parent().attr('id').split('i')[1]); return false; }); $('.add-album').live('click', function() { @@ -265,7 +273,7 @@ $('.tracklist li').live('mouseover mouseout', function(e) { } return false; }); -$('.tracklist li').live('dblclick', function(e) { +$('.tracklist li').live('click', function(e) { var album, artist, length, track_name; artist = $('.artist-info .name').html(); album = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, ''); diff --git a/public/javascripts/coffee/search.js b/public/javascripts/coffee/search.js index faccc2f..266e17e 100644 --- a/public/javascripts/coffee/search.js +++ b/public/javascripts/coffee/search.js @@ -70,4 +70,8 @@ $('#search_form').live('submit', function() { $('.suggestions a').live('click', function() { $('#search_field').val($(this).text()); return false; +}); +$('.data.artist').live('click', function() { + _ajax.go('/artist/' + $(this).text().replace(' ', '+') + '/'); + return false; }); \ No newline at end of file diff --git a/public/stylesheets/_sass/albums.scss b/public/stylesheets/_sass/albums.scss index 0378ddc..fc70e96 100644 --- a/public/stylesheets/_sass/albums.scss +++ b/public/stylesheets/_sass/albums.scss @@ -71,6 +71,7 @@ &:hover { background-color: #FAFAFA; + cursor: pointer; .track-container { .fade { diff --git a/public/stylesheets/_sass/player.scss b/public/stylesheets/_sass/player.scss index 68d416a..af3c741 100644 --- a/public/stylesheets/_sass/player.scss +++ b/public/stylesheets/_sass/player.scss @@ -98,17 +98,32 @@ $icons_dir: "/images/icns/"; } } + .dragbox { + position: absolute; + top: 1px; + left: 2px; + width: 15px; + height: 26px; + background-image: url('/images/drag.png'); + cursor: move; + } + .title { position: absolute; top: 0; - left: 5px; + left: 19px; z-index: 10; - width: 330px; + width: 316px; height: 26px; line-height: 26px; display: block; float: left; overflow: hidden; + + .data.artist, .playtrack { + border-bottom: #555 1px dotted; + cursor: pointer; + } } .duration { diff --git a/public/stylesheets/albums.css b/public/stylesheets/albums.css index 0374183..53bd8ab 100644 --- a/public/stylesheets/albums.css +++ b/public/stylesheets/albums.css @@ -44,7 +44,8 @@ position: relative; padding-left: 25px; } .albums .album .tracklist ul li:hover { - background-color: #FAFAFA; } + background-color: #FAFAFA; + cursor: pointer; } .albums .album .tracklist ul li:hover .track-container .fade { background: -moz-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 250, 250, 0)), color-stop(50%, #fafafa), color-stop(100%, #fafafa)); diff --git a/public/stylesheets/player.css b/public/stylesheets/player.css index 6f50812..7d59abe 100644 --- a/public/stylesheets/player.css +++ b/public/stylesheets/player.css @@ -73,17 +73,28 @@ background: -ms-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00404040', endColorstr='#404040', GradientType=1); background: linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%); } + .player-container .playlist .playlist-tracks li .item .dragbox { + position: absolute; + top: 1px; + left: 2px; + width: 15px; + height: 26px; + background-image: url("/images/drag.png"); + cursor: move; } .player-container .playlist .playlist-tracks li .item .title { position: absolute; top: 0; - left: 5px; + left: 19px; z-index: 10; - width: 330px; + width: 316px; height: 26px; line-height: 26px; display: block; float: left; overflow: hidden; } + .player-container .playlist .playlist-tracks li .item .title .data.artist, .player-container .playlist .playlist-tracks li .item .title .playtrack { + border-bottom: #555 1px dotted; + cursor: pointer; } .player-container .playlist .playlist-tracks li .item .duration { display: block; position: absolute;