Show active page. fix #373

couchpotato/static/scripts/block/navigation.js

@@ -32,13 +32,21 @@ Block.Navigation = new Class({
 
 	},
 
-	addTab: function(tab){
+	addTab: function(name, tab){
 		var self = this
 
-		return new Element('li.tab_'+(tab.text.toLowerCase() || 'unknown')).adopt(
+		return new Element('li.tab_'+(name || 'unknown')).adopt(
 			new Element('a', tab)
 		).inject(self.nav)
 
+	},
+
+	activate: function(name){
+		var self = this;
+
+		self.nav.getElements('.active').removeClass('active');
+		self.nav.getElements('.tab_'+name).addClass('active');
+
 	}
 
 });

couchpotato/static/scripts/page.js

@@ -20,7 +20,7 @@ var PageBase = new Class({
 		// Create tab for page
 		if(self.has_tab){
 			var nav = App.getBlock('navigation');
-			self.tab = nav.addTab({
+			self.tab = nav.addTab(self.name, {
 				'href': App.createUrl(self.name),
 				'title': self.title,
 				'text': self.name.capitalize()
@@ -39,6 +39,7 @@ var PageBase = new Class({
 				self.el.adopt(elements);
 			}
 
+			App.getBlock('navigation').activate(self.name);
 			self.fireEvent('opened');
 		}
 		catch (e){

couchpotato/static/scripts/page/settings.js

@@ -34,6 +34,8 @@ Page.Settings = new Class({
 		else {
 			self.openTab(action);
 		}
+
+		App.getBlock('navigation').activate(self.name);
 	},
 
 	openTab: function(action){

couchpotato/static/style/main.css

@@ -203,18 +203,25 @@ body > .spinner, .mask{
 				display: block;
 				margin-top: 5px;
 			}
-
-		.header .navigation li.disabled {
-			color: #e5e5e5;
+		
+		.header .navigation li a:after {
+			content: '';
+			display: inline-block;
+			height: 2px;
+			width: 100%;
+			position: relative;
+			top: -20px;
+			background-color: #46505e;
+			outline: none;
+			box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15);
+			transition: all .4s cubic-bezier(0.9,0,0.1,1);
 		}
+		
+		.header .navigation li:hover a:after { background-color: #047792; }
+		.header .navigation li.active a:after { background-color: #04bce6; }
 
-		.header .navigation li a:link, .header .navigation li a:visited {
-			color: #fff;
-		}
-
-		.header .navigation li a:hover, .header .navigation li a:active {
-			color: #b1d8dc;
-		}
+		.header .navigation li.disabled { color: #e5e5e5; }
+		.header .navigation li a { color: #fff; }
 
 		.header .navigation .backtotop {
 			opacity: 0;