Question and loader animation

couchpotato/core/media/movie/_base/static/list.js

@@ -564,7 +564,7 @@ var MovieList = new Class({
 
 		if(self.movies.length === 0 && self.options.loader){
 
-			self.loader_first = new Element('div.mask.loading').adopt(
+			self.loader_first = new Element('div.mask.loading.with_message').adopt(
 				new Element('div.message', {'text': self.options.title ? 'Loading \'' + self.options.title + '\'' : 'Loading...'})
 			).inject(self.el, 'top');
 			createSpinner(self.loader_first);
@@ -574,7 +574,7 @@ var MovieList = new Class({
 				lfc.addClass('show');
 			}, 10);
 
-			self.el.setStyle('min-height', 120);
+			self.el.setStyle('min-height', 220);
 
 		}
 

couchpotato/static/scripts/block/menu.js

@@ -71,6 +71,10 @@ var BlockMenu = new Class({
 
 						if(self.shown){
 							self.el.addEvent('outerClick', self.removeOuterClick.bind(self));
+							this.addEvent('outerClick', function(e) {
+								if (e.target.get('tag') != 'input')
+									self.removeOuterClick();
+							});
 						}
 						else {
 							self.removeOuterClick();

couchpotato/static/scripts/couchpotato.js

@@ -339,16 +339,18 @@
 
 		self.unBlockPage();
 
-		self.mask = new Element('div.mask').adopt(
-			new Element('div').adopt(
+		self.mask = new Element('div.mask.with_message').adopt(
+			new Element('div.message').adopt(
 				new Element('h1', {'text': title || 'Unavailable'}),
 				new Element('div', {'text': message || 'Something must have crashed.. check the logs ;)'})
 			)
-		).fade('hide').inject(document.body).fade('in');
+		).inject(document.body);
 
-		createSpinner(self.mask, {
-			'top': -50
-		});
+		createSpinner(self.mask);
+
+		setTimeout(function(){
+			self.mask.addClass('show');
+		}, 10);
 	},
 
 	unBlockPage: function(){

couchpotato/static/scripts/library/question.js

@@ -15,21 +15,40 @@ var Question = new Class( {
 	},
 
 	createQuestion : function() {
-		var self = this;
+		var self = this,
+			h3, hint;
 
 		self.container = new Element('div.mask.question')
 			.grab(self.inner = new Element('div.inner').adopt(
-				new Element('h3', {
+				h3 = new Element('h3', {
 					'html': this.question
 				}),
-				new Element('div.hint', {
+				hint = this.hint ? new Element('div.hint', {
 					'html': this.hint
-				})
+				}) : null
 			)
 		).inject(document.body);
 
 		setTimeout(function(){
 			self.container.addClass('show');
+
+			self.inner.getElements('> *').each(function(el, nr){
+				dynamics.css(el, {
+					opacity: 0,
+					translateY: 50
+				});
+
+				dynamics.animate(el, {
+					opacity: 1,
+					translateY: 0
+				}, {
+					type: dynamics.spring,
+					frequency: 200,
+					friction: 300,
+					duration: 800,
+					delay: 400 + (nr * 100)
+				});
+			});
 		}, 10);
 
 	},
@@ -67,8 +86,31 @@ var Question = new Class( {
 		};
 		self.container.addEventListener('transitionend', ended, false);
 
+		// Hide items
+		self.inner.getElements('> *').reverse().each(function(el, nr){
+			dynamics.css(el, {
+				opacity: 1,
+				translateY: 0
+			});
+
+			dynamics.animate(el, {
+				opacity: 0,
+				translateY: 50
+			}, {
+				type: dynamics.spring,
+				frequency: 200,
+				friction: 300,
+				duration: 800,
+				anticipationSize: 175,
+				anticipationStrength: 400,
+				delay: nr * 100
+			});
+		});
+
 		// animate out
-		self.container.removeClass('show');
+		dynamics.setTimeout(function(){
+			self.container.removeClass('show');
+		}, 200);
 	},
 
 	toElement : function() {

couchpotato/static/style/combined.min.css

@@ -592,13 +592,14 @@ input,select,textarea{font-size:1em;font-weight:300;padding:6.67px;background:#F
 .question.show{opacity:1}
 .question .inner{width:100%;max-width:500px}
 .question h3{display:block;margin-bottom:20px;font-size:1.4em;font-weight:lighter}
-.question a{border-color:#FFF;color:#FFF}
+.question a{border-color:#FFF;color:#FFF;transition:none}
 .question a:hover{background:#FFF;color:#ac0000}
-.mask{background:rgba(0,0,0,.8);z-index:1000;text-align:center;position:absolute;top:0;left:0;opacity:0;transition:opacity 1000ms}
+.mask{background:rgba(0,0,0,.8);z-index:1000;text-align:center;position:absolute;top:0;left:0;opacity:0;transition:opacity 500ms}
 .mask .message,.mask .spinner{position:absolute;top:50%;left:50%}
-.mask .message{color:#FFF;text-align:center;width:320px;margin:-49px 0 0 -160px;font-size:16px;opacity:.5}
+.mask .message{color:#FFF;text-align:center;width:320px;margin:-49px 0 0 -160px;font-size:16px}
 .mask .spinner{width:22px;height:22px;display:block;background:#fff;margin-top:-11px;margin-left:-11px;outline:transparent solid 1px;-webkit-animation:rotating 2.5s cubic-bezier(.9,0,.1,1)infinite normal;animation:rotating 2.5s cubic-bezier(.9,0,.1,1)infinite normal;-webkit-transform:scale(0);transform:scale(0)}
 .page.settings.active,.table .item{display:-webkit-flex;display:-ms-flexbox}
+.mask.with_message .spinner{margin-top:-88px}
 .mask.show{pointer-events:auto;opacity:1}
 .mask.show .spinner{-webkit-transform:scale(1);transform:scale(1)}
 .mask.hide{opacity:0}

couchpotato/static/style/main.scss

@@ -651,6 +651,7 @@ input, textarea, select {
 	a {
 		border-color: #FFF;
 		color: #FFF;
+		transition: none;
 
 		&:hover {
 			background: #FFF;
@@ -670,7 +671,7 @@ input, textarea, select {
 	bottom: 0;
 	left: 0;
 	opacity: 0;
-	transition: opacity 1000ms;
+	transition: opacity 500ms;
 	pointer-events: none;
 
 	$spinner_size: 22px;
@@ -684,7 +685,6 @@ input, textarea, select {
 		width: 320px;
 		margin: -($spinner_size*2 + 5px) 0 0 -160px;
 		font-size: 16px;
-		opacity: .5;
 	}
 
 	.spinner {
@@ -702,6 +702,12 @@ input, textarea, select {
 		transform: scale(0);
 	}
 
+	&.with_message {
+		.spinner {
+			margin-top: -($spinner_size*4);
+		}
+	}
+
 	&.show {
 		pointer-events: auto;
 		opacity: 1;