~ Further work on the browse page.

lib/page.php

@@ -136,7 +136,7 @@
 							foreach ($albums as $the_album) {
 								$browselist[] = array('metaAlbum' => $the_album, 'path' => $artist . '|' . $the_album);
 							}
-
+							
 							$dir_list = array(array('name' => stripslashes($artist), 'path' => urlencode($artist)));
 
 							break;
@@ -192,20 +192,25 @@
 
 					if ($browse == '/') {
 						$browse = '';
+						$browse_list = array('/');
+					}
+					else {
+						$browse_list = array_merge(array('/'), explode('/', $browse));
 					}
 
-					$browse_list = explode('/', $browse);
-
-					//print_r($browse);
-
-					if ($browse) {
-
-						foreach ($browse_list as $browse_item) {
-							$path .= $browse_item . '/';
-							$dir_list[] = array('path' => urlencode(trim($path, '/')), 'name' => $browse_item);
-						}
+					//print_r($browse_list);
 
+					foreach ($browse_list as $key => $browse_item) {
+						$path .= $browse_item . '/';
+						$dir_list[] =	array(
+											'path' => ($path == '//' ? '/' : urlencode(trim($path, '/'))),
+											'name' => $browse_item
+										);
 					}
+					
+					$smarty->assign('browse_header', $browse_item);
+					$parent_key = $key - 1;
+					$smarty->assign('browse_parent_link', $dir_list[$parent_key]['path']);
 
 					$smarty->assign('dir_list', $dir_list);
 

templates/default/browse.html

@@ -1,19 +1,24 @@
 
-			<ul id="crumb_trail">
+			<!--<ul id="crumb_trail">
 				<li><a href="{:$home_link:}"><img src="templates/{:$template:}/images/home.gif" alt="Home" /></a></li>
 
 				{:foreach from=$dir_list item=dir_list_item:}
 					<li>&bull; <a href="index.php?browse={:$dir_list_item.path:}">{:$dir_list_item.name|escape:'html':}</a></li>
 				{:/foreach:}
 
-			</ul>
+			</ul>-->
+			
+			<div id="browse_parent">
+				{:if $browse_parent_link:}<a href="index.php?browse={:$browse_parent_link:}" id="browse_back">&nbsp;</a>{:/if:}
+				<p>{:$browse_header|escape:'html':}</p>
+			</div>
+
+			<!--<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="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>
+				</ul>
 			</div>

templates/default/styles.css

@@ -65,13 +65,32 @@ p {
 	width: 106px;
 	text-shadow: 0 0 12px rgba(150, 210, 255, 0.9);
 }
-#page {
+#browse_parent {
+	height: 30px;
+	padding: 0;
+	width: 320px;
+	margin: 0 auto;
+}
+#browse_parent p {
+	padding: 8px 10px;
+	text-align: left;
+}
+#browse_parent a#browse_back {
+	display: block;
+	float: left;
+	width: 45px;
+	height: 30px;
+	margin-right: 10px;
+	background: url(templates/{:$template:}/images/back.png) center center no-repeat;
+}
+#page {
 	padding: 0px;
 	clear: left;
-}
-#list {
-	background-color: #ddd;
-	color: #333;
+}
+#list {
+	background-color: #ddd;
+	color: #333;
+	margin: 0;
 }
 #list ul {
 	list-style-type: none;
@@ -81,36 +100,36 @@ p {
 	margin-right: auto;
 }
 #list ul.list {
-	margin-top: 10px;
+	margin-top: 0;
 }
 #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;
+#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;
+}
+li .title {
+	font-weight: bold;
 }
 #song_display {
 	position: relative;