~ Started updating styling for playlist and browser.

lib/js/neompc.js

@@ -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);
 		}
 	});
 

templates/default/browse.html

@@ -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>
 
-			<ul class="list">
+			<div id="list">
-				{:foreach from=$browselist item=browselist_item:}
+				<ul class="list">
-					{:include file="default/browselist_item.html":}
+					{:foreach from=$browselist item=browselist_item:}
-				{:/foreach:}
+						{:include file="default/browselist_item.html":}
-			</ul>
+					{:/foreach:}
+				</ul>
+			</div>

templates/default/playlist.html

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

templates/default/playlist_item.html

@@ -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>

templates/default/styles.css

@@ -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 {
+#list ul li {
-	padding: 0px 1px 1px 0px;
+	padding: 3px 10px 3px 10px;
-	border-top: 1px solid #666;
+	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;