localhots/oldhaven
1
0
Fork 0
Code Releases Activity

Added playlist tracks count to playlist icon

Browse Source
This commit is contained in:
magnolia-fan 2011-04-13 02:28:23 +04:00
parent 78c759562e
commit b7abe9a1d3
4 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/views/layouts/application.html.erb
View File

@ -29,7 +29,10 @@
<div class="time-left">0:00</div> <div class="time-left">0:00</div>
<div title="Play Tracks In Random Order" class="shuffle"><img src="/images/player/shuffle.svg" alt="shu" /></div> <div title="Play Tracks In Random Order" class="shuffle"><img src="/images/player/shuffle.svg" alt="shu" /></div>
<div title="Repeat Playlist" class="repeat"><img src="/images/player/shuffle.svg" alt="rep" /></div> <div title="Repeat Playlist" class="repeat"><img src="/images/player/shuffle.svg" alt="rep" /></div>
<div title="Show/Hide Playlist" class="playlist"><img src="/images/player/playlist.svg" alt="pls" /></div> <div title="Show/Hide Playlist" class="playlist">
<img src="/images/player/playlist.svg" alt="pls" />
<div class="count">0</div>
</div>
</div> </div>
<div id="playlist"> <div id="playlist">
<ul class="list"></ul> <ul class="list"></ul>

2
public/javascripts/player.js
View File

@ -128,5 +128,5 @@ function addToPlaylist(artist, track, length, id) {
if ($('#playlist ul.list li').length > 6) { if ($('#playlist ul.list li').length > 6) {
$('#playlist').jScrollPane(); $('#playlist').jScrollPane();
} }
$('#player .playlist .count').html($('#playlist ul.list li').length);
} }

14
public/stylesheets/beathaven.css
View File

@ -6,22 +6,22 @@ body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
#contents { #contents {
width: 1000px; width: 750px;
margin: 0 0 0 -500px; margin: 0 0 0 -375px;
left: 50%; left: 50%;
position: relative; position: relative;
/* background-color: #EEE;*/ /* background-color: #EEE;*/
} }
.inner-1 { .inner-1 {
margin: 2em; /* margin: 2em;*/
} }
h1.artist { h1.artist {
display: block; display: block;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin: 4em 0 0.5em 0; margin: 75px 0 0.5em 0;
font-size: 3em; font-size: 3em;
} }
h1.artist > span { h1.artist > span {
@ -38,13 +38,13 @@ h1.artist {
height: 250px; height: 250px;
background-color: #DDD; background-color: #DDD;
float: left; float: left;
margin: 0 1em 1em 0; margin: 0 20px 1em 0;
} }
.album .name { .album .name {
display: block; display: block;
float: left; float: left;
width: 450px; width: 480px;
font-size: 1.5em; font-size: 1.5em;
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
/* background-color: yellowgreen;*/ /* background-color: yellowgreen;*/
@ -57,7 +57,7 @@ h1.artist {
.album .tracks { .album .tracks {
display: block; display: block;
float: left; float: left;
width: 450px; width: 480px;
margin-bottom: 1em; margin-bottom: 1em;
/* background-color: lightblue;*/ /* background-color: lightblue;*/
} }

11
public/stylesheets/player.css
View File

@ -111,17 +111,24 @@
width: 20px; width: 20px;
} }
#player .repeat { #player .repeat {
margin: 17px 0 0 15px; margin: 17px 0 0 12px;
} }
#player .repeat img { #player .repeat img {
width: 20px; width: 20px;
} }
#player .playlist { #player .playlist {
margin: 12px 0 0 15px; margin: 12px 0 0 12px;
} }
#player .playlist img { #player .playlist img {
width: 20px; width: 20px;
} }
#player .playlist .count {
color: #DDD;
font-size: 9px;
width: auto;
float: right;
margin: -33px 0 0 2px;
}
#player .shuffle, #player .repeat { #player .shuffle, #player .repeat {
opacity: 0.5; opacity: 0.5;
-moz-opacity: 0.5; -moz-opacity: 0.5;