From 3fac5cb70ea6d616007bc9fb9790b9320aa8c530 Mon Sep 17 00:00:00 2001
From: Nathan Leniz <terakilobyte@gmail.com>
Date: Thu, 5 Mar 2015 09:13:22 +0900
Subject: [PATCH] Improve comment view, re-enable upvoting for articles

---
 public/css/main.less        |  1 -
 public/js/main.js           |  2 ++
 views/stories/comments.jade | 45 ++++++++++++++++++++++++++++-------
 views/stories/show.jade     | 47 ++++++++++---------------------------
 4 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/public/css/main.less b/public/css/main.less
index d22dd766b9..eb47aa1ee0 100644
--- a/public/css/main.less
+++ b/public/css/main.less
@@ -754,7 +754,6 @@ iframe.iphone {
 .big-ion-up-arrow {
   font-size: 45px;
   margin-top: -10px;
-  text-align: center;
   margin-bottom: -15px;
 }
 
diff --git a/public/js/main.js b/public/js/main.js
index 8f7c26ba39..d6d5516306 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -143,6 +143,8 @@ $(document).ready(function() {
                 .done(function (data, textStatus, xhr) {
                     $('#storyRank').text(data.rank);
                 });
+        } else {
+            console.log('Can\'t upvote because you\'ve already upvoted');
         }
     };
     $('#upvote').on('click', upvoteHandler);
diff --git a/views/stories/comments.jade b/views/stories/comments.jade
index 0efc3dbdac..2a2e5a8d55 100644
--- a/views/stories/comments.jade
+++ b/views/stories/comments.jade
@@ -1,8 +1,8 @@
-h6
-    ul#comment-list.comment-list
+h3.text-left
+    div#comment-list.comment-list
 
         script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
-
+        script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js")
         script.
             var commentDetails;
             R.forEach(function displayComments(comment) {
@@ -20,11 +20,40 @@ h6
                     success: function (data, textStatus, xhr) {
                         console.log(data);
                         commentDetails = data;
-                        var li = document.createElement('li');
-                        $(li)
-                                .html("<div class='row text-left'><div class='col-xs-3 text-right'><i class='ion-arrow-up-b'></i></div><div class='col-xs-6'>" + commentDetails.body +
-                                "</div><div class='col-xs-3'></div></div><div class='row text-left'><div class='col-xs-3 text-right'>" + commentDetails.rank + "</div><div class='col-xs-6'>"
-                                + commentDetails.author.username + "</div><div class='col-xs-3'></div></div></li>")
+                        var div = document.createElement('div');
+                        $(div)
+                                .html("" +
+                                    "<div class='row'>" +
+                                        "<div class='col-xs-3 col-sm-1 text-center'>" +
+                                            "<div class='row'>" +
+                                                "<div class='col-xs-12 big-ion-up-arrow'>" +
+                                                    "<i class='ion-arrow-up-b'></i>" +
+                                                "</div>" +
+                                            "</div>" +
+                                            "<div class='row'>" +
+                                                "<div class='col-xs-12'>" +
+                                                    commentDetails.rank +
+                                                "</div>" +
+                                            "</div>" +
+                                        "</div>" +
+                                        "<div class='col-xs-2 col-sm-1'>" +
+                                            "<img class='img-responsive' src=" + commentDetails.author.picture + "></img>" +
+                                        "</div>" +
+                                        "<div class='col-xs-7 col-sm-10'>" +
+                                            "<div class='row'>" +
+                                                "<div class='col-xs-12'>" +
+                                                    commentDetails.body +
+                                                "</div>" +
+                                            "</div>" +
+                                            "<div class='row'>" +
+                                                "<div class='col-xs-12'>" +
+                                                    "commented " + moment(commentDetails.commentedOn).fromNow() + " by " +
+                                                    "<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a>" +
+                                                "</div>" +
+                                            "</div>" +
+                                        "</div>" +
+                                    "</div>" +
+                                "</div>")
                                 .appendTo($('#comment-list'));
                     }
 
diff --git a/views/stories/show.jade b/views/stories/show.jade
index 0f934e6c10..9024bf9711 100644
--- a/views/stories/show.jade
+++ b/views/stories/show.jade
@@ -10,12 +10,13 @@ block content
         .panel-heading.text-center Camper News
         .panel-body
             h3.row.text-left.negative-10
-                .col-xs-3.col-sm-1
+                .col-xs-3.col-sm-1.text-center
                     .row.negative-5
                         .col-xs-12.big-ion-up-arrow
-                            i.ion-arrow-up-b
+                            a#upvote
+                                i.ion-arrow-up-b
                         h3.story-up-votes
-                            span= rank
+                            span#storyRank= rank
                 .col-xs-2.col-sm-1
                     img(src="#{author.picture}", class='img-responsive')
                 .col-xs-7.col-sm-10
@@ -29,39 +30,15 @@ block content
                                 @#{author.username}
 
 
+            .col-xs-12
+                h3.row
+                    .col-xs-12
+                        textarea#comment-box.form-control(name="comment-box", rows=5)
+                h3.row.btn-nav.text-center
+                    .col-xs-6.col-xs-offset-3
+                        .btn.btn-block.btn-primary#comment-button Comment
 
-
-
-
-
-
-
-
-
-    //        .col-xs-2(style='position: relative; top: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%);transform: translateY(50%);')
-    //            h3
-    //                a#upvote
-    //                    i.ion-arrow-up-b
-    //        .col-xs-10.text-center
-    //            h1= title
-    //    .row
-    //        .col-xs-2
-    //            h3#storyRank= rank
-    //
-    //        .col-xs-10.text-center
-    //            h3= body
-    //.row.negative-35
-    //    h3.col-xs-12.col-md-6.col-lg-5.text-center Comments
-    //.row
-    //    .col-xs-12.col-md-6.col-lg-5
-    //        textarea#comment-box.form-control(name="comment-box", rows=5)
-    //if (user)
-    //    script.
-    //        var user = !{JSON.stringify(user)};
-    //        $('#upvote').unbind('click');
-    //.row
-    //    .col-xs-12.col-md-7.col-lg-4.text-left
-    //        include ./comments
+            include ./comments
 
 //
     title: story.headline,