Log page simple styling

couchpotato/core/plugins/log/static/log.css

@@ -0,0 +1,30 @@
+.page.log .nav {
+	display: block;
+	text-align: center;
+	padding: 0;
+	margin: 40px 0 20px;
+	font-size: 20px;
+}
+
+	.page.log .nav li {
+		display: inline;
+		padding: 5px 10px;
+		margin: 0;
+		cursor: pointer;
+	}
+
+		.page.log .nav li:hover:not(.active) {
+			background: rgba(255, 255, 255, 0.1);
+		}
+
+		.page.log .nav li.active {
+			font-weight: bold;
+			cursor: default;
+			font-size: 30px;
+		}
+
+.page.log .loading {
+	text-align: center;
+	font-size: 20px;
+	padding: 50px;
+}

couchpotato/static/scripts/page/log.js

@@ -16,7 +16,7 @@ Page.Log = new Class({
 		var self = this;
 
 		if(self.log) self.log.destroy();
-		self.log = new Element('div.log', {
+		self.log = new Element('div.container.loading', {
 			'text': 'loading...'
 		}).inject(self.el);
 
@@ -25,17 +25,20 @@ Page.Log = new Class({
 				'nr': nr
 			},
 			'onComplete': function(json){
-				self.log.set('html', '<pre>'+json.log+'</pre>')
+				self.log.set('html', '<pre>'+json.log+'</pre>');
+				self.log.removeClass('loading');
 
 				var nav = new Element('ul.nav').inject(self.log, 'top');
 				for (var i = 0; i < json.total; i++) {
-					p(i, json.total);
 					new Element('li', {
 						'text': i+1,
+						'class': nr == i ? 'active': '',
 						'events': {
-							'click': function(){  self.getLogs(i); }
+							'click': function(e){
+								self.getLogs(e.target.get('text')-1);
+							}
 						}
-					}).inject(nav)
+					}).inject(nav);
 				};
 			}
 		});