Search and login

couchpotato/core/media/_base/search/static/search.js

@@ -15,39 +15,40 @@ var BlockSearch = new Class({
 					'touchend': self.clear.bind(self)
 				}
 			}),
-			new Element('div.input').adopt(
-				self.input = new Element('input', {
-					'placeholder': 'Search & add a new media',
+			new Element('div.wrapper').adopt(
+				new Element('div.input').grab(
+					self.input = new Element('input', {
+						'placeholder': 'Search & add a new media',
+						'events': {
+							'input': self.keyup.bind(self),
+							'paste': self.keyup.bind(self),
+							'change': self.keyup.bind(self),
+							'keyup': self.keyup.bind(self),
+							'focus': function(){
+								if(focus_timer) clearTimeout(focus_timer);
+								if(this.get('value'))
+									self.hideResults(false);
+							},
+							'blur': function(){
+								focus_timer = (function(){
+									self.el.removeClass('focused');
+								}).delay(100);
+							}
+						}
+					})
+				),
+				self.result_container = new Element('div.results_container', {
+					'tween': {
+						'duration': 200
+					},
 					'events': {
-						'input': self.keyup.bind(self),
-						'paste': self.keyup.bind(self),
-						'change': self.keyup.bind(self),
-						'keyup': self.keyup.bind(self),
-						'focus': function(){
-							if(focus_timer) clearTimeout(focus_timer);
-							self.el.addClass('focused');
-							if(this.get('value'))
-								self.hideResults(false);
-						},
-						'blur': function(){
-							focus_timer = (function(){
-								self.el.removeClass('focused');
-							}).delay(100);
+						'mousewheel': function(e){
+							(e).stopPropagation();
 						}
 					}
-				})
-			),
-			self.result_container = new Element('div.results_container', {
-				'tween': {
-					'duration': 200
-				},
-				'events': {
-					'mousewheel': function(e){
-						(e).stopPropagation();
-					}
-				}
-			}).adopt(
-				self.results = new Element('div.results')
+				}).grab(
+					self.results = new Element('div.results')
+				)
 			)
 		);
 
@@ -67,6 +68,7 @@ var BlockSearch = new Class({
 
 			self.last_q = '';
 			self.input.set('value', '');
+			self.el.addClass('focused');
 			self.input.focus();
 
 			self.media = {};

couchpotato/core/media/_base/search/static/search.scss

@@ -20,33 +20,45 @@
 
 	}
 
-	.input {
+	.wrapper {
 		position: relative;
+		left: 44px;
 		height: 100%;
+		background: $primary_color;
+		border-radius: $border_radius 0 0 $border_radius;
+		display: none;
+        box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
 
 		&:before {
 			@include transform(rotate(45deg) translateY(-60%));
 			content: '';
 			display: block;
 			position: absolute;
-			height: 20px;
-			width: 20px;
-			background: $background_color;
-			left: 33px;
+			height: 10px;
+			width: 10px;
+			background: $primary_color;
+			left: -8px;
 			top: 50%;
 			z-index: 1;
-			opacity: 0;
 		}
+	}
+
+	.input {
+		background: $background_color;
+		border-radius: $border_radius 0 0 $border_radius;
+		position: relative;
+		left: 4px;
+		height: 100%;
+		overflow: hidden;
+		width: 100%;
 
 		input {
-			opacity: 0;
 			position: absolute;
 			top: 0;
-			left: 44px;
+			left: 0;
 			height: 100%;
 			width: 100%;
 			z-index: 1;
-			box-shadow: 0 0 4px rgba(0,0,0,.1);
 
 			&::-ms-clear {
 				width : 0;
@@ -59,12 +71,12 @@
 	&.shown {
 		border-color: #04bce6;
 
-		.input {
+		.wrapper {
+			display: block;
 			width: 380px;
+		}
 
-			&:before {
-				opacity: 1;
-			}
+		.input {
 
 			input {
 				opacity: 1;

couchpotato/core/media/movie/_base/static/movie.scss

@@ -11,7 +11,6 @@
 }
 
 .list_list {
-	font-size: 15px;
 	font-weight: 300;
 
 	.poster {
@@ -232,7 +231,13 @@
 		}
 
 		.filter {
-			margin-top: -2px;
+			.wrapper {
+				width: 320px;
+			}
+
+			.button {
+				margin-top: -2px;
+			}
 
 			.search {
 				position: relative;
@@ -283,9 +288,27 @@
 			}
 		}
 
-		.more_menu .wrapper {
-			width: 320px;
-			top: $header_height;
+		.more_menu {
+
+			&.show .button {
+				color: rgba(0, 0, 0, 1);
+			}
+
+			.wrapper {
+				top: $header_height - 10px;
+				padding-top: 4px;
+				border-radius: $border_radius $border_radius 0 0;
+
+				&:before {
+					top: 0;
+					left: auto;
+					right: 22px;
+				}
+
+				ul {
+					border-radius: $border_radius $border_radius 0 0;
+				}
+			}
 		}
 	}