Added search bar under nav bar to jump to series by searching

This commit is contained in:
Mark McDowall 2013-09-22 00:55:44 -07:00
parent 8ff34aac4d
commit 48dbc127a7
6 changed files with 98 additions and 33 deletions

View File

@ -1,6 +1,9 @@
@import "prefixer";
#main-menu-region {
text-align : center;
margin-bottom : 10px;
i:before {
font-size : 35px;
}
@ -8,27 +11,6 @@
i {
width : 40px;
}
}
.backdrop #nav-region {
background-color : #000000;
.opacity(0.85);
}
#nav-region li a:hover, #in-sub-nav li a.active {
background-color : #555555;
text-decoration : none;
}
#nav-region {
margin-bottom : 80px;
height : 120px;
.span12 {
margin-left : 0px;
}
.logo {
margin-top : 25px;
@ -37,10 +19,6 @@
width : 70px;
}
ul {
text-align : center;
margin-bottom : 10px;
}
li {
list-style-type : none;
display : inline-block;
@ -55,7 +33,7 @@
padding : 15px 10px 5px;
min-height : 56px;
min-width : 64px;
margin : 20px 10px 10px;
margin : 20px 10px 5px;
color : #b9b9b9;
font-weight : 100;
}
@ -66,3 +44,45 @@
}
}
}
.backdrop #nav-region {
background-color : #000000;
.opacity(0.85);
}
#nav-region li a:hover, #in-sub-nav li a.active {
background-color : #555555;
text-decoration : none;
}
#nav-region {
margin-bottom : 80px;
height : 150px;
.span12 {
margin-left : 0px;
}
}
.search {
text-align: center;
input, .add-on {
background-color: #333333;
border-color: #333333;
color: #cccccc;
}
ul {
text-align: left;
}
.dropdown-menu {
background-color: #333333;
color: #cccccc;
> li > a {
color: #cccccc;
}
}
}

View File

@ -19,5 +19,4 @@ define(function () {
items : 20
});
};
});

View File

@ -59,4 +59,15 @@
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<div class="search">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span>
<input class="span4 x-series-search" id="prependedInput" type="text">
</div>
</div>
</div>
</div>
</div>

View File

@ -1,14 +1,23 @@
'use strict';
define(
[
'marionette'
'marionette',
'Navbar/Search'
], function (Marionette) {
return Marionette.ItemView.extend({
template : 'Navbar/NavbarTemplate',
ui: {
search: '.x-series-search'
},
events: {
'click a': 'onClick'
},
template : 'Navbar/NavbarTemplate',
onRender: function (){
this.ui.search.bindSearch();
},
onClick: function (event) {

29
UI/Navbar/Search.js Normal file
View File

@ -0,0 +1,29 @@
'use strict';
define(
[
'app',
'Series/SeriesCollection'
], function (App, SeriesCollection) {
$.fn.bindSearch = function () {
$(this).typeahead({
source : function () {
return SeriesCollection.map(function (model) {
return model.get('title');
});
},
sorter: function (items) {
return items.sort();
},
updater: function (item) {
var series = SeriesCollection.find(function (model) {
return model.get('title') === item;
});
this.$element.blur();
App.Router.navigate('/series/{0}'.format(series.get('titleSlug')), { trigger: true });
}
});
};
});

View File

@ -41,14 +41,13 @@ define(
},
initialize: function () {
$('body').addClass('backdrop');
this.listenTo(this.model, 'change:monitored', this._setMonitoredState);
this.listenTo(App.vent, App.Events.SeriesDeleted, this._onSeriesDeleted);
this.listenTo(App.vent, App.Events.SeasonRenamed, this._onSeasonRenamed);
},
onShow: function () {
$('body').addClass('backdrop');
var fanArt = this._getFanArt();
if (fanArt) {
@ -61,8 +60,6 @@ define(
this._showSeasons();
this._setMonitoredState();
this._showInfo();
},
onRender: function () {