From 05a7376a50a8e644f25bc8f1c628c94256a0a7eb Mon Sep 17 00:00:00 2001
From: Dan Barber <danbee@gmail.com>
Date: Thu, 14 Jan 2010 21:27:33 +0000
Subject: [PATCH] ~ Started updating styling for playlist and browser.

---
 lib/js/neompc.js                     |   6 ++-
 templates/default/browse.html        |  14 ++++---
 templates/default/images/del.png     | Bin 3631 -> 1136 bytes
 templates/default/playlist.html      |  22 ++++++-----
 templates/default/playlist_item.html |  23 ++++++++++-
 templates/default/styles.css         |  56 ++++++++++++++++++++-------
 6 files changed, 88 insertions(+), 33 deletions(-)

diff --git a/lib/js/neompc.js b/lib/js/neompc.js
index 5043469..e19b757 100644
--- a/lib/js/neompc.js
+++ b/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);
 		}
 	});
 
diff --git a/templates/default/browse.html b/templates/default/browse.html
index 528d11c..ecb8d68 100644
--- a/templates/default/browse.html
+++ b/templates/default/browse.html
@@ -9,9 +9,11 @@
 			</ul>
 
 			<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">
-				{:foreach from=$browselist item=browselist_item:}
-					{:include file="default/browselist_item.html":}
-				{:/foreach:}
-			</ul>
+
+			<div id="list">
+				<ul class="list">
+					{:foreach from=$browselist item=browselist_item:}
+						{:include file="default/browselist_item.html":}
+					{:/foreach:}
+				</ul>
+			</div>
diff --git a/templates/default/images/del.png b/templates/default/images/del.png
index 8fb4a9ab961fd11b008900cbf6a32babada5fa28..a8e26ffbb59195eeefeeabecacaafcde1fb90f29 100644
GIT binary patch
delta 1130
zcmV-w1eN=*9PkK0iBL{Q4GJ0x0000DNk~Le0000K0000K2nGNE0F8+q4FCWD0drDE
zLIAGL9O(c600v@9M??U|09620?qKgEks%j<00(qQO+^RV0S*)mFQ=Y^(f|Me8FWQh
zbVF}#ZDnqB07G(RVRU6=Aa`kWXdp*PO;A^X4i^9b1ItN7K~y-)t(8w`6jvO_KfgD#
zyE@6tFj9Mon`|PoxS_S}x!7aDLvWX{c<3QeAt5Lt>dC9@L03GOgG-b|SWpI(oJxCt
ztXFAktBIr{lk6S>MTk4@x=D6-UJsdtt>oAr{0?uv@BN0~pZ9sffN8A_K=qe^09_H$
zu`Yl)paDc8((A`i1HqJtBt>LcM4Z@%L?jVKk&2>7iHI40b7S2Wk(BTIMn8@T;QPKI
zBA?&BefvT#m-{XZ!;aP(&-0{GsoYh6O8o>-C=|}j&dy%k-rm+Cg5x-ewY9Zhi^bxC
z@B9B0i^X0)O{-ikm-GQvtJN9`@(S{`TCMS^9z~HZm&+x<(pnp4oOWt*a`H65vl}-E
zg8<#>aC~Zt-1M~bHVCQ!$BrGdUO#!lo0Sz*GKo7r&bQaElgs5!11X?m_G=k`hG7RF
z3<6Ta!*q9cc=g}`hEik;1q)#P=~G_bzmGjSih1Y|jUYfo2*a=o7z}hwYpwU2)9KJ@
zw@D5SF*Gv5i^WBZR0^#%FBTUW9vLBFS?sl1M4e8*p}HSO#qEzg&l7;-Q&W7X*V$_}
zN!m7cI?d{%N31=5jGa!Cv~Bi(noT~`>ztUH0>JY;1@r(hfiBR#ckkZ9$&)9)&P`7{
zN`$|bmatqGLn%_m{#598o84B6kBtVW&Yve+C{VB0!%C%c7ia@r8JNLC3ci0E1l3F?
zW4&2f;m<pFu#O(3Uk(92zI(^1%a=KE_ADD48y}C4kN*(CFIwvz5s4Ik2bk8HsMSLE
zdWd0w2#6r2iSG6GwfHBWnu?-GL?n^V=g$P2o6DI@##&om=6R_^(zf?E83rm&J7L>A
zFO_)x@FAH@#@eXWmh<`infOMD5)l(PJU2IYVRUrVdAYR2ALTN`V`C&;m)$U=xwS=W
zYm415B<VQVV`Kbw>lUwnmX=7T)6U%7+y&sUh?pvFx7yy`)&PH3t2h%Aq+FN1Fr-<l
z@#XwHU(C<btkvj*AxYQ8otR*~T19J3eAWQ88P{4w_TizD$^AKNHu<o*$v4-okv(?~
zfZomyzu&xxW11u^i(a=&d`|k_zbV>roCJWI&C*z3NAK<N)s-uM<Ys0Ff}jnMo0&Nr
zMG@=OD&1}uFPjCxaU2tf1{r9T%jHrOMF+w`pde5<2o757|H45;dcN=P7K_CNfXT_p
z(~U->tF_ji=c!7ia#zF80GBRZ`f+x4_Tu~Z?;}85*ELsHSD#(IdUe6~{oO&(5<}7g
wjsTy<?g6PjU}K^ocmw(oz#0Us{NGQ&zvH<DGZlJw3;+NC07*qoM6N<$g29InxBvhE

literal 3631
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
B@1Fnw

diff --git a/templates/default/playlist.html b/templates/default/playlist.html
index 1845ee2..977bc20 100644
--- a/templates/default/playlist.html
+++ b/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>
+
+			<div id="list">
+				{:if $playlist:}
 
-			<ul class="list">
-				{:foreach from=$playlist item=playlist_item:}
-					{: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>
diff --git a/templates/default/playlist_item.html b/templates/default/playlist_item.html
index d5eb2fd..f28444a 100644
--- a/templates/default/playlist_item.html
+++ b/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>
diff --git a/templates/default/styles.css b/templates/default/styles.css
index 6ceed1f..8acfab5 100644
--- a/templates/default/styles.css
+++ b/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;
@@ -65,29 +65,58 @@ p {
 	width: 106px;
 	text-shadow: 0 0 12px rgba(150, 210, 255, 0.9);
 }
-#page {
+#page {
 	padding: 0px;
 	clear: left;
+}
+#list {
+	background-color: #ddd;
+	color: #333;
 }
-#page ul {
+#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;