From 6989f6fc3326486473e51903c496587c5a10d817 Mon Sep 17 00:00:00 2001
From: Ruud <ruud@crashdummy.nl>
Date: Fri, 29 May 2015 17:10:54 +0200
Subject: [PATCH] Use background image for poster

---
 couchpotato/core/media/movie/_base/static/movie.js   | 12 ++++++++----
 couchpotato/core/media/movie/_base/static/movie.scss | 10 +++++++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/couchpotato/core/media/movie/_base/static/movie.js b/couchpotato/core/media/movie/_base/static/movie.js
index 2475555..7ec8192 100644
--- a/couchpotato/core/media/movie/_base/static/movie.js
+++ b/couchpotato/core/media/movie/_base/static/movie.js
@@ -215,15 +215,19 @@ var Movie = new Class({
 
 		var thumbnail = null;
 		if(self.data.files && self.data.files.image_poster && self.data.files.image_poster.length > 0){
-			thumbnail = new Element('img', {
+			thumbnail = new Element('div', {
 				'class': 'type_image poster',
-				'src': Api.createUrl('file.cache') + self.data.files.image_poster[0].split(Api.getOption('path_sep')).pop()
+				'styles': {
+					'background-image': 'url(' + Api.createUrl('file.cache') + self.data.files.image_poster[0].split(Api.getOption('path_sep')).pop() +')'
+				}
 			});
 		}
 		else if(self.data.info && self.data.info.images && self.data.info.images.poster && self.data.info.images.poster.length > 0){
-			thumbnail = new Element('img', {
+			thumbnail = new Element('div', {
 				'class': 'type_image poster',
-				'src': self.data.info.images.poster[0]
+				'styles': {
+					'background-image': 'url(' + self.data.info.images.poster[0] +')'
+				}
 			});
 		}
 
diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss
index 1c75320..2b9f95d 100644
--- a/couchpotato/core/media/movie/_base/static/movie.scss
+++ b/couchpotato/core/media/movie/_base/static/movie.scss
@@ -203,14 +203,16 @@
 
 	> div {
 		display: flex;
-		flex-wrap: wrap;
+		flex-flow: row wrap;
+		align-items: stretch;
 	}
 
 	.movie {
 		margin-bottom: $padding;
 		position: relative;
 		cursor: pointer;
-		flex: 1 1 auto;
+		flex: 1 auto;
+		width: 150px;
 		max-width: 14.285%;
 		border: 0 solid transparent;
 		border-width: 0 $padding/2;
@@ -237,9 +239,11 @@
 
 		.poster {
 			border-radius: $border_radius;
+			background: $theme_off center no-repeat;
+			background-size: cover;
 			overflow: hidden;
 			width: 100%;
-			float: left;
+			padding-bottom: 150%;
 		}
 
 		.data {