From 70ce2c8fa787be6d4d792f67adc49ea099beb3c2 Mon Sep 17 00:00:00 2001 From: Alin Tuhut Date: Sat, 1 Jun 2013 21:41:38 +0300 Subject: [PATCH 1/5] fixed navbar cuts content --- css/styles.css | 11 ++++++++++- tpl/ShellView.html | 1 - 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/css/styles.css b/css/styles.css index cdfa6c3..3dd445b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,7 +1,7 @@ body { font-family: source-sans-pro, sans-serif; font-size: 15px; - /*padding-top: 60px;*/ + padding-top: 60px; /*padding-bottom: 40px;*/ } @@ -19,3 +19,12 @@ body { .no-reports { display: none; } + +@media (max-width: 979px) { + + body { + padding-top: 0; + } + +} + diff --git a/tpl/ShellView.html b/tpl/ShellView.html index 9cdacf2..1562c86 100755 --- a/tpl/ShellView.html +++ b/tpl/ShellView.html @@ -24,7 +24,6 @@
-
From c909376b6e3f98c4c5264823f21ca611e8a343d4 Mon Sep 17 00:00:00 2001 From: Alin Tuhut Date: Sat, 1 Jun 2013 21:42:53 +0300 Subject: [PATCH 2/5] fixed links to github and author's blog --- tpl/ContactView.html | 4 ++-- tpl/HomeView.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tpl/ContactView.html b/tpl/ContactView.html index 32e2351..24398f9 100644 --- a/tpl/ContactView.html +++ b/tpl/ContactView.html @@ -12,13 +12,13 @@


Watch me code on GitHub
- https://github.com/ccoenraets

+ https://github.com/ccoenraets




-

Visit my blog
http://coenraets.org

+

Visit my blog
http://coenraets.org


diff --git a/tpl/HomeView.html b/tpl/HomeView.html index 8297a8c..a486eb6 100644 --- a/tpl/HomeView.html +++ b/tpl/HomeView.html @@ -53,7 +53,7 @@

Try It

Get the Code

The source code for this application is maintained in this GitHub repository. The repository includes several adapters to use the application with different data persistence solutions: in-memory store, REST API, REST with JSONP, Node.js, MongoDB, etc.

+ href="https://github.com/ccoenraets/directory-backbone-bootstrap">this GitHub repository. The repository includes several adapters to use the application with different data persistence solutions: in-memory store, REST API, REST with JSONP, Node.js, MongoDB, etc.

Download »

From bf12d25e3e69fdedcde53993fbcc9c3207f947c6 Mon Sep 17 00:00:00 2001 From: Alin Tuhut Date: Sat, 1 Jun 2013 22:19:56 +0300 Subject: [PATCH 3/5] do not show empty dropdown if no results are found --- js/views/shell.js | 6 +++++- tpl/ShellView.html | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/js/views/shell.js b/js/views/shell.js index dacd969..ec50ead 100644 --- a/js/views/shell.js +++ b/js/views/shell.js @@ -21,7 +21,11 @@ directory.ShellView = Backbone.View.extend({ this.searchResults.fetch({reset: true, data: {name: key}}); var self = this; setTimeout(function () { - $('.dropdown').addClass('open'); + if (self.searchResults.length) { + $('#searchForm').addClass('open'); + } else { + $('#searchForm').removeClass('open'); + } }); }, diff --git a/tpl/ShellView.html b/tpl/ShellView.html index 1562c86..ea78f9e 100755 --- a/tpl/ShellView.html +++ b/tpl/ShellView.html @@ -13,7 +13,7 @@
  • Home
  • Contact
    • -
    +
    From 04d24dd6c66002d64c641bfb7ff50eb7aefadc8c Mon Sep 17 00:00:00 2001 From: Alin Tuhut Date: Sat, 1 Jun 2013 22:42:20 +0300 Subject: [PATCH 4/5] show results matching existing search text when field is (re)focused --- js/app.js | 4 +++- js/views/shell.js | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 099e1c1..d25a89f 100644 --- a/js/app.js +++ b/js/app.js @@ -36,7 +36,9 @@ directory.Router = Backbone.Router.extend({ $('body').html(directory.shellView.render().el); // Close the search dropdown on click anywhere in the UI $('body').click(function () { - $('.dropdown').removeClass("open"); + if (!$("#searchText").is(":focus")) { + $('#searchForm').removeClass("open"); + } }); this.$content = $("#content"); }, diff --git a/js/views/shell.js b/js/views/shell.js index ec50ead..c77a0aa 100644 --- a/js/views/shell.js +++ b/js/views/shell.js @@ -13,11 +13,17 @@ directory.ShellView = Backbone.View.extend({ events: { "keyup .search-query": "search", + "focus .search-query": "search", "keypress .search-query": "onkeypress" }, search: function (event) { var key = $('#searchText').val(); + if (key == '') { + // do not show all results if there's no search text + $('#searchForm').removeClass('open'); + return; + } this.searchResults.fetch({reset: true, data: {name: key}}); var self = this; setTimeout(function () { From afb417ed5cdf1c9e6cf2a182b4c822608b636c27 Mon Sep 17 00:00:00 2001 From: Alin Tuhut Date: Sun, 2 Jun 2013 14:51:45 +0300 Subject: [PATCH 5/5] simple browse directory with "sort by" functionality --- css/styles.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + js/app.js | 14 +++++++++++++- js/views/browse.js | 29 +++++++++++++++++++++++++++++ tpl/BrowseView.html | 10 ++++++++++ tpl/ShellView.html | 1 + 6 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 js/views/browse.js create mode 100644 tpl/BrowseView.html diff --git a/css/styles.css b/css/styles.css index cdfa6c3..cc8563d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -19,3 +19,47 @@ body { .no-reports { display: none; } + +/** + * [START] Browse directory +*/ + +#browseList ul { + margin-left: 0; + list-style-type: none; +} + +#browseList li { + background-color: #f7f7f7; + margin: 10px 0; +} + +#browseList li:hover { + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} + +#browseList li a { + display: block; + padding: 10px; +} + +#browseList li a:hover { + text-decoration: none; + color: #ffffff; +} + +#browseList li p { + margin: 0; + padding-bottom: 4px; +} + +/** + * [END] Browse directory +*/ diff --git a/index.html b/index.html index 4d7aadf..083cdf8 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@ + diff --git a/js/app.js b/js/app.js index 099e1c1..a3f4bf4 100644 --- a/js/app.js +++ b/js/app.js @@ -27,6 +27,7 @@ directory.Router = Backbone.Router.extend({ routes: { "": "home", + "browse": "browse", "contact": "contact", "employees/:id": "employeeDetails" }, @@ -54,6 +55,17 @@ directory.Router = Backbone.Router.extend({ directory.shellView.selectMenuItem('home-menu'); }, + browse: function () { + if (!directory.browseView) { + directory.browseView = new directory.BrowseView(); + directory.browseView.render(); + } else { + directory.browseView.delegateEvents(); + } + this.$content.html(directory.browseView.el); + directory.shellView.selectMenuItem('browse-menu'); + }, + contact: function () { if (!directory.contactView) { directory.contactView = new directory.ContactView(); @@ -80,7 +92,7 @@ directory.Router = Backbone.Router.extend({ }); $(document).on("ready", function () { - directory.loadTemplates(["HomeView", "ContactView", "ShellView", "EmployeeView", "EmployeeSummaryView", "EmployeeListItemView"], + directory.loadTemplates(["HomeView", "BrowseView", "ContactView", "ShellView", "EmployeeView", "EmployeeSummaryView", "EmployeeListItemView"], function () { directory.router = new directory.Router(); Backbone.history.start(); diff --git a/js/views/browse.js b/js/views/browse.js new file mode 100644 index 0000000..a11bd12 --- /dev/null +++ b/js/views/browse.js @@ -0,0 +1,29 @@ +directory.BrowseView = Backbone.View.extend({ + + initialize: function () { + this.employees = new directory.EmployeeCollection(); + this.sortBy = 'firstName'; + this.employees.comparator = this.sortBy; + this.employees.fetch({reset: true, data: {name: ''}}); + this.listView = new directory.EmployeeListView({model: this.employees, className: 'browse-list'}); + this.employees.on('sort', this.render, this); + }, + + render: function () { + this.$el.html(this.template()); + $("#sortBy").val(this.sortBy); + $("#browseList", this.el).html(this.listView.render().el); + return this; + }, + + events: { + "change #sortBy":"sort" + }, + + sort: function() { + this.sortBy = $("#sortBy").val(); + this.employees.comparator = this.sortBy; + this.employees.sort(); + } + +}); \ No newline at end of file diff --git a/tpl/BrowseView.html b/tpl/BrowseView.html new file mode 100644 index 0000000..233870e --- /dev/null +++ b/tpl/BrowseView.html @@ -0,0 +1,10 @@ +
    +   + +
    + +
    +
    \ No newline at end of file diff --git a/tpl/ShellView.html b/tpl/ShellView.html index 9cdacf2..0ca2422 100755 --- a/tpl/ShellView.html +++ b/tpl/ShellView.html @@ -11,6 +11,7 @@