Dashboard thumbnails height not set properly. fix #1698

couchpotato/core/plugins/file/static/file.js

@@ -1,11 +1,11 @@
 var File = new Class({
 
-	initialize: function(file){
+	initialize: function(type, file){
 		var self = this;
 
 		if(!file){
 			self.empty = true;
-			self.el = new Element('div');
+			self.el = new Element('div.empty_file.'+type);
 			return
 		}
 
@@ -22,7 +22,10 @@ var File = new Class({
 		var file_name = self.data.path.replace(/^.*[\\\/]/, '');
 
 		self.el = new Element('div', {
-			'class': 'type_image ' + self.type.identifier
+			'class': 'type_image ' + self.type.identifier,
+			'styles': {
+				'background-image': 'url('+Api.createUrl('file.cache') + file_name+')'
+			}
 		}).adopt(
 			new Element('img', {
 				'src': Api.createUrl('file.cache') + file_name
@@ -45,7 +48,7 @@ var FileSelect = new Class({
 		});
 
 		if(single)
-			return new File(results.pop());
+			return new File(type, results.pop());
 
 		return results;
 

couchpotato/core/plugins/movie/static/movie.css

@@ -11,7 +11,6 @@
 	
 	.movies.thumbs_list > div:not(.description) {
 		margin-right: -4px;
-		text-align: center;
 	}
 	
 	.movies .loading {
@@ -165,14 +164,6 @@
 				background: none;
 				transition: none;
 			}
-			
-				.movies.thumbs_list .movie.no_thumbnail .data { background-image: linear-gradient(-30deg, rgba(255, 0, 85, .2) 0,rgba(125, 185, 235, .2) 100%);
-				}
-				.movies.thumbs_list .movie.no_thumbnail:nth-child(2n+6) .data { background-image: linear-gradient(-20deg, rgba(125, 0, 215, .2) 0, rgba(4, 55, 5, .7) 100%); }
-				.movies.thumbs_list .movie.no_thumbnail:nth-child(3n+6) .data { background-image: linear-gradient(-30deg, rgba(155, 0, 85, .2) 0,rgba(25, 185, 235, .7) 100%); }
-				.movies.thumbs_list .movie.no_thumbnail:nth-child(4n+6) .data { background-image: linear-gradient(-30deg, rgba(115, 5, 235, .2) 0, rgba(55, 180, 5, .7) 100%); }
-				.movies.thumbs_list .movie.no_thumbnail:nth-child(5n+6) .data { background-image: linear-gradient(-30deg, rgba(35, 15, 215, .2) 0, rgba(135, 215, 115, .7) 100%); }
-				.movies.thumbs_list .movie.no_thumbnail:nth-child(6n+6) .data { background-image: linear-gradient(-30deg, rgba(35, 15, 215, .2) 0, rgba(135, 15, 115, .7) 100%); }
 				
 				.movies.thumbs_list .movie:hover .data {
 					background: rgba(0,0,0,0.9);
@@ -222,7 +213,13 @@
 				width: 100%;
 				height: 100%;
 				transition: none;
+				background: no-repeat center;
+				background-size: cover;
 			}
+				.movies.thumbs_list .no_thumbnail .empty_file {
+					width: 100%;
+					height: 100%;
+				}
 
 		.movies .poster img,
 		.options .poster img {
@@ -235,6 +232,7 @@
 				top: 0;
 				bottom: 0;
 				border-radius: 0;
+				opacity: 0;
 			}
 		
 			.movies .info {

couchpotato/core/providers/movie/couchpotatoapi/main.py

@@ -2,7 +2,6 @@ from couchpotato import get_session
 from couchpotato.core.event import addEvent, fireEvent
 from couchpotato.core.helpers.encoding import tryUrlencode
 from couchpotato.core.helpers.request import jsonified, getParams
-from couchpotato.core.helpers.variable import tryInt
 from couchpotato.core.logger import CPLog
 from couchpotato.core.providers.movie.base import MovieProvider
 from couchpotato.core.settings.model import Movie

couchpotato/static/scripts/page/home.js

@@ -65,31 +65,37 @@ Page.Home = new Class({
 
 		// Make all thumbnails the same size
 		self.soon_list.addEvent('loaded', function(){
-			var images = $(self.soon_list).getElements('img'),
+			var images = $(self.soon_list).getElements('.poster'),
 				timer,
-				lowest = null;
+				highest = 100;
 
-			images.addEvent('load', function(){
+			images.each(function(img_container){
-				var height = this.getSize().y;
+				img_container.getElements('img').addEvent('load', function(){
-				if(!lowest || lowest > height){
+					var img = this,
-					lowest = height;
+						height = img.getSize().y;
-					if(timer) clearTimeout(timer);
+					if(!highest || highest < height){
-					timer = (function(){
+						highest = height;
-						images.getParent().setStyle('height', lowest);
+						if(timer) clearTimeout(timer);
-					}).delay(300)
+						timer = (function(){
-				}
+							images.setStyle('height', highest);
+						}).delay(300);
+					}
+				});
 			});
 
 			$(window).addEvent('resize', function(){
 				if(timer) clearTimeout(timer);
 				timer = (function(){
-					var lowest;
+					var highest = 100;
-					images.each(function(img){
+					images.each(function(img_container){
+						var img = img_container.getElement('img');
+						if(!img) return
+
 						var height = img.getSize().y;
-						if(!lowest || lowest > height)
+						if(!highest || highest < height)
-							lowest = height;
+							highest = height;
 					});
-					images.getParent().setStyle('height', lowest);
+					images.setStyle('height', highest);
 				}).delay(300);
 			});
 		});