SImplify thumbslist

couchpotato/core/plugins/movie/static/list.js

@@ -1,6 +1,6 @@
 var MovieList = new Class({
 
-	Implements: [Options],
+	Implements: [Events, Options],
 
 	options: {
 		navigation: true,
@@ -44,7 +44,7 @@ var MovieList = new Class({
 			}) : null
 		);
 
-		if($(window).getSize().x < 480 && !self.options.force_view)
+		if($(window).getSize().x <= 480 && !self.options.force_view)
 			self.changeView('list');
 		else
 			self.changeView(self.getSavedView() || self.options.view || 'details');
@@ -514,6 +514,7 @@ var MovieList = new Class({
 				}
 
 				self.checkIfEmpty();
+				self.fireEvent('loaded');
 			}
 		});
 	},

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

@@ -98,21 +98,20 @@
 		}
 		
 		.movies.thumbs_list .movie {
-			width: 151px;
+			width: 16.66667%;
-			height: 230px;
+			height: auto;
 			display: inline-block;
-			margin: 0 8px 8px 0;
+			margin: 0;
 			padding: 0;
 			vertical-align: top;
+			border-radius: 0;
+			box-shadow: none;
+			border: 0;
 		}
 			
-			@media all and (max-width: 480px) {
+			@media all and (max-width: 800px) {
 				.movies.thumbs_list .movie {
-					width: 90px;
+					width: 25%;
-					height: 137px;
-					display: inline-block;
-					margin: 0 8px 8px 0;
-					padding: 0;
 				}
 			}
 
@@ -157,7 +156,9 @@
 			}
 			
 			.movies.thumbs_list .data {
+				position: absolute;
 				left: 0;
+				top: 0;
 				width: 100%;
 				padding: 10px;
 				height: 100%;
@@ -202,8 +203,11 @@
 			height: 100%;
 			border-radius: 4px 0 0 4px;
 			transition: all .6s cubic-bezier(0.9,0,0.1,1);
-
 		}
+			.movies.thumbs_list .poster {
+				position: relative;
+				border-radius: 0;
+			}
 			.movies.list_list .movie:not(.details_view) .poster,
 			.movies.mass_edit_list .poster {
 				width: 20px;
@@ -217,13 +221,21 @@
 			.movies.thumbs_list .poster {
 				width: 100%;
 				height: 100%;
+				transition: none;
 			}
 
 		.movies .poster img,
 		.options .poster img {
-			width: 101%;
+			width: 100%;
-			height: 101%;
+			height: 100%;
 		}
+			.movies.thumbs_list .poster img {
+				height: auto;
+				width: 100%;
+				top: 0;
+				bottom: 0;
+				border-radius: 0;
+			}
 		
 			.movies .info {
 				position: relative;
@@ -261,6 +273,15 @@
 					text-align: left;
 				}
 				
+					@media all and (max-width: 480px) {
+						.movies.thumbs_list .movie .info .title span,
+						.movies.thumbs_list .movie .info .year {
+							font-size: 15px;
+							line-height: 15px;
+							overflow: hidden;
+						}
+					}
+				
 				.movies.list_list .movie:not(.details_view) .info .title,
 				.movies.mass_edit_list .info .title {
 					font-size: 16px;
@@ -423,9 +444,6 @@
 		
 			.movies .movie:hover .action { opacity: 0.6; }
 			.movies .movie:hover .action:hover { opacity: 1; }
-			.movies.mass_edit_list .data .actions {
-				display: none;
-			}
 
 			.movies .data .action {
 				background-repeat: no-repeat;
@@ -436,6 +454,10 @@
 				padding: 3px;
 			}
 			
+			.movies.mass_edit_list .movie .data .actions {
+				display: none;
+			}
+
 		.movies.list_list .movie:not(.details_view):hover .actions,
 		.movies.mass_edit_list .movie:hover .actions {
 			margin: 0;
@@ -625,6 +647,12 @@
 					padding: 3px 0;
 					top: 0;
 				}
+				
+					@media all and (max-width: 480px) {
+						.movies .movie .trynext {
+							display: none;
+						}
+					}
 					.movies.mass_edit_list .trynext { display: none; }
 					.wanted .movies .movie .trynext {
 						padding-right: 50px;

couchpotato/static/scripts/page/home.js

@@ -46,7 +46,7 @@ Page.Home = new Class({
 		self.soon_list = new MovieList({
 			'navigation': false,
 			'identifier': 'soon',
-			'limit': 18,
+			'limit': 12,
 			'title': 'Available soon',
 			'description': 'These are being searched for and should be available soon as they will be released on DVD in the next few weeks.',
 			'on_empty_element': new Element('div').adopt(
@@ -63,6 +63,37 @@ Page.Home = new Class({
 			'api_call': 'dashboard.soon'
 		});
 
+		// Make all thumbnails the same size
+		self.soon_list.addEvent('loaded', function(){
+			var images = $(self.soon_list).getElements('img'),
+				timer,
+				lowest = null;
+
+			images.addEvent('load', function(){
+				var height = this.getSize().y;
+				if(!lowest || lowest > height){
+					lowest = height;
+					if(timer) clearTimeout(timer);
+					timer = (function(){
+						images.getParent().setStyle('height', lowest);
+					}).delay(300)
+				}
+			});
+
+			$(window).addEvent('resize', function(){
+				if(timer) clearTimeout(timer);
+				timer = (function(){
+					var lowest;
+					images.each(function(img){
+						var height = img.getSize().y;
+						if(!lowest || lowest > height)
+							lowest = height;
+					});
+					images.getParent().setStyle('height', lowest);
+				}).delay(300);
+			});
+		});
+
 		// Still not available
 		self.late_list = new MovieList({
 			'navigation': false,