From 0f0adac85c0d2c0c696bab8b0896c18132dd87bc Mon Sep 17 00:00:00 2001
From: Quincy Larson <michaelqlarson@gmail.com>
Date: Fri, 1 May 2015 23:05:37 -0700
Subject: [PATCH] stylize search results

---
 public/css/main.less        | 19 +++++++++++
 views/stories/news-nav.jade | 64 ++++++++++++++++++++++++++++++-------
 2 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/public/css/main.less b/public/css/main.less
index 8c9d5cff95..3708695fd7 100644
--- a/public/css/main.less
+++ b/public/css/main.less
@@ -939,6 +939,21 @@ iframe.iphone {
   }
 }
 
+.news-box-search {
+  @media (min-width: 768px) {
+    margin-top: -50px;
+  }
+  @media (max-width: 767px) {
+    padding: 5px;
+    border-color: @brand-info;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 5px;
+    width: 100%;
+    float: left;
+  }
+}
+
 .story-headline {
   font-size: 20px;
   margin-left: 14px;
@@ -976,6 +991,10 @@ hr {
   box-shadow:         0px 0px 0px rgba(0, 0, 0, 0);
 }
 
+.dotted-underline {
+  border-bottom: dashed 1px @brand-success;
+}
+
 #cal-heatmap {
   width: 361px;
 }
diff --git a/views/stories/news-nav.jade b/views/stories/news-nav.jade
index 6e45a3e8df..a913925dbc 100644
--- a/views/stories/news-nav.jade
+++ b/views/stories/news-nav.jade
@@ -12,7 +12,9 @@
         span
             a.btn.btn-success.btn-big.btn-block.btn-responsive(href='/news/' class="#{ (page !== 'hot') ? '' : 'hidden' }") All
 .spacer
+.spacer
 #search-results
+
 .spacer
 #story-list
     ul#stories
@@ -40,30 +42,68 @@ script.
                     }
                 })
                 .fail(function (xhr, textStatus, errorThrown) {
+                    $('#search-results').empty();
+                    var div = document.createElement("div");
+                    $(div).html("<h3 class='negative-35 text-center text-warning dotted-underline'><em>No Results Found</em></h3>");
+                    $(div).appendTo($('#search-results'));
                 })
                 .done(function (data, textStatus, xhr) {
+                    $('#search-results').empty();
                     for (var i = 0; i < data.length; i++) {
                         var div = document.createElement('div');
                         var linkedName = getLinkedName(data[i].storyLink);
                         var rank = data[i].rank;
                         $(div).html(
-                            "<div class='row text-left'>" +
-                                "<div class='col-xs-4 col-sm-2 col-md-1'>" +
-                                    "<a href='" + data[i].link + "' target='_blank'>" +
-                                        "<img src='" + data[i].author.picture + "' class='img-responsive mobile-story-image'/>" +
+                            "<div class='visible-xs row'>" +
+                                "<div class='visible-xs col-sm-1 col-md-1'>" +
+                                    "<a href='" + data[i].link + "'>" +
+                                        "<img class='mobile-story-image img-responsive' src='" + (!!data[i].image ? data[i].image : data[i].author.picture) + "'/>" +
+                                    "</a>" +
                                 "</div>" +
-                                "<div class='col-xs-8 col-sm-10 col-md-11 text-center'>" +
-                                    "<div class='story-headline'>" +
-                                        "<a href='/stories/" + linkedName + "'>"
-                                            + data[i].storyLink +
-                                        "</a><br>" +
+                                "<div class='visible-xs'>" +
+                                    "<div class='col-xs-12 text-center'>" +
+                                        rank + (rank > 1 ? " points" : " point") + " · posted " +
+                                        moment(data[i].timePosted).fromNow() +
+                                        " by " +
+                                        "<a href='/" + data[i].author.username + "'>@" + data[i].author.username +
+                                        "</a> " +
                                     "</div>" +
-                                    "Posted " +
-                                    moment(data[i].timePosted).fromNow() +
-                                    " by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
+                                    "<div class='col-xs-12'>" +
+                                        "<br>" +
+                                        "<a class='btn btn-no-shadow btn-primary btn-block btn-primary-ghost' href='/news/" + linkedName + "'>discuss</a>" +
+                                    "</div>" +
+                                "</div>" +
+                            "</div>" +
+                            "<div class='hidden-xs row media-stories'>" +
+                                "<div class='media'>" +
+                                    "<div class='media-left'>" +
+                                        "<a href='/'" + data[i].author.username + "'>" +
+                                            "<img class='img-news' src='" + data[i].author.picture + "'/>" +
+                                        "</a>" +
+                                    "</div>" +
+                                    "<h2 class='media-body'>" +
+                                        "<div class='media-body-wrapper'>" +
+                                            "<div class='story-headline'>" +
+                                                "<a href='" + data[i].link + "' target='_blank'>" +
+                                                    data[i].headline +
+                                                "</a>" +
+                                            "</div>" +
+                                            "<div class='story-byline col-xs-12 wrappable'>" +
+                                                "<a class='btn btn-no-shadow btn-primary btn-xs btn-primary-ghost' href='/news/" + linkedName + "'>discuss</a> · " +
+                                                    rank + (rank > 1 ? " points" : " point") + " · posted " +
+                                                    moment(data[i].timePosted).fromNow() +
+                                                    " by <a href='/" + data[i].author.username + "'>@" + data[i].author.username +
+                                                "</a> " +
+                                            "</div>" +
+                                        "</div>" +
+                                    "</h2>" +
                                 "</div>" +
                             "</div>")
+                        $(div).addClass('story-list news-box-search')
                         $(div).appendTo($('#search-results'));
                     }
+                    var hr = document.createElement("div");
+                    $(hr).html("<h3 class='negative-35 text-center text-success dotted-underline'><em>End search results</em></h3>")
+                    $(hr).appendTo($('#search-results'));
                 });
     }