danbarber/neompc
1
0
Fork 0
mirror of https://github.com/danbee/neompc synced 2025-03-04 08:39:10 +00:00
Code Issues Releases Wiki Activity

~ Started updating styling for playlist and browser.

Browse Source
This commit is contained in:
Dan Barber 2010-01-14 21:27:33 +00:00
parent c8f51e66be
commit 05a7376a50
6 changed files with 88 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/js/neompc.js
View File

@ -82,6 +82,7 @@ function update_progress(song_position, song_length) {
function hide_volume() {
$('#volume_container').hide();
$('#volume_button').css('visibility', 'visible');
$('#volume_button').blur();
}
function show_volume() {
@ -113,6 +114,9 @@ $(document).ready(function(){
start: function() {
this.rel = '1';
vol_int = setInterval('ajax_control(\'volume\', new_volume);', 250);
if (typeof(hide_vol) != 'undefined') {
clearTimeout(hide_vol);
}
},
drag: function() {
new_volume = pos_to_volume(parseInt($('#volume_slider').css((vol_orientation == 'h' ? 'left' : 'top'))));
@ -121,7 +125,7 @@ $(document).ready(function(){
stop: function() {
clearInterval(vol_int);
ajax_control('volume', new_volume);
setTimeout('hide_volume(); $(\'#volume_slider\').attr(\'rel\', \'\');', 1000);
hide_vol = setTimeout('hide_volume(); $(\'#volume_slider\').attr(\'rel\', \'\');', 2000);
}
});

2
templates/default/browse.html
View File

@ -10,8 +10,10 @@
<div id="buttons"><a href="index.php?action=playall"><img src="templates/{:$template:}/images/playall.gif" /></a> <a href="index.php?action=addall"><img src="templates/{:$template:}/images/addall.gif" /></a></div>
<div id="list">
<ul class="list">
{:foreach from=$browselist item=browselist_item:}
{:include file="default/browselist_item.html":}
{:/foreach:}
</ul>
</div>

BIN
templates/default/images/del.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

6
templates/default/playlist.html
View File

@ -1,6 +1,8 @@
{:if $playlist:}
<div id="buttons"><a href="{:$playlist_clear_link:}"><img src="templates/{:$template:}/images/delall.gif" /></a></div>
<div id="list">
{:if $playlist:}
<ul class="list">
{:foreach from=$playlist item=playlist_item:}
{:include file="default/playlist_item.html":}
@ -9,4 +11,4 @@
{:else:}
<p>(Empty playlist)</p>
{:/if:}
</div>

23
templates/default/playlist_item.html
View File

@ -1 +1,22 @@
{:if $playlist_item.Pos == $playing:}<li class="playing">{:else:}<li>{:/if:}<a href="{:$playlist_remove_link:}{:$playlist_item.Pos:}"><img src="templates/{:$template:}/images/del.gif" alt="Remove from Playlist" class="button" /></a><a href="{:$playlist_play_link:}{:$playlist_item.Pos:}"><img src="templates/{:$template:}/images/play.gif" alt="Play" class="button" /></a><img src="templates/{:$template:}/images/note.gif" class="icon" /> <span class="pos">{:$playlist_item.Pos+1|string_format:"%02d":}.</span> {:if $playlist_item.Title:}<span class="title">{:$playlist_item.Title:}</span>{:if $playlist_item.Artist && $show_extra_track_info:}<br /><span class="artist">{:$playlist_item.Artist:}</span> {:if $playlist_item.Album:}<span class="album">({:$playlist_item.Album:})</span>{:/if:}{:/if:}{:else:}{:$playlist_item.file_name:}{:/if:}</li>
{:if $playlist_item.Pos == $playing:}
<li class="playing">
{:else:}
<li>
{:/if:}
<a class="remove" href="{:$playlist_remove_link:}{:$playlist_item.Pos:}"><img src="templates/{:$template:}/images/del.png" alt="Remove from Playlist" class="button" /></a>
<a class="play" href="{:$playlist_play_link:}{:$playlist_item.Pos:}">
<span class="pos">{:$playlist_item.Pos+1|string_format:"%02d":}</span>
{:if $playlist_item.Title:}
<span class="title">{:$playlist_item.Title:}</span>
{:if $playlist_item.Artist && $show_extra_track_info:}
<br />
<span class="artist">{:$playlist_item.Artist:}</span>
{:if $playlist_item.Album:}
<!--<span class="album">({:$playlist_item.Album:})</span>-->
{:/if:}
{:/if:}
{:else:}
{:$playlist_item.file_name:}
{:/if:}
</a>
</li>

54
templates/default/styles.css
View File

@ -7,14 +7,14 @@ img {
}
a {
text-decoration: none;
color: #fff;
color: #333;
}
body {
background: #333 url(templates/{:$template:}/images/menu_shadow.png) center 29px repeat-x;
background: #333 url(templates/{:$template:}/images/menu_shadow.png) center 29px repeat-x fixed;
color: #fff;
font: 13px helvetica,verdana,sans-serif;
font: 14px helvetica,verdana,sans-serif;
text-align: center;
margin: 45px 0px 0px 0px;
margin: 30px 0px 0px 0px;
}
p {
margin-bottom: 5px;
@ -69,25 +69,54 @@ p {
padding: 0px;
clear: left;
}
#page ul {
#list {
background-color: #ddd;
color: #333;
}
#list ul {
list-style-type: none;
width: 280px;
max-width: 320px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
#page ul.list {
#list ul.list {
margin-top: 10px;
}
#page ul li {
padding: 0px 1px 1px 0px;
border-top: 1px solid #666;
#list ul li {
padding: 3px 10px 3px 10px;
border-top: 1px solid white;
border-bottom: 1px solid #aaa;
}
#list li .pos {
float: left;
padding-right: 10px;
padding-top: 3px;
font-size: 22px;
color: #666;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
font-weight: bold;
}
li .play {
display: block;
}
li .remove {
float: right;
padding: 5px 0px 3px;
display: block;
}
li.playing {
background: #ccc;
border-bottom: 1px solid #999;
}
li .title {
font-weight: bold;
}
#song_display {
position: relative;
width: 280px;
height: 217px;
margin: 0px auto 5px;
margin: 45px auto 5px;
/* height: 55px; */
text-align: left;
font-size: 14px;
@ -265,9 +294,6 @@ img.button {
margin-left: 3px;
border: 0px none !important;
}
li.playing {
background: #444;
}
#progress {
background: #222 url(templates/{:$template:}/images/progress_back.png) center center repeat-x;
border: 1px solid #666;