Improve the look of the title list, and replace all _ by spaces in the title names (as suggested by peter-x)

The titles are now more easily clickable
Fixes #46

index.html

@@ -130,8 +130,8 @@
                 
                 <!-- List of articles matching the typed prefix -->
                 <div class="container">
-                    <ul id="titleList" class="list-unstyled">
-                    </ul>
+                    <div id="titleList" class="list-group">
+                    </div>
                 </div>
                 <div id="readingArticle" style="display: none;">
                     Reading article <span id="articleName"></span> from archive... Please wait <img src="img/spinner.gif" />

js/app.js

@@ -250,19 +250,18 @@ define(function(require) {
      * @param {type} titleArray
      */
     function populateListOfTitles(titleArray) {
-        var titleListUl = $('#titleList');
+        var titleListDiv = $('#titleList');
         // Remove previous results
-        titleListUl.empty();
+        titleListDiv.empty();
         for (var i = 0; i < titleArray.length; i++) {
             var title = titleArray[i];
-            var titleLi = document.createElement('li');
             var titleA = document.createElement('a');
+            titleA.setAttribute("class","list-group-item");
             titleA.setAttribute("titleId", title.toStringId());
             titleA.setAttribute("href", "#");
-            $(titleA).append(title.name);
+            $(titleA).append(title.getReadableName());
             $(titleA).on("click",handleTitleClick);
-            $(titleLi).append(titleA);
-            titleListUl.append(titleLi);
+            titleListDiv.append(titleA);
         }
         $('#searchingForTitles').hide();
     }

js/lib/title.js

@@ -23,7 +23,7 @@ define(function(require) {
     ;
 
     Title.prototype.getReadableName = function() {
-        return this.name.replace("_", " ");
+        return this.name.replace(/_/g, " ");
     };