Tons of little fixes

app/assets/javascripts/beathaven.coffee

@@ -43,7 +43,7 @@ class window.BeatHaven
 	setupAutocomplete: ->
 		$('#search').first().bh_autocomplete
 			serviceUrl: '/artist/autocomplete' # Страница для обработки запросов автозаполнения
-			minChars: 2 # Минимальная длина запроса для срабатывания автозаполнения
+			minChars: 3 # Минимальная длина запроса для срабатывания автозаполнения
 			delimiter: /(,|;)\s*/ # Разделитель для нескольких запросов, символ или регулярное выражение
 			maxHeight: 400 # Максимальная высота списка подсказок, в пикселях
 			width: 415 # Ширина списка

app/assets/javascripts/jquery/jquery.autocomplete.js

@@ -248,7 +248,11 @@
 			} else if (!this.isBadQuery(q)) {
 				me = this;
 				me.options.params.query = q;
-				$.get(this.serviceUrl, me.options.params, function(txt) { me.processResponse(txt); }, 'text');
+				$('#artist-load-spinner').show()
+				$.get(this.serviceUrl, me.options.params, function(txt) {
+				  me.processResponse(txt);
+				  $('#artist-load-spinner').hide();
+				}, 'text');
 			}
 		},
 

app/assets/javascripts/player.coffee

@@ -56,15 +56,14 @@ class window.Player
 			$('.playlist').append '
 			<li id="i' +Math.round(Math.random() * 999999)+ '" data-id="'+item.id+'">
 			  <div class="song-duration">' +item.duration+ '</div>
+			  <div class="remove">remove</div>
         <div class="drag"></div>
         <div class="artist-name">' +item.artist+ '</div>
         <div class="song-title">' +item.name+ '</div>
 			</li>'
 			_player.playlist.push item
 		$('.playlist').sortable axis: 'y', handle: '.drag'
-		if autoplay?
+		if initial_count == 0 and not _player.hasTrack()
-		  _player.setTrack($('.playlist li').last().attr('id').split('i')[1])
-		else if initial_count == 0 and not _player.hasTrack()
 		  _player.setTrack($('.playlist li').first().attr('id').split('i')[1])
 		false
 	
@@ -199,26 +198,28 @@ $('#empty-playlist').live 'click', ->
 
 # Playlist Actions
 
-$('.playlist li .fade, .playlist li .duration, .playlist li .remove').live 'mousemove mouseover mouseout', (e) ->
+$('.playlist li .artist-name, .playlist li .song-title, .playlist li .song-duration, .playlist li .remove').live 'mousemove mouseover mouseout', (e) ->
-	if e.type in ['mouseover', 'mousemove'] and ($(window).width() - e.clientX) < 60
+	if e.type in ['mouseover', 'mousemove'] and ($(window).width() - e.clientX) < 60 +
-		$(this).parent().find('.duration').hide()
+	  $(window).width() - $('.playlist').offset().left - $('.playlist').outerWidth()
+		$(this).parent().find('.song-duration').hide()
 		$(this).parent().find('.remove').show()
 	else
 		$(this).parent().find('.remove').hide()
-		$(this).parent().find('.duration').show()
+		$(this).parent().find('.song-duration').show()
 	false
 
-$('.playlist li .remove').live 'click', ->
+$('.playlist li .remove').live 'click', (e) ->
-	$li = $(this).parent().parent()
+	$li = $(this).parent()
 	if $li.hasClass 'now'
 		$('#jplayer').jPlayer 'clearMedia'
 		$('.player .now-playing').text '...'
 		$('.player .loaded, .player .played').width 0
 	$li.remove()
+	e.preventDefault()
 	false
 
-$('.playlist li .title .playtrack').live 'click', ->
+$('.playlist li').live 'click', ->
-	_player.setTrack $(this).parent().parent().parent().attr('id').split('i')[1]
+	_player.setTrack $(this).attr('id').split('i')[1]
 	false
 	
 # Adding To Playlist actions
@@ -231,24 +232,3 @@ $('.add-album').live 'click', ->
 		item['album'] = album.name
 	_player.addTracks album.tracks.album
 	false
-
-$('.add-track').live 'click', ->
-	track = _player.getDataFromLi $(this).parent()
-	track['artist'] = $('.artist-info .name').html()
-	track['album'] = $(this).parent().parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
-	_player.addTracks [track]
-	false
-
-$('.tracklist li').live 'mouseover mouseout', (e) ->
-	if e.type == 'mouseover'
-		$(this).find('.add-track').show()
-	else
-		$(this).find('.add-track').hide()
-	false
-
-$('.tracklist li').live 'click', (e) ->
-	track = _player.getDataFromLi this
-	track['artist'] = $('.artist-info .name').html()
-	track['album'] = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
-	_player.addTracks [track], true
-	false

app/assets/stylesheets/misc.scss

@@ -3,10 +3,6 @@
   padding: 2px 9px !important;
   font-size: 18px !important;
 }
-.large-round {
-  border-radius: 21px !important;
-  padding: 11px 11px 11px 15px !important;
-}
 
 .popover-wrapper {
   display: none;

app/assets/stylesheets/player.scss

@@ -1,8 +1,17 @@
 .player {
   .buttons {
     text-align: center;
+    height: 36px;
+  }
+  .play {
+    border-radius: 21px !important;
+    padding: 11px 11px 11px 15px !important;
+    margin-top: -10px !important;
   }
   .pause {
+    font-weight: bold;
+    border-radius: 21px !important;
+    padding: 11px 16px 11px 16px !important;
     display: none;
   }
   .now-playing {
@@ -10,16 +19,17 @@
   }
   .progress {
     width: 94%;
-    margin: 0 0 10px 3%;
+    margin: 0 0 18px 3%;
-    height: 7px;
+    height: 5px;
     background-color: #e0e0e0;
     .loaded {
       width: 66%;
-      height: 7px;
+      height: 5px;
-      background-color: #70c0c0;
+      background-color: #d0e0e0;
+      cursor: pointer;
       .played {
         width: 66%;
-        height: 7px;
+        height: 5px;
         background-color: #0090AA;
       }
     }
@@ -30,28 +40,43 @@
   margin: 20px 0 0 0;
   li {
     list-style: none;
+    background-color: #ffffff;
     border-bottom: #DDD 1px solid;
     .drag {
       float: left;
-      margin: 3px 0 0 -3px;
+      margin: 11px 0 0 -6px;
-      width: 5px;
+      width: 15px;
-      height: 32px;
+      height: 26px;
-      background-color: #DDD;
+      background: url("/assets/drag.png");
       cursor: pointer;
     }
     .artist-name {
-      font-size: 10px;
+      font-size: 11px;
-      margin: 5px 0 0 5px;
+      margin: 0 0 0 5px;
+      padding: 5px 0 0 0;
     }
     .song-title {
       margin: 0 0 5px 5px;
     }
     .song-duration {
       float: right;
-      margin: 10px 5px 0 0;
+      margin: 15px 5px 0 0;
+    }
+    .remove {
+      display: none;
+      font-size: 11px;
+      line-height: 11px;
+      color: #fffafa;
+      background-color: #cc9090;
+      border: #bb8080 1px solid;
+      border-radius: 3px;
+      padding: 0 3px 2px 3px;
+      float: right;
+      margin: 16px 5px 0 0;
+      cursor: pointer;
     }
     &.now {
-      background-color: #DEF;
+      background-color: #EAF5FF;
     }
   }
 }

app/views/layouts/application.html.haml

@@ -57,8 +57,8 @@
                 .played
             .buttons
               %a.btn.small-round.prev «
-              %a.btn.large.large-round.play ►
+              %a.btn.large.play ►
-              %a.btn.large.large-round.pause II
+              %a.btn.large.pause II
               %a.btn.small-round.next »
 
           %ul.playlist