Improved breadcrumb in dashboard.

public/dashboard/css/app.css

@@ -18,7 +18,9 @@
 div.panel {margin: 0 0 18px 0; padding: 20px; box-shadow: none; border: solid 1px #e8e8e8;}
 
 #bread h4 {color: #ccc;}
-#bread a {color: #000;}
+#bread a {color: #000; text-transform: capitalize;}
+
+.tabs-content .panel h6, .tabs-content .panel a.button { text-transform: capitalize; }
 
 /* global */
 h6 {font-weight: bold;}

public/dashboard/index.html

@@ -29,8 +29,10 @@
 	<div class="container">
 		
 		<div id="bread" class="row">
-			
+			<h4></h4>
+			<hr />
 		</div>
+
 		<div class="row">
 			<div id="menu" class="three columns">
 				<div class="panel">

public/dashboard/js/router.js

@@ -18,13 +18,16 @@ var Router = Backbone.Router.extend({
   },
 
   routes: {
-    '/': 'home',
+    '': 'home',
     '/plugins': 'plugin',
     '/plugins/:name': 'plugin',
     '/plugins/:name/:tab': 'plugin'
   },
   home: function () {
+    console.log('home');
     $('#content').html('welcome home');
+    var _breadcrumbHTML = '<a href="/dashboard">'+app.get('name')+'</a>';
+    $('#bread > h4').empty().append(_breadcrumbHTML);
   },
   plugin: function(name, tabId) {
     var model = app.get("plugins").getByPluginName(name);
@@ -34,7 +37,7 @@ var Router = Backbone.Router.extend({
     var _breadcrumbHTML = '<a href="/dashboard">'+app.get('name')+'</a>';
     if (name) _breadcrumbHTML += ' &raquo; <a href="/dashboard/#/plugins/'+name+'">'+name+'</a>';
     if (tabId) _breadcrumbHTML += ' &raquo; <a href="/dashboard/#/plugins/'+tabId+'">'+model.getObjectById(tabId).get('name')+'</a>';
-    $('#bread').empty().append(_breadcrumbHTML);
+    $('#bread > h4').empty().append(_breadcrumbHTML);
     
     if (typeof tabId !== "undefined" && tabId !== '') view.tabId = tabId;
     view.render();

public/dashboard/js/view/partial/plugin-view.js

@@ -75,7 +75,7 @@ window.PluginView = Backbone.View.extend({
 	  else {
 	    $('#plugin-tabs-nav > dd > a:first').addClass('active');
 	    $('.tabs-content > li:first').show();
-	    $('#bread').append(' &raquo; <a href="/dashboard/#/plugins/'+this.model.get('plugin')+'/'+$('#plugin-tabs-nav > dd:first').attr('id').replace('tab-link-','')+'">'+$('#plugin-tabs-nav > dd > a:first').html()+'</a>');
+	    $('#bread > h4').append(' &raquo; <a href="/dashboard/#/plugins/'+this.model.get('plugin')+'/'+$('#plugin-tabs-nav > dd:first').attr('id').replace('tab-link-','')+'">'+$('#plugin-tabs-nav > dd > a:first').html()+'</a>');
 	  }
 	},