various layout fixups

CMakeLists.txt

@@ -5,11 +5,10 @@ project (ympd)
 set(CPACK_PACKAGE_DESCRIPTION_SUMMARY "MPD web client based on Websockets and
 Bootstrap")
 set(CPACK_PACKAGE_VENDOR "Andrew Karpow <andy@ndyk.de>")
-SET(CPACK_DEBIAN_PACKAGE_MAINTAINER "andy@ndyk.de")
+set(CPACK_DEBIAN_PACKAGE_MAINTAINER "andy@ndyk.de")
 set(CPACK_PACKAGE_VERSION_MAJOR "0")
 set(CPACK_PACKAGE_VERSION_MINOR "1")
-set(CPACK_PACKAGE_VERSION_PATCH "")
+set(CPACK_PACKAGE_VERSION_PATCH "0")
-set(CPACK_BINARY_DEB "ON")
 set(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} "${PROJECT_SOURCE_DIR}/cmake/")
 
 find_package(LibWebSockets REQUIRED)
@@ -17,13 +16,13 @@ find_package(LibMPDClient REQUIRED)
 include(CheckCSourceCompiles)
 include(CPack)
 
-SET(CMAKE_C_FLAGS_DEBRELEASE "-O2 -DNDEBUG -pipe")
+set(CMAKE_C_FLAGS_DEBRELEASE "-O2 -DNDEBUG -pipe")
 
 set(SOURCES
     src/ympd.c
     src/http_server.c
     src/mpd_client.c
-    )
+)
 
 add_executable(ympd ${SOURCES})
 add_definitions(-DDATADIR="${CMAKE_INSTALL_PREFIX}/share/${PROJECT_NAME}")
@@ -37,3 +36,11 @@ install(FILES contrib/init.debian DESTINATION /etc/init.d
     WORLD_READ WORLD_EXECUTE CONFIGURATIONS debrelease RENAME ${PROJECT_NAME})
 install(FILES contrib/default.debian DESTINATION /etc/default/${PROJECT_NAME}
     CONFIGURATIONS debrelease RENAME ${PROJECT_NAME})
+
+if(CMAKE_BUILD_TYPE STREQUAL "debrelease")
+    set(CPACK_BINARY_DEB "ON")
+    set(CPACK_BINARY_STGZ "OFF")
+    set(CPACK_BINARY_TGZ "OFF")
+    set(CPACK_BINARY_TZ "OFF")
+endif()
+

htdocs/css/mpd.css

@@ -28,14 +28,7 @@ body {
 	min-width: 50px;
 }
 
-.btn-group-hover .btn {
-    border-color: white;
-    background: white;
-    text-shadow: 0 1px 1px white;
-    -webkit-box-shadow: inset 0 1px 0 white;
-    -moz-box-shadow: inset 0 1px 0 white;
-    box-shadow: inset 0 1px 0 white;
-}
 .btn-group-hover {
     opacity: 0;
 }
+

htdocs/index.html

@@ -42,15 +42,6 @@
           <li><a href="#" data-toggle="modal" data-target="#about">About</a></li>
         </ul>
 
-        <form class="navbar-form navbar-right" role="search">
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="Search">
-          </div>
-          <button type="submit" class="btn btn-default">
-            <span class="glyphicon glyphicon-search"></span>
-          </button>
-        </form>
-
         <div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
           <div class="btn-group">
             <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_NEXT');">
@@ -78,7 +69,7 @@
   <div class="container starter-template">
     <div class="row">
 
-      <div class="col-md-10">
+      <div class="col-md-10 col-xs-12">
         <div id="alert" class="alert hide"></div>
         
         <div class="panel panel-primary">
@@ -101,6 +92,10 @@
             </div>
           </div><!-- /.panel-body -->
 
+          <ol id="breadcrump" class="breadcrumb">
+          </ol>
+
+
           <!-- Table -->
           <table id="salamisandwich" class="table table-hover">
             <thead>
@@ -116,8 +111,8 @@
         </div><!-- /.panel -->
       </div><!-- /.col-md-10 -->
 
-      <div class="col-md-2" >
+      <div class="col-md-2 col-xs-12" >
-        <div data-spy="affix">
+        <div data-spy="affix" data-offset-bottom="10">
           <div class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
             <button id="btnrandom" type="button" class="btn btn-default">
               <span class="glyphicon glyphicon-random"></span> Random

htdocs/js/mpd.js

@@ -14,6 +14,7 @@ var app = $.sammy(function() {
 
 	this.get('#/', function() {
 		current_app = 'playlist';
+		$('#breadcrump').addClass('hide');
 		$('#salamisandwich').find("tr:gt(0)").remove();
 		socket.send("MPD_API_GET_PLAYLIST");
 		$('#panel-heading').text("Playlist");
@@ -22,6 +23,7 @@ var app = $.sammy(function() {
 
 	this.get(/\#\/browse\/(.*)/, function() {
 		current_app = 'browse';
+		$('#breadcrump').removeClass('hide').empty();
 		$('#salamisandwich').find("tr:gt(0)").remove();
 		var path = this.params['splat'];
 		if(path == '')
@@ -29,11 +31,19 @@ var app = $.sammy(function() {
 
 		socket.send("MPD_API_GET_BROWSE,"+path);
 		$('#panel-heading').text("Browse database: "+path+"");
-		$('#browse').addClass('active');
+		var path_array = path[0].split('/');
-	});
+		var full_path = "";
+		$.each(path_array, function(index, chunk) {
+			if(path_array.length - 1 == index) {
+				$('#breadcrump').append("<li class=\"active\">"+ chunk + "</li>");
+				return;
+			}
 
-	this.get('#/about/', function() {
+			full_path = full_path + chunk;
-		$('#about').addClass('active');
+			$('#breadcrump').append("<li><a href=\"#/browse/" + full_path + "\">"+chunk+"</a></li>");
+			full_path += "/";
+		});
+		$('#browse').addClass('active');
 	});
 
 	this.get("/", function(context) {
@@ -91,13 +101,12 @@ function webSocketConnect() {
 						mouseover: function(){
 							if($(this).children().last().has("a").length == 0)
 								$(this).children().last().append(
-									"<a class=\"btn btn-xs pull-right btn-group-hover\" href=\"#/\" " +
+									"<a class=\"pull-right btn-group-hover\" href=\"#/\" " +
 									"onclick=\"socket.send('MPD_API_RM_TRACK," + $(this).attr("trackid") +"'); $(this).parents('tr').remove();\">" +
 									"<span class=\"glyphicon glyphicon-trash\"></span></a>")
 								.find('a').fadeTo('fast',1);
 						},
 						click: function() {
-							console.log($(this));
 							$('#salamisandwich > tbody > tr').removeClass('success');
 							socket.send('MPD_API_PLAY_TRACK,'+$(this).attr('trackid'));
 							$(this).addClass('success');
@@ -113,7 +122,6 @@ function webSocketConnect() {
 					//	break;
 					if(current_app !== 'browse')
 						break;
-					console.log(app);
 
 					for (var item in obj.data) {
 						switch(obj.data[item].type) {
@@ -121,7 +129,7 @@ function webSocketConnect() {
 								$('#salamisandwich > tbody').append(
 									"<tr uri=\"" + obj.data[item].dir + "\">" +
 									"<td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" + 
-									"<td><a href=\"#/browse/"+ obj.data[item].dir +"\">" + obj.data[item].dir +"</a></td>" + 
+									"<td><a href=\"#/browse/"+ obj.data[item].dir +"\">" + basename(obj.data[item].dir) +"</a></td>" + 
 									"<td></td></tr>");
 								break;
 							case "song":
@@ -145,7 +153,7 @@ function webSocketConnect() {
 							if($(this).children().last().has("a").length == 0)
 								if($(this).attr("uri").length > 0)
 									$(this).children().last().append(
-										"<a class=\"btn btn-xs pull-right btn-group-hover\" " +
+										"<a role=\"button\" class=\"pull-right btn-group-hover\" " +
 										"onclick=\"socket.send('MPD_API_ADD_TRACK," + $(this).attr("uri") +"'); $(this).parents('tr').addClass('success');\">" +
 										"<span class=\"glyphicon glyphicon-plus\"></span></a>")
 										.find('a').fadeTo('fast',1);
@@ -155,11 +163,6 @@ function webSocketConnect() {
 						}
 					});
 
-					$('#salamisandwich td:eq(1)').click(function(){
-						console.log($(this).children().attr("path"));
-						//socket.send('MPD_API_GET_BROWSE,'+;
-					});
-
 					break;
 				case "state":
 					if(JSON.stringify(obj) === JSON.stringify(last_state))
@@ -335,6 +338,9 @@ function updateDB()
 	}, 5000);
 }
 
+function basename(path) {
+   return path.split('/').reverse()[0];
+}
 
 $('#btnrandom').on('click', function (e) {
 	socket.send("MPD_API_TOGGLE_RANDOM," + ($(this).hasClass('active') ? 0 : 1));