diff --git a/css/styles.css b/css/styles.css
index cdfa6c3..e6ec28c 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,55 @@ body {
.no-reports {
display: none;
}
+
+@media (max-width: 979px) {
+
+ body {
+ padding-top: 0;
+ }
+
+}
+
+/**
+ * [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..698045e 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"
},
@@ -36,7 +37,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");
},
@@ -54,6 +57,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 +94,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/js/views/shell.js b/js/views/shell.js
index dacd969..c77a0aa 100644
--- a/js/views/shell.js
+++ b/js/views/shell.js
@@ -13,15 +13,25 @@ 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 () {
- $('.dropdown').addClass('open');
+ if (self.searchResults.length) {
+ $('#searchForm').addClass('open');
+ } else {
+ $('#searchForm').removeClass('open');
+ }
});
},
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/ContactView.html b/tpl/ContactView.html
index 32e2351..24398f9 100644
--- a/tpl/ContactView.html
+++ b/tpl/ContactView.html
@@ -12,13 +12,13 @@
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 »
diff --git a/tpl/ShellView.html b/tpl/ShellView.html
index 9cdacf2..b634909 100755
--- a/tpl/ShellView.html
+++ b/tpl/ShellView.html
@@ -11,9 +11,10 @@
@@ -24,7 +25,6 @@
