Better search result popup
This commit is contained in:
Ruud
@@ -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 {
|
||||
|
||||
@@ -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'
|
||||
}),
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Reference in New Issue
Block a user