From 1edc1aa3cf5f6d0f89e9d227c208ece9aa772f5d Mon Sep 17 00:00:00 2001
From: Nathan Leniz <terakilobyte@gmail.com>
Date: Sun, 8 Mar 2015 12:32:35 +0900
Subject: [PATCH] Begin refactoring story lists to order list, remove separate
 rank div

---
 controllers/story.js           |  2 +-
 public/css/main.less           |  5 ++++
 views/stories/hot-stories.jade | 47 +++++++++++++++++-----------------
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/controllers/story.js b/controllers/story.js
index 11c6fa9b19..5bbca93aad 100644
--- a/controllers/story.js
+++ b/controllers/story.js
@@ -10,7 +10,7 @@ var R = require('ramda'),
     secrets = require('../config/secrets');
 
 exports.hotJSON = function(req, res, next) {
-    var story = Story.find({}).sort({'rank': -1});
+    var story = Story.find({}).sort({'rank': -1, 'timePosted': -1});
     story.exec(function(err, stories) {
         if (err) {
             throw err;
diff --git a/public/css/main.less b/public/css/main.less
index bec9f26513..1207426824 100644
--- a/public/css/main.less
+++ b/public/css/main.less
@@ -805,6 +805,11 @@ iframe.iphone {
   padding: 15px 0 15px 0;
 }
 
+.img-news {
+  width: 50px;
+  height: 50px;
+}
+
 //uncomment this to see the dimensions of all elements outlined in red
 //* {
 //  border-color: red;
diff --git a/views/stories/hot-stories.jade b/views/stories/hot-stories.jade
index 382232655c..493463b9d8 100644
--- a/views/stories/hot-stories.jade
+++ b/views/stories/hot-stories.jade
@@ -1,5 +1,5 @@
-h3
-    ul#story-list.story-list
+.col-xs-12
+    ol#story-list.story-list
 
         script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
         script.
@@ -17,31 +17,30 @@ h3
                             var linkedName = getLinkedName(data[i].storyLink);
                             var rank = data[i].rank;
 
-                            $(li).html("<div class='row text-left'>" +
-                                            "<div class='col-xs-3 col-sm-1'>" +
-                                                "<div class='positive-5'>" +
-                                                    "<span>" + rank + "</span>" +
-                                                "</div>" +
+                            $(li)
+                            .html(
+                                "<div class='col-xs-12 text-left'>" +
+                                    "<div class='col-xs-2 col-sm-1'>" +
+                                        "<img src='" + data[i].author.picture + "' class='img-news'/>" +
+                                    "</div>" +
+                                    "<div class='col-xs-10 col-sm-11'>" +
+                                        "<div class='row'>" +
+                                            "<div class='col-xs-12'>" +
+                                                "<a href='/stories/" + linkedName + "'>"
+                                                    + data[i].storyLink +
+                                                "</a>" +
                                             "</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 class='col-xs-12'>" +
+                                                "<span>" +
+                                                    rank + " points, posted " +
+                                                    moment(data[i].timePosted).fromNow() +
+                                                    " by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
+                                                "</span>" +
                                             "</div>" +
                                         "</div>" +
-                            "</li>");
+                                    "</div>" +
+                                "</div>"
+                            );
                             $(li).appendTo($('#story-list'));
                         }
                     });
\ No newline at end of file