~ Further design improvements, mostly there now.

lib/js/neompc.js

@@ -3,6 +3,7 @@ template = '{:$template:}';
 volume_min = {:$volume_min:};
 volume_max = {:$volume_max:};
 vol_orientation = '{:$volume_orientation:}'
+page = '{:$page:}';
 vol_offset = 0;
 
 String.prototype.pad = function(l, s){
@@ -129,7 +130,13 @@ $(document).ready(function(){
 		}
 	});
 	
+	$('#removeall').click(function() {
+		return confirm('Are you sure you want to clear the whole playlist?');
+	});
+
+	if (page = 'control') {
 		ajax_control();
 		ajax_int = setInterval('ajax_control()', 1000);
+	}
 	
 });

templates/default/browselist_item.html

@@ -21,10 +21,11 @@
 
 				{:if $browselist_item.in_playlist:}
 				<li class="track playing">
+					<a class="add"><img src="templates/{:$template:}/images/add_disabled.png" alt="Add" class="button" /></a>
 				{:else:}
 				<li class="track">
-				{:/if:}
 					<a class="add" href="{:$browselist_add_link:}{:$browselist_item.file|escape:'url':}"><img src="templates/{:$template:}/images/add.png" alt="Add" class="button" /></a>
+				{:/if:}
 					<a class="play" href="{:$browselist_play_link:}{:$browselist_item.file|escape:'url':}"><img src="templates/{:$template:}/images/play.png" alt="Play" class="button" /></a>
 					<a class="browse">
 				{:if $browselist_item.Title|escape:'html':}

templates/default/playlist.html

@@ -1,5 +1,5 @@
 			<div id="list_header">
-				<div id="buttons"><a href="{:$playlist_clear_link:}"><img src="templates/{:$template:}/images/delall.gif" /></a></div>
+				<div id="buttons"><a id="removeall" href="{:$playlist_clear_link:}"><img src="templates/{:$template:}/images/delall.png" /></a></div>
 			</div>
 
 			{:if $playlist:}

templates/default/styles.css

@@ -88,11 +88,11 @@ p {
 	clear: left;
 }
 #list {
-	background-color: #ddd;
 	color: #333;
 	margin: 0;
 }
 #list ul {
+	background-color: #ddd;
 	list-style-type: none;
 	max-width: 320px;
 	text-align: left;
@@ -129,13 +129,18 @@ p {
 	text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
 	font-weight: bold;
 }
-li .play {
+li .remove,.add,.play {
+	display: block;
+	float: right;
+	padding: 2px 0px 0px 0px;
 	display: block;
 }
-li .remove .add .play {
+li .add {
-	float: right;
+	padding-right: 3px;
-	padding: 5px 0px 3px 5px;
+}
-	display: block;
+li .remove {
+	padding-right: 3px;
+	padding-top: 8px;
 }
 li.playing a {
 }
@@ -178,7 +183,7 @@ li .title {
 }
 #buttons {
 	float: right;
-	margin: 5px 10px 0px 0px;
+	margin: 5px 5px 0px 0px;
 	text-align: right;
 }