Quick fixes and improvements

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
+*/

index.html

@@ -33,6 +33,7 @@
 <script src="js/app.js"></script>
 <script src="js/views/shell.js"></script>
 <script src="js/views/home.js"></script>
+<script src="js/views/browse.js"></script>
 <script src="js/views/contact.js"></script>
 <script src="js/views/employeelist.js"></script>
 <script src="js/views/employeedetails.js"></script>

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();

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();
+    }
+
+});

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');
+            }
         });
     },
 

tpl/BrowseView.html

@@ -0,0 +1,10 @@
+<form class="form-inline">
+    <label for="sortBy">Sort by: </label>&nbsp;
+    <select id="sortBy">
+        <option value="firstName">First Name</option>
+        <option value="lastName">Last Name</option>
+    </select>
+</form>
+
+<div id="browseList">
+</div>

tpl/ContactView.html

@@ -12,13 +12,13 @@
     <div class="span4 text-center">
         <img src="img/github.jpg" width="100"><br/><br/>
         <p>Watch me code on GitHub<br/>
-        <a href="http://ccoenraets.org">https://github.com/ccoenraets</a></p>
+        <a href="https://github.com/ccoenraets">https://github.com/ccoenraets</a></p>
         <br/>
     </div>
 
     <div class="span4 text-center">
         <img src="img/blog.jpg" width="100"><br/><br/>
-        <p>Visit my blog<br/><a href="http://ccoenraets.org">http://coenraets.org</a></p>
+        <p>Visit my blog<br/><a href="http://coenraets.org">http://coenraets.org</a></p>
         <br/>
     </div>
 </div>

tpl/HomeView.html

@@ -53,7 +53,7 @@ <h2>Try It</h2>
         <h2>Get the Code</h2>
 
         <p>The source code for this application is maintained in <a
-                href="https://github.com/ccoenraets/backbone-directory">this GitHub repository</a>. 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.</p>
+                href="https://github.com/ccoenraets/directory-backbone-bootstrap">this GitHub repository</a>. 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.</p>
 
         <p><a class="btn" href="https://github.com/ccoenraets/directory-backbone-bootstrap/zipball/master">Download &raquo;</a></p>
     </div>

tpl/ShellView.html

@@ -11,9 +11,10 @@
             <div class="nav-collapse collapse">
                 <ul class="nav">
                     <li class="home-menu active"><a href="#">Home</a></li>
+                    <li class="browse-menu"><a href="#browse">Browse</a></li>
                     <li class="contact-menu"><a href="#contact">Contact</a></li>
                 </ul>
-                <form class="navbar-search pull-right dropdown">
+                <form id="searchForm" class="navbar-search pull-right dropdown">
                     <input id="searchText" type="search" class="search-query dropdown-toggle" placeholder="Search" autocomplete="off">
                 </form>
             </div>
@@ -24,7 +25,6 @@
 
 
 <div class="container">
-    <br/>
 
     <div class="row-fluid">
         <div class="span12" id="content"></div>