diff --git a/couchpotato/core/media/movie/suggestion/static/suggest.css b/couchpotato/core/media/movie/suggestion/static/suggest.css index 99d108d3..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,9 +74,45 @@ font-size: 11px; font-style: italic; text-align: right; - } + .suggestions .media_result .data .info .plot { + display: block; + font-size: 11px; + 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 .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; } @@ -102,7 +138,7 @@ .suggestions .media_result .actions { position: absolute; - bottom: 10px; + top: 10px; right: 10px; display: none; width: 140px; @@ -110,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 8664b0be..cb09ef4a 100644 --- a/couchpotato/core/media/movie/suggestion/static/suggest.js +++ b/couchpotato/core/media/movie/suggestion/static/suggest.js @@ -95,6 +95,10 @@ var SuggestList = new Class({ ); m.data_container.removeEvents('click'); + var plot = false; + if(m.info.plot && m.info.plot.length > 0) + plot = m.info.plot; + // 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', { @@ -103,6 +107,14 @@ var SuggestList = new Class({ }) : null, 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 = plot ? new Element('span.plot', { + 'text': plot, + 'events': { + 'click': function(){ + this.toggleClass('full') + } + } }) : null )