Multiple Newznab settings page style

couchpotato/core/providers/nzb/newznab/__init__.py

@@ -9,7 +9,7 @@ config = [{
         {
             'tab': 'providers',
             'name': 'newznab',
-            'description': 'Enable multiple NewzNab providers',
+            'description': 'Enable multiple NewzNab providers such as <a href="http://nzb.su" target="_blank">NZB.su</a>',
             'options': [
                 {
                     'name': 'enabled',
@@ -22,7 +22,7 @@ config = [{
                 {
                     'name': 'host',
                     'default': 'http://nzb.su',
-                    'description': 'The hostname of your newznab provider, like http://nzb.su'
+                    'description': 'The hostname of your newznab provider'
                 },
                 {
                     'name': 'api_key',

couchpotato/core/providers/nzb/newznab/static/newznab.js

@@ -31,28 +31,51 @@ var MultipleNewznab = new Class({
 				});
 
 				self.inputs[name].getParent().hide()
+				self.inputs[name].addEvent('change', self.addEmpty.bind(self))
 			});
 
 
 			self.values.each(function(item, nr){
 				self.createItem(item.use, item.host, item.api_key);
 			});
-			
+
-			new Element('a.nice_button', {
+			new Element('div.head').adopt(
-				'text': 'Add new NewzNab provider',
+				new Element('abbr.host', {
-				'events': {
+					'text': 'Host',
-					'click': function(e){
+					'title': self.inputs['host'].getNext().get('text')
-						(e).stop();
+				}),
-						
+				new Element('abbr.api_key', {
-						self.createItem(1, '', '');
+					'text': 'Api Key',
-					}
+					'title': self.inputs['api_key'].getNext().get('text')
-				}
+				})
-			}).inject(self.fieldset.getElement('h2'), 'after');
+			).inject(self.fieldset.getElement('h2'), 'after');
+
+			self.addEmpty();
 
 		})
 
 	},
 
+	add_empty_timeout: 0,
+	addEmpty: function(){
+		var self = this;
+
+		if(self.add_empty_timeout) clearTimeout(self.add_empty_timeout);
+
+		var has_empty = false;
+		self.items.each(function(ctrl_holder){
+			if(ctrl_holder.getElement('.host').get('value') == '' && ctrl_holder.getElement('.api_key').get('value') == ''){
+				has_empty = true;
+			}
+			ctrl_holder[has_empty ? 'addClass' : 'removeClass']('is_empty');
+		});
+		if(has_empty) return;
+
+		self.add_empty_timeout = setTimeout(function(){
+			self.createItem(false);
+		}, 10);
+	},
+
 	createItem: function(use, host, api){
 		var self = this;
 
@@ -83,12 +106,12 @@ var MultipleNewznab = new Class({
 				}
 			}),
 			new Element('a.icon.delete', {
-				'text': 'delete',
 				'events': {
 					'click': self.deleteItem.bind(self)
 				}
 			})
 		).inject(self.fieldset);
+		item[!host ? 'addClass' : 'removeClass']('is_empty');
 
 		new Form.Check(checkbox, {
 			'onChange': checkbox.fireEvent.bind(checkbox, 'change')
@@ -105,6 +128,7 @@ var MultipleNewznab = new Class({
 		self.items.each(function(item, nr){
 			self.input_types.each(function(type){
 				var input = item.getElement('input.'+type);
+				if(input.getParent('.ctrlHolder').hasClass('is_empty')) return;
 
 				if(!temp[type]) temp[type] = [];
 				temp[type][nr] = input.get('type') == 'checkbox' ? +input.get('checked') : input.get('value').trim();
@@ -125,7 +149,7 @@ var MultipleNewznab = new Class({
 		(e).stop();
 
 		var item = e.target.getParent();
-		
+
 		self.items.erase(item);
 		item.destroy();
 

couchpotato/core/providers/nzb/nzbs/__init__.py

@@ -9,6 +9,7 @@ config = [{
         {
             'tab': 'providers',
             'name': 'nzbs',
+            'description': 'Id and Key can be found <a href="http://nzbs.org/index.php?action=rss" target="_blank">on your nzbs.org RSS page</a>.',
             'options': [
                 {
                     'name': 'enabled',
@@ -17,12 +18,12 @@ config = [{
                 {
                     'name': 'id',
                     'label': 'Id',
-                    'description': 'Can be found <a href="http://nzbs.org/index.php?action=rss" target="_blank">here</a>, the number after "&amp;i="',
+                    'description': 'The number after "&amp;i="',
                 },
                 {
                     'name': 'api_key',
                     'label': 'Api Key',
-                    'description': 'Can be found <a href="http://nzbs.org/index.php?action=rss" target="_blank">here</a>, the string after "&amp;h="'
+                    'description': 'The string after "&amp;h="'
                 },
             ],
         },

couchpotato/static/style/main.css

@@ -1,4 +1,7 @@
-/* @override http://localhost:5000/static/style/main.css */
+/* @override 
+	http://localhost:5000/static/style/main.css
+	http://192.168.1.20:5000/static/style/main.css
+*/
 
 html {
 	color: #fff;
@@ -35,15 +38,24 @@ input, textarea {
 	font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 }
 
+input:-moz-placeholder, textarea:-moz-placeholder {
+	color: rgba(255, 255, 255, 0.6);
+}
+
+::-webkit-input-placeholder, ::-webkit-textarea-placeholder {
+	color: rgba(255, 255, 255, 0.6);
+}
+
 a img {
 	border:none;
 }
 
 a {
 	text-decoration:none;
-	color: #fff;
+	color: #ebfcbc;
 	outline: 0;
 	cursor: pointer;
+	font-weight: bold;
 }
 a:hover { color: #f3f3f3; }
 

couchpotato/static/style/page/settings.css

@@ -38,6 +38,7 @@
 		.page.settings .tabs a {
 			display: block;
 			padding: 11px 15px;
+			color: #fff;
 		}
 		.page.settings .tabs .active a {
 			background: #4e5969;
@@ -92,6 +93,7 @@
 				position: relative;
 				margin-bottom: -25px;
 				border: none;
+				width: 20px;
 			}
 
 	.page.settings .ctrlHolder {
@@ -106,6 +108,7 @@
 		.page.settings .ctrlHolder:last-child { border: none; }
 		.page.settings .ctrlHolder:hover { background-color: rgba(255,255,255,0.05); }
 		.page.settings .ctrlHolder.focused { background-color: rgba(255,255,255,0.2); }
+		.page.settings .ctrlHolder.focused:first-child, .page.settings .ctrlHolder:first-child{ background-color: transparent; }
 
 		.page.settings .ctrlHolder .formHint {
 			float: right;
@@ -287,4 +290,43 @@
 		
 		.page.settings .directory_list .actions:last-child > .save {
 			background: #9dc156;
-		}
+		}
+		
+	.page.settings .section_newznab {
+		
+	}
+	
+	.page.settings .section_newznab .head {
+		margin: 0 0 0 60px;
+	}
+		.page.settings .section_newznab .head abbr {
+			display: inline-block;
+			font-weight: bold;
+			border-bottom: 1px dotted #fff;
+			line-height: 140%;
+			cursor: help;
+		}
+		.page.settings .section_newznab .head abbr.host {
+			margin-right: 197px;
+		}
+		
+	.page.settings .section_newznab .ctrlHolder {
+		padding-top: 2px;
+		padding-bottom: 3px;
+	}
+		
+	.page.settings .section_newznab .ctrlHolder > * {
+		margin: 0 10px 0 0;
+	}
+		
+	.page.settings .section_newznab .ctrlHolder .delete {
+		display: inline-block;
+		width: 22px;
+		height: 22px;
+		vertical-align: middle;
+		background-position: left center;
+	}
+	
+	.page.settings .section_newznab .ctrlHolder.is_empty .delete, .page.settings .section_newznab .ctrlHolder.is_empty .use {
+		visibility: hidden;
+}