diff --git a/app/views/artist/view.rhtml b/app/views/artist/view.rhtml
index c8a2073..749809f 100644
--- a/app/views/artist/view.rhtml
+++ b/app/views/artist/view.rhtml
@@ -4,16 +4,24 @@
<%= link_to "Try again", main_path %>
<% else %>
-
<%= @artist.name %>
+
+
+ <%= @artist.name %>
+
+
+
<% @albums.each do |album| %>
-
<%= album[:object].name %> <%= (album[:object].year ? album[:object].year : '') %>
+
+ <%= album[:object].name %> <%= (album[:object].year ? album[:object].year : '') %>
+
+
<% album[:tracks].each do |track| %>
-
-
+
<%= track[:object].name %>
<% unless track[:object].length.nil? %>
diff --git a/public/images/player/add.svg b/public/images/player/add.svg
new file mode 100644
index 0000000..82c3092
--- /dev/null
+++ b/public/images/player/add.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/public/javascripts/player.js b/public/javascripts/player.js
index fa13106..5957bcd 100644
--- a/public/javascripts/player.js
+++ b/public/javascripts/player.js
@@ -28,12 +28,18 @@ $(function(){
}).disableTextSelect();
$('.tracks .play').click(function(){
addToPlaylist(
- $('h1.artist').html(),
+ $('h1.artist > span > span:first').html(),
$(this).parent().find('.track-name').html(),
Math.round($(this).parent().find('.duration').attr('data-length') / 1000),
$(this).parent().attr('id')
);
})
+ $('.album > h3.name > span.play').click(function(){
+ $(this).parent().parent().find('ul > li > span.play').click();
+ })
+ $('h1.artist > span > span.play').click(function(){
+ $('.album > ul > li > span.play').click();
+ })
$('#player .prev').click(function(){
playPrev();
}).disableTextSelect();
@@ -104,7 +110,7 @@ function playNext(auto) {
}
function addToPlaylist(artist, track, length, id) {
$('#playlist ul.list').append($(
- '
- '+
+ '
- '+
''+ artist +' — '+
''+ track +''+
''+ formatTime(length) +''+
diff --git a/public/stylesheets/beathaven.css b/public/stylesheets/beathaven.css
index 9bcaca5..189912a 100644
--- a/public/stylesheets/beathaven.css
+++ b/public/stylesheets/beathaven.css
@@ -24,6 +24,9 @@ h1.artist {
margin: 4em 0 0.5em 0;
font-size: 3em;
}
+ h1.artist > span {
+ width: auto;
+ }
.album {
width: 100%;
@@ -46,6 +49,10 @@ h1.artist {
margin: 0 0 0.5em 0;
/* background-color: yellowgreen;*/
}
+ .album .name span{
+ float: left;
+ width: auto;
+ }
.album .tracks {
display: block;
@@ -69,27 +76,47 @@ h1.artist {
float: right;
}
-.album .tracks li .play {
+span.play {
display: block;
float: left;
- width: 30px;
- height: 30px;
- border-radius: 30px;
- background-color: #05A;
- margin: 0 0.3em 0 0;
+ width: 20px;
+ height: 20px;
+ border-radius: 20px;
+ background-color: #081;
+ margin: 0.4em 0.3em 0 0;
cursor: pointer;
+ line-height: 18px;
}
- .album .tracks li .play img {
- width: 12px;
- height: 12px;
- margin: 9px 0 0 10px;
+ span.play img {
+ width: 10px;
+ height: 10px;
+ margin: 0 0 0 5px;
}
-.album .tracks li .play.disabled {
- background-color: #CDF;
+span.play.disabled {
+ background-color: #810;
}
+.album h3.name span.play {
+ display: block;
+ width: 20px;
+ line-height: 11px;
+ margin: 0.2em 0 0 0.2em;
+ background-color: #04A;
+}
+h1.artist > span > span.play {
+ display: inline-block;
+ float: none;
+ width: 28px;
+ height: 28px;
+ line-height: 20px;
+ margin: 0;
+ background-color: #04A;
+}
+ h1.artist > span > span.play img {
+ margin: 10px 0 20px 0;
+ }
.search {
width: 100%;