diff --git a/couchpotato/core/plugins/movie/static/search.css b/couchpotato/core/plugins/movie/static/search.css index 957a3cd4..e0ef4b84 100644 --- a/couchpotato/core/plugins/movie/static/search.css +++ b/couchpotato/core/plugins/movie/static/search.css @@ -14,59 +14,93 @@ margin: 0; font-size: 14px; width: 100%; + height: 24px; } + + .search_form .input .enter { + background: #369545 url('../images/sprite.png') right -188px no-repeat; + padding: 0 20px 0 4px; + border-radius: 2px; + text-transform: uppercase; + font-size: 10px; + margin-left: -78px; + display: inline-block; + opacity: 0; + position: relative; + top: -2px; + cursor: pointer; + vertical-align: middle; + visibility: hidden; + } + .search_form.focused .input .enter { + visibility: visible; + } + .search_form.focused.filled .input .enter { + opacity: 1; + } + .search_form .input a { width: 17px; height: 20px; display: inline-block; - margin: 0 0 -5px -20px; + margin: -2px 0 0 2px; top: 4px; right: 5px; - background: url('../images/sprite.png') right -36px no-repeat; + background: url('../images/sprite.png') left -37px no-repeat; cursor: pointer; + opacity: 0; + transition: all 0.2s ease-in-out; + vertical-align: middle; + } + + .search_form.filled .input a { + opacity: 1; } .search_form .results_container { position: absolute; background: #5c697b; - margin: 6px 0 0 -246px; + margin: 6px 0 0 -230px; width: 470px; min-height: 140px; - border-radius: 3px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - - box-shadow: 0 0 50px rgba(0,0,0,0.55); + box-shadow: 0 20px 20px -10px rgba(0,0,0,0.55); + display: none; } + .search_form.shown.filled .results_container { + display: block; + } + + .search_form .results_container:before { + content: ' '; + height: 0; + position: relative; + width: 0; + border: 10px solid transparent; + border-bottom-color: #5c697b; + display: block; + top: -20px; + left: 346px; + } + .search_form .spinner { background: rgba(0,0,0,0.8) url('../images/spinner.gif') no-repeat center 70px; } - .search_form .pointer { - border-right: 10px solid transparent; - border-left: 10px solid transparent; - border-bottom: 10px solid #5c697b; - display: block; - position: absolute; - width: 0px; - left: 50%; - margin: -9px 0 0 110px; - } - .search_form .results { max-height: 570px; overflow-x: hidden; padding: 10px 0; + margin-top: -18px; } .movie_result { overflow: hidden; - min-height: 140px; + height: 140px; } .movie_result .options { - height: 139px; + height: 140px; border: 1px solid transparent; border-width: 1px 0; border-radius: 0; @@ -107,10 +141,9 @@ padding: 0 15px; width: 470px; position: relative; - min-height: 100px; + height: 140px; top: 0; - margin: -143px 0 0 0; - min-height: 140px; + margin: -140px 0 0 0; background: #5c697b; cursor: pointer; @@ -139,6 +172,8 @@ display: inline-block; vertical-align: top; padding: 15px 0; + height: 120px; + overflow: hidden; } .movie_result .info .tagline { diff --git a/couchpotato/core/plugins/movie/static/search.js b/couchpotato/core/plugins/movie/static/search.js index f2f14c4f..1f7abb04 100644 --- a/couchpotato/core/plugins/movie/static/search.js +++ b/couchpotato/core/plugins/movie/static/search.js @@ -10,12 +10,23 @@ Block.Search = new Class({ self.el = new Element('div.search_form').adopt( new Element('div.input').adopt( self.input = new Element('input.inlay', { - 'placeholder': 'Search for new movies', + 'placeholder': 'Search & add a new movie', 'events': { 'keyup': self.keyup.bind(self), - 'focus': self.hideResults.bind(self, false) + 'focus': function(){ + self.el.addClass('focused') + }, + 'blur': function(){ + self.el.removeClass('focused') + } } }), + new Element('span.enter', { + 'events': { + 'click': self.keyup.bind(self) + }, + 'text':'Enter' + }), new Element('a', { 'events': { 'click': self.clear.bind(self) @@ -32,9 +43,8 @@ Block.Search = new Class({ } } }).adopt( - new Element('div.pointer'), self.results = new Element('div.results') - ).hide() + ) ); self.spinner = new Spinner(self.result_container); @@ -50,6 +60,7 @@ Block.Search = new Class({ self.movies = [] self.results.empty() + self.el.removeClass('filled') }, hideResults: function(bool){ @@ -57,7 +68,7 @@ Block.Search = new Class({ if(self.hidden == bool) return; - self.result_container[bool ? 'hide' : 'show'](); + self.el[bool ? 'removeClass' : 'addClass']('shown'); if(bool){ History.removeEvent('change', self.hideResults.bind(self, !bool)); @@ -74,16 +85,14 @@ Block.Search = new Class({ keyup: function(e){ var self = this; - if(['up', 'down'].indexOf(e.key) > -1){ - p('select item') - } - else if(self.q() != self.last_q) { + self.el[self.q() ? 'addClass' : 'removeClass']('filled') + + if(self.q() != self.last_q && (['enter'].indexOf(e.key) > -1 || e.type == 'click')) self.autocomplete() - } }, - autocomplete: function(delay){ + autocomplete: function(){ var self = this; if(!self.q()){ @@ -91,10 +100,7 @@ Block.Search = new Class({ return } - self.spinner.show() - - if(self.autocomplete_timer) clearTimeout(self.autocomplete_timer) - self.autocomplete_timer = self.list.delay((delay || 300), self) + self.list() }, list: function(){ @@ -108,6 +114,7 @@ Block.Search = new Class({ self.hideResults(false) if(!cache){ + self.spinner.show() self.api_request = Api.request('movie.search', { 'data': { 'q': q @@ -138,9 +145,15 @@ Block.Search = new Class({ self.movies[movie.imdb || 'r-'+Math.floor(Math.random()*10000)] = m }); - + if(q != self.q()) self.list() + + // Calculate result heights + var w = window.getSize(), + rc = self.result_container.getCoordinates(); + + self.results.setStyle('max-height', (w.y - rc.top - 50) + 'px') }, @@ -293,10 +306,9 @@ Block.Search.Item = new Class({ }) : null, self.info.in_wanted ? new Element('span.in_wanted', { 'text': 'Already in wanted list: ' + self.info.in_wanted.label - }) : null, - self.info.in_library ? new Element('span.in_library', { + }) : (self.info.in_library ? new Element('span.in_library', { 'text': 'Already in library: ' + self.info.in_library.label - }) : null, + }) : null), self.title_select = new Element('select', { 'name': 'title' }), diff --git a/couchpotato/static/images/sprite.png b/couchpotato/static/images/sprite.png index 1d96a56a..8a61b25e 100644 Binary files a/couchpotato/static/images/sprite.png and b/couchpotato/static/images/sprite.png differ