Bootstrap 3

New: Updated UI
New: Mobile browser support
Fixed: /favicon.ico will return the favicon now
This commit is contained in:
Mark McDowall
2014-05-04 00:11:43 -07:00
parent 28fa264c69
commit 99f2b07a11
148 changed files with 2691 additions and 2054 deletions

View File

@@ -1,81 +1,46 @@
<div class="navbar navbar-nzbdrone" role="navigation">
<!-- Static navbar -->
<div class="navbar navbar-nzbdrone" role="navigation">
<div class="container-fluid">
<div class="col-md-12">
<div id="main-menu-region">
<div class="navbar-header logo">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" />
<a class="navbar-brand" href="{{UrlBase}} /">
<img src="{{UrlBase}}/Content/Images/logo.png?v=2" alt="NzbDrone">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="{{UrlBase}}/">
<i class="icon-play"></i>
<br>
Series
</a>
</li>
<li>
<a href="{{UrlBase}}/calendar">
<i class="icon-calendar"></i>
<br>
Calendar
</a>
</li>
<li>
<a href="{{UrlBase}}/history">
<i class="icon-time"></i>
<br>
History
</a>
</li>
<li>
<a href="{{UrlBase}}/wanted">
<i class="icon-warning-sign"></i>
<br>
Wanted
</a>
</li>
<li>
<a href="{{UrlBase}}/settings">
<i class="icon-cogs"></i>
<br>
Settings
</a>
</li>
<li>
<a href="{{UrlBase}}/system">
<i class="icon-laptop"></i>
<br>
System
<span id="x-health"></span>
</a>
</li>
<li>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=HGGGM7JT5YVSS" target="_blank">
<i class="icon-nd-donate"></i>
<br>
Donate
</a>
</li>
</ul>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{UrlBase}}/">
<!--<img src="{{UrlBase}}/Content/Images/logo.png?v=2" alt="nzbdrone">-->
<img src="{{UrlBase}}/Content/Images/logos/128.png" class="visible-lg"/>
<img src="{{UrlBase}}/Content/Images/logos/64.png" class="visible-md visible-sm"/>
<span class="visible-xs">
<img src="{{UrlBase}}/Content/Images/logos/32.png"/>
<span class="logo-text"><span class="highlight">nzb</span>drone</span>
</span>
</a>
</div>
<div class="navbar-collapse collapse x-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="{{UrlBase}}/" class="x-series-nav"><i class="icon-play"></i> Series</a></li>
<li><a href="{{UrlBase}}/calendar" class="x-calendar-nav"><i class="icon-calendar"></i> Calendar</a></li>
<li><a href="{{UrlBase}}/history" class="x-history-nav"><i class="icon-time"></i> History</a></li>
<li><a href="{{UrlBase}}/wanted" class="x-wanted-nav"><i class="icon-warning-sign"></i> Wanted</a></li>
<li><a href="{{UrlBase}}/settings" class="x-settings-nav"><i class="icon-cogs"></i> Settings</a></li>
<li><a href="{{UrlBase}}/system" class="x-system-nav"><i class="icon-laptop"></i> System<span id="x-health" class="health"></span></a></li>
<li><a href="http://nzbdrone.com/#donate" target="_blank"><i class="icon-nd-donate"></i> Donate</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active screen-size"></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
<div class="col-md-12 search">
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<span class="input-group-addon"><i class="icon-search"></i></span>
<input type="text" class="col-md-6 form-control x-series-search" >
</div>
</div>
</div>
</div>
<div class="searchbar">
<!--
<div class="row">
<div class="col-md-12">
<div class="search">
<div class="input-group">
<span class="input-group-addon"><i class="icon-search"></i></span>
<input class="col-md-4 x-series-search" id="prependedInput" type="text">
</div>
</div>
</div>
</div>-->
</div>
</div>

View File

@@ -14,7 +14,8 @@ define(
},
ui: {
search: '.x-series-search'
search: '.x-series-search',
collapse: '.x-navbar-collapse'
},
events: {
@@ -46,6 +47,10 @@ define(
else {
this.setActive(event.target);
}
if ($(window).width() < 768) {
this.ui.collapse.collapse('hide');
}
},
setActive: function (element) {

View File

@@ -1,11 +1,12 @@
'use strict';
define(
[
'backbone',
'underscore',
'jquery',
'backbone',
'Series/SeriesCollection',
'typeahead'
], function (Backbone, $, SeriesCollection) {
], function (_, $, Backbone, SeriesCollection) {
$(document).on('keydown', function (e) {
if ($(e.target).is('input') || $(e.target).is('textarea')) {
return;
@@ -23,20 +24,33 @@ define(
$.fn.bindSearch = function () {
$(this).typeahead({
source: function () {
return SeriesCollection.pluck('title');
hint: true,
highlight: true,
minLength: 1
},
{
name: 'series',
displayKey: 'title',
source: substringMatcher()
});
sorter: function (items) {
return items.sort();
},
updater: function (item) {
var series = SeriesCollection.findWhere({ title: item });
this.$element.blur();
Backbone.history.navigate('/series/{0}'.format(series.get('titleSlug')), { trigger: true });
}
$(this).on('typeahead:selected typeahead:autocompleted', function (e, series) {
this.blur();
$(this).val('');
Backbone.history.navigate('/series/{0}'.format(series.titleSlug), { trigger: true });
});
};
var substringMatcher = function() {
return function findMatches(q, cb) {
// regex used to determine if a string contains the substring `q`
var substrRegex = new RegExp(q, 'i');
var matches = _.select(SeriesCollection.toJSON(), function (series) {
return substrRegex.test(series.title);
});
cb(matches);
};
};
});