From 3e2ede585a1dcebc57a8494a267aa0a277ed2058 Mon Sep 17 00:00:00 2001
From: Ruud <ruud@crashdummy.nl>
Date: Mon, 4 Nov 2013 22:26:08 +0100
Subject: [PATCH] Animate plot to show more text

---
 .../media/movie/suggestion/static/suggest.css | 45 +++++++++++++++----
 .../media/movie/suggestion/static/suggest.js  | 19 ++++----
 2 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/couchpotato/core/media/movie/suggestion/static/suggest.css b/couchpotato/core/media/movie/suggestion/static/suggest.css
index f8946d0d..3826269c 100644
--- a/couchpotato/core/media/movie/suggestion/static/suggest.css
+++ b/couchpotato/core/media/movie/suggestion/static/suggest.css
@@ -30,10 +30,10 @@
 	}
 
 		.suggestions .media_result .data .info {
-			top: 15px;
+			top: 10px;
 			left: 15px;
 			right: 15px;
-			bottom: 15px;
+			bottom: 10px;
 			overflow: hidden;
 		}
 
@@ -74,18 +74,44 @@
 			font-size: 11px;
 			font-style: italic;
 			text-align: right;
-			
 		}
 
 		.suggestions .media_result .data .info .plot {
 			display: block;
 			font-size: 11px;
-			height: 54px;
 			overflow: hidden;
+			text-align: justify;
+			height: 100%;
+			z-index: 20;
+			top: 64px;
+			position: absolute;
+			background: #4e5969;
+			cursor: pointer;
+			transition: all .4s ease-in-out;
+			padding: 0 0 10px;
 		}
-		.suggestions .media_result:hover .data .info .plot {
-			height: 35px;
-		}
+			.suggestions .media_result .data:before {
+				bottom: 0;
+				content: '';
+				display: block;
+				height: 10px;
+				right: 0;
+				left: 0;
+				bottom: 10px;
+				position: absolute;
+				background: linear-gradient(
+				    0deg,
+				    rgba(78, 89, 105, 1) 0%,
+				    rgba(78, 89, 105, 0) 100%
+				);
+				z-index: 21;
+				pointer-events: none;
+			}
+		
+			.suggestions .media_result .data .info .plot.full {
+				top: 0;
+				overflow: auto;
+			}
 
 	.suggestions .media_result .data {
 		cursor: default;
@@ -112,7 +138,7 @@
 
 	.suggestions .media_result .actions {
 		position: absolute;
-		bottom: 10px;
+		top: 10px;
 		right: 10px;
 		display: none;
 		width: 140px;
@@ -120,6 +146,9 @@
 		.suggestions .media_result:hover .actions {
 			display: block;
 		}
+		.suggestions .media_result:hover h2 .title {
+			opacity: 0;
+		}
 		.suggestions .media_result .data.open .actions {
 			display: none;
 		}
diff --git a/couchpotato/core/media/movie/suggestion/static/suggest.js b/couchpotato/core/media/movie/suggestion/static/suggest.js
index b0748dca..cb09ef4a 100644
--- a/couchpotato/core/media/movie/suggestion/static/suggest.js
+++ b/couchpotato/core/media/movie/suggestion/static/suggest.js
@@ -95,14 +95,10 @@ var SuggestList = new Class({
 					);
 					m.data_container.removeEvents('click');
 
-					var plot = '';
-					if(m.info.plot && m.info.plot.length > 0) {
-						plot = m.info.plot.substr(0, 90);
+					var plot = false;
+					if(m.info.plot && m.info.plot.length > 0)
+						plot = m.info.plot;
 
-						if(m.info.plot.length > 90) {
-							plot = plot.replace(/\s+$/,'') + '...';
-						}
-					}
 					// Add rating
 					m.info_container.adopt(
 						m.rating = m.info.rating && m.info.rating.imdb.length == 2 && parseFloat(m.info.rating.imdb[0]) > 0  ? new Element('span.rating', {
@@ -112,8 +108,13 @@ var SuggestList = new Class({
 						m.genre = m.info.genres && m.info.genres.length > 0 ? new Element('span.genres', {
 							'text': m.info.genres.slice(0, 3).join(', ')
 						}) : null,
-						m.plot = m.info.plot && m.info.plot.length > 0 ? new Element('span.plot', {
-							'text': plot
+						m.plot = plot ? new Element('span.plot', {
+							'text': plot,
+							'events': {
+								'click': function(){
+									this.toggleClass('full')
+								}
+							}
 						}) : null
 					)