Mass edit popup

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

@@ -281,7 +281,6 @@ var MovieList = new Class({
 		);
 
 		// Mass edit
-		self.mass_edit_select_class = new Form.Check(self.mass_edit_select);
 		Quality.getActiveProfiles().each(function(profile){
 			new Element('option', {
 				'value': profile.get('_id'),
@@ -377,10 +376,10 @@ var MovieList = new Class({
 		var indeterminate = selected > 0 && selected < movies,
 			checked = selected == movies && selected > 0;
 
-		self.mass_edit_select.set('indeterminate', indeterminate);
+		document.body[selected > 0 ? 'addClass' : 'removeClass']('mass_editing');
 
-		self.mass_edit_select_class[checked ? 'check' : 'uncheck']();
-		self.mass_edit_select_class.element[indeterminate ? 'addClass' : 'removeClass']('indeterminate');
+		self.mass_edit_select.set('checked', checked);
+		self.mass_edit_select.indeterminate = indeterminate;
 
 		self.mass_edit_selected.set('text', selected);
 	},

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

@@ -17,8 +17,10 @@ var Movie = new Class({
 		self.el = new Element('a.movie', {
 			'events': {
 				'click': function(e){
-					(e).preventDefault();
-					self.openDetails();
+					if(e.target.get('tag') != 'input'){
+						(e).preventDefault();
+						self.openDetails();
+					}
 				},
 				'mouseenter': function(){
 					if(self.actions.length <= 0){
@@ -319,8 +321,6 @@ var Movie = new Class({
 		if(!self.thumbnail)
 			self.el.addClass('no_thumbnail');
 
-		self.select_checkbox_class = new Form.Check(self.select_checkbox);
-
 		// Add profile
 		if(self.profile.data)
 			self.profile.getTypes().each(function(type){
@@ -406,11 +406,6 @@ var Movie = new Class({
 		return this.data[attr] || this.data.info[attr];
 	},
 
-	select: function(bool){
-		var self = this;
-		self.select_checkbox_class[bool ? 'check' : 'uncheck']();
-	},
-
 	isSelected: function(){
 		return this.select_checkbox.get('checked');
 	},

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

@@ -1,5 +1,7 @@
 @import "couchpotato/static/style/_mixins";
 
+$mass_edit_height: 44px;
+
 .page.movies {
 	bottom: auto;
 	z-index: 21;
@@ -23,13 +25,6 @@
 
 .movie {
 
-	.check {
-		position: absolute;
-		top: 0;
-		left: $padding;
-		display: none;
-	}
-
 	.quality {
 		span {
 			background: rgba(0,0,0,.2);
@@ -119,6 +114,22 @@
 			background: rgba(0,0,0,.1);
 		}
 
+		input[type=checkbox] {
+			position: absolute;
+			top: 50%;
+			left: $padding;
+			transform: translateY(-50%);
+			opacity: .5;
+
+			&:checked {
+				opacity: 1;
+			}
+		}
+
+		&:hover input[type=checkbox] {
+			opacity: 1;
+		}
+
 		.data {
 			padding: $padding/2 $padding;
 
@@ -148,6 +159,7 @@
 						overflow: hidden;
 						text-overflow: ellipsis;
 						white-space: nowrap;
+						margin-left: $padding;
 
 						@include media-phablet {
 							width: 100%;
@@ -278,6 +290,10 @@
 			border-width: 0 $padding/5;
 		}
 
+		input[type=checkbox] {
+			display: none;
+		}
+
 		.poster {
 			position: relative;
 			border-radius: $border_radius;
@@ -910,6 +926,7 @@
 
 
 .alph_nav {
+	position: relative;
 
 	@include media-phablet {
 		display: none;
@@ -917,6 +934,31 @@
 
 	.mass_edit_form {
 		display: none;
+		background: $background_color;
+		position: fixed;
+		top: $header_height;
+		right: 0;
+		left: $header_width;
+		flex-flow: row nowrap;
+		align-items: center;
+		transition: max-height 300ms $cubic;
+		max-height: 0;
+		overflow: hidden;
+
+		.mass_editing & {
+			display: flex;
+			max-height: $mass_edit_height;
+		}
+
+		> * {
+			display: flex;
+			align-items: center;
+		}
+
+		.select {
+			margin-left: $padding;
+		}
+
 	}
 
 	.menus {

couchpotato/static/style/combined.min.css

@@ -45,7 +45,6 @@
 @media (max-width:480px){.page.movies_manage,.page.movies_wanted{top:44px}
 }
 .page.movies_manage .load_more,.page.movies_wanted .load_more{text-align:center;padding:20px;font-size:2em;display:block}
-.movie .check{position:absolute;top:0;left:20px;display:none}
 .movie .quality span{background:rgba(0,0,0,.2);border:1px solid transparent;color:#FFF;border-radius:1px;padding:1px 3px}
 .movie .quality span.failed{background:#993619}
 .movie .quality span.available{color:#009902;border-color:#009902;background:#FFF}
@@ -65,10 +64,12 @@
 .list_list .movie{display:block;border-bottom:1px solid #eaeaea;position:relative;cursor:pointer}
 .list_list .movie:last-child{border-bottom:none}
 .list_list .movie:hover{background:rgba(0,0,0,.1)}
+.list_list .movie input[type=checkbox]{position:absolute;top:50%;left:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:.5}
+.list_list .movie input[type=checkbox]:checked,.list_list .movie:hover input[type=checkbox]{opacity:1}
 .list_list .movie .data{padding:10px 20px}
 .list_list .movie .data .info{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap}
 .list_list .movie .data .info .title{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto}
-.list_list .movie .data .info .title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.list_list .movie .data .info .title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:20px}
 @media (max-width:480px){.movies .actions{pointer-events:none}
 .list_list .movie .data{padding:10px}
 .list_list .movie .data .info{display:block}
@@ -102,6 +103,7 @@
 @media (max-width:480px){.thumb_list{padding:0 3.33px}
 .thumb_list .movie{max-width:50%;border-width:0 4px}
 }
+.thumb_list .movie input[type=checkbox]{display:none}
 .thumb_list .movie .poster{position:relative;border-radius:3px;background:center no-repeat #eaeaea;background-size:cover;overflow:hidden;width:100%;padding-bottom:150%}
 .thumb_list .movie .data{clear:both}
 .thumb_list .movie .data .info .title{display:-webkit-flex;display:-ms-flexbox;display:flex;padding:3px 0}
@@ -229,10 +231,14 @@
 .page.movie_details .trailer_container:hover{color:#ac0000}
 .page.movie_details .trailer_container:hover .icon-play,.page.movie_details .trailer_container:hover .icon-play span{opacity:1}
 .page.movie_details .trailer_container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
+.alph_nav{position:relative}
 @media (max-width:480px){.page.movie_details .trailer_container .icon-play span:first-child{margin-left:-15.71px}
 .alph_nav{display:none}
 }
-.alph_nav .mass_edit_form{display:none}
+.alph_nav .mass_edit_form{display:none;background:#FFF;position:fixed;top:80px;right:0;left:132px;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-align-items:center;-ms-flex-align:center;align-items:center;transition:max-height 300ms cubic-bezier(.9,0,.1,1);max-height:0;overflow:hidden}
+.mass_editing .alph_nav .mass_edit_form{display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:44px}
+.alph_nav .mass_edit_form>*{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
+.alph_nav .mass_edit_form .select{margin-left:20px}
 .alph_nav .menus .button{color:rgba(0,0,0,.5)}
 .alph_nav .menus .actions,.alph_nav .menus .counter,.alph_nav .menus .more_menu{float:left}
 .alph_nav .menus .actions>a,.alph_nav .menus .counter>a,.alph_nav .menus .more_menu>a{display:inline-block;width:30px;line-height:80px;text-align:center}