Profile settings css

couchpotato/static/scripts/library/question.js

@@ -0,0 +1,81 @@
+var Question = new Class( {
+
+	initialize : function(question, hint, answers) {
+		var self = this
+
+		self.question = question
+		self.hint = hint
+		self.answers = answers
+
+		self.createQuestion()
+		self.answers.each(function(answer) {
+			self.createAnswer(answer)
+		})
+		self.createMask()
+
+	},
+
+	createMask : function() {
+		var self = this
+
+		$(document.body).mask( {
+			'hideOnClick' : true,
+			'destroyOnHide' : true,
+			'onHide' : function() {
+				self.container.destroy();
+			}
+		}).show();
+	},
+
+	createQuestion : function() {
+
+		this.container = new Element('div', {
+			'class' : 'question'
+		}).adopt(
+			new Element('h3', {
+				'html': this.question
+			}),
+			new Element('div.hint', {
+				'html': this.hint
+			})
+		).inject(document.body)
+
+		this.container.position( {
+			'position' : 'center'
+		});
+
+	},
+
+	createAnswer : function(options) {
+		var self = this
+
+		var answer = new Element('a', Object.merge(options, {
+			'class' : 'answer button '+(options['class'] || '')+(options['cancel'] ? ' cancel' : '')
+		})).inject(this.container)
+
+		if (options.cancel) {
+			answer.addEvent('click', self.close.bind(self))
+		}
+		else if (options.request) {
+			answer.addEvent('click', function(e){
+				e.stop();
+				new Request(Object.merge(options, {
+					'url': options.href,
+					'onSuccess': function() {
+						(options.onSuccess || function(){})()
+						self.close();
+					}
+				})).send();	
+			});
+		}
+	},
+
+	close : function() {
+		$(document.body).get('mask').destroy();
+	},
+
+	toElement : function() {
+		return this.container
+	}
+
+})

couchpotato/static/style/main.css

@@ -345,3 +345,59 @@ form {
 	    rgb(73,83,98) 100%
 	);
 }
+
+.mask {
+	background: rgba(0,0,0, 0.7);
+	z-index: 100;
+}
+
+.question {
+	display: block;
+	width: 600px;
+	padding: 20px;
+	background: #f5f5f5;
+	position:fixed;
+	z-index:101;
+	text-align: center;
+	background: #5c697b;
+	
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	
+	box-shadow: 0 0 50px rgba(0,0,0,0.55);
+	-moz-box-shadow: 0 0 50px rgba(0,0,0,0.55);
+	-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.55);
+}
+
+	.question h3 {
+		font-size: 25px;
+		padding: 0;
+		margin: 0 0 20px;
+	}
+
+	.question .hint {
+		font-size: 14px;
+		color: #ccc;
+		text-shadow: none;
+	}
+
+	.question .answer {
+		font-size: 17px;
+		display: inline-block;
+		padding: 10px;
+		margin: 5px 1%;
+		cursor: pointer;
+		width: auto;
+	}
+		.question .answer:hover {
+			background: #f1f1f1;
+		}
+	
+		.question .answer.delete {
+			background-color: #a82f12;
+		}
+		.question .answer.cancel {
+			margin-top: 20px;
+			background-color: #4c5766;
+		}

couchpotato/static/style/page/settings.css

@@ -149,6 +149,8 @@
 			margin: 0;
 			padding: 6px 0 0;
 		}
+		
+		.page.settings .xsmall { width: 20px !important; text-align: center; }
 
 	.page.settings input[type=text], .page.settings input[type=password] {
 		padding: 5px 3px;