From 9df29350ed59af86790f76d6ef89266aac283698 Mon Sep 17 00:00:00 2001
From: Michael Q Larson <michaelqlarson@gmail.com>
Date: Thu, 5 Mar 2015 17:30:05 -0800
Subject: [PATCH] update the search UI

---
 public/css/main.less              |  5 +++
 views/stories/index.jade          |  2 +
 views/stories/search-stories.jade | 72 +++++++++++++++++++------------
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/public/css/main.less b/public/css/main.less
index 55dbdd2332..49b1d829d3 100644
--- a/public/css/main.less
+++ b/public/css/main.less
@@ -387,6 +387,11 @@ ul {
   font-size: 30px;
 }
 
+.big-text-field {
+  font-size: 30px;
+  height: 57px;
+}
+
 .table {
   margin-left: -16px;
 }
diff --git a/views/stories/index.jade b/views/stories/index.jade
index b42ff06b5a..9e71245a01 100644
--- a/views/stories/index.jade
+++ b/views/stories/index.jade
@@ -1,8 +1,10 @@
 extends ../layout
 block content
+    script(src='/js/lib/moment/moment.js')
     script.
         var challengeName = 'Camper News';
         var user = !{JSON.stringify(user)};
+        var page = !{JSON.stringify(page)};
     .panel.panel-info
         .panel-heading.text-center Camper News
         .panel-body
diff --git a/views/stories/search-stories.jade b/views/stories/search-stories.jade
index e9c59fb361..19926f8be0 100644
--- a/views/stories/search-stories.jade
+++ b/views/stories/search-stories.jade
@@ -1,10 +1,27 @@
-input#searchArea(type=text)
-button#searchbutton
+.col-xs-12
+    .spacer
+    .input-group
+        input#searchArea.big-text-field.form-control(type='text', placeholder='Search for...', autofocus)
+        span.input-group-btn
+            button#searchbutton.btn.btn-big.btn-primary(type='button') Search
+    .spacer
+
 #story-list
     ul#stories
 script.
+    $('#searchArea').keypress(function(event) {
+        if (event.keyCode === 13 || event.which === 13) {
+            executeSearch();
+            $('#searchArea').focus();
+            event.preventDefault();
+        }
+    });
     $('#searchbutton').on('click', function() {
+        executeSearch();
+    });
+    function executeSearch() {
         $('#stories').empty();
+        console.log('clicked or enter button');
         var searchTerm = $('#searchArea').val();
         var getLinkedName = function getLinkedName(name) {
             return name.toLowerCase().replace(/\s/g, '-');
@@ -17,10 +34,8 @@ script.
                 })
                 .fail(function (xhr, textStatus, errorThrown) {
                     console.log('failure');
-                    //$('#comment-button').bind('click', commentSubmitButtonHandler);
                 })
                 .done(function (data, textStatus, xhr) {
-                    console.log(data);
                     for (var i = 0; i < data.length; i++) {
                         var li = document.createElement('li');
                         var linkedName = getLinkedName(data[i].storyLink);
@@ -28,31 +43,32 @@ script.
 
                         $(li).html(
                                 "<div class='row text-left'>" +
-                                "<div class='col-xs-3 col-sm-1'>" +
-                                "<div class='story-up-votes'>" +
-                                "<span>" + rank + "</span>" +
+                                    "<div class='col-xs-3 col-sm-1'>" +
+                                        "<div class='story-up-votes'>" +
+                                            "<span>" + rank + "</span>" +
+                                        "</div>" +
+                                    "</div>" +
+                                    "<div class='col-xs-2 col-sm-1'>" +
+                                        "<img src='" + data[i].author.picture + "' class='img-responsive'/>" +
+                                    "</div>" +
+                                    "<div class='col-xs-7 col-sm-10'>" +
+                                        "<div class='row'>" +
+                                            "<div class='col-xs-12'>" +
+                                                "<a href='/stories/" + linkedName + "'>"
+                                                    + data[i].storyLink +
+                                                "</a>" +
+                                            "</div>" +
+                                            "<div class='col-xs-12'>" +
+                                                "<span>Posted " +
+                                                    moment(data[i].timePosted).fromNow() +
+                                                    " by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
+                                            "</div>" +
+                                        "</div>" +
+                                    "</div>" +
                                 "</div>" +
-                                "</div>" +
-                                "<div class='col-xs-2 col-sm-1'>" +
-                                "<img src='" + data[i].author.picture + "' class='img-responsive'/>" +
-                                "</div>" +
-                                "<div class='col-xs-7 col-sm-10'>" +
-                                "<div class='row'>" +
-                                "<div class='col-xs-12'>" +
-                                "<a href='/stories/" + linkedName + "'>"
-                                + data[i].storyLink +
-                                "</a>" +
-                                "</div>" +
-                                "<div class='col-xs-12'>" +
-                                "<span>Posted " +
-                                moment(data[i].timePosted).fromNow() +
-                                " by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
-                                "</div>" +
-                                "</div>" +
-                                "</div>" +
-                                "</div>" +
-                                "</li>");
+                            "</li>");
                         $(li).appendTo($('#stories'));
                     }
                 });
-    });
\ No newline at end of file
+
+    }
\ No newline at end of file