From 212e59e061e725cb11baa7ecf1f8f254bfd91b50 Mon Sep 17 00:00:00 2001
From: Nathan Leniz <terakilobyte@gmail.com>
Date: Sun, 8 Mar 2015 20:22:55 +0900
Subject: [PATCH] Minor view tweaking

---
 public/css/main.less        | 11 ++++++++---
 views/stories/comments.jade | 39 ++++++++++++++++++++++++++-----------
 views/stories/show.jade     | 25 ++++++++++++------------
 3 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/public/css/main.less b/public/css/main.less
index a253ec314c..4af818a206 100644
--- a/public/css/main.less
+++ b/public/css/main.less
@@ -178,7 +178,7 @@ ul {
 }
 
 .positive-10 {
-  margin-top: 10px;
+  padding-top: 10px;
 }
 
 .positive-15 {
@@ -829,8 +829,13 @@ iframe.iphone {
 //  background-color: #e5e5e5;
 //}
 
-.media-body-wrapper:nth-child(odd){
-  background-color: #e5e5e5;
+.media-news {
+  width: 100%;
+}
+
+.comment-to-comment-formgroup {
+  width: 50%;
+  height: 35px;
 }
 
 
diff --git a/views/stories/comments.jade b/views/stories/comments.jade
index 1ca087a539..83f9f9f75f 100644
--- a/views/stories/comments.jade
+++ b/views/stories/comments.jade
@@ -7,7 +7,7 @@
             var sentinel = 0;
             var renderComments = function renderComments(comments, containerSelector, level) {
                 var commentDetails;
-                var backgroundColorForCommentNestingLevel = level % 2 !== 0 ? '#e5e5e5' : '#e7e7e7imit T';
+                var backgroundColorForCommentNestingLevel = level % 2 !== 0 ? 'odd' : 'even';
                 R.forEach(function displayComments(comment) {
 
                     $.ajax({
@@ -26,18 +26,22 @@
                             var div = document.createElement('div');
                             $(div)
                                     .html(
-                                        '<div class="media">' +
+                                        '<div class="media ' + backgroundColorForCommentNestingLevel + ' media-news">' +
                                             '<div class="media-left">' +
-                                                '<img class="media-object img-news" src="' + commentDetails.author.picture +'" alt="' + commentDetails.author.username + '">' +
+                                                "<a href='/" + commentDetails.author.username + "'>" +
+                                                    '<img class="media-object img-news" src="' + commentDetails.author.picture +'" alt="' + commentDetails.author.username + '">' +
+                                                '</a>' +
                                             '</div>' +
                                             '<div class="media-body comment_' + commentDetails._id + '">' +
                                                 '<div class="media-body-wrapper">' +
                                                     '<p>' + commentDetails.body + '</p>' +
-                                                    '<div class="clearfix comment-a-comment negative-15">' +
-                                                        "commented " + moment(commentDetails.commentOn).fromNow() + " by " +
-                                                        "<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a> · " +
-                                                        "<a id='" + commentDetails._id + "'>Reply</a>" +
-                                                    '</div>' +
+                                                        '<h6>' +
+                                                            '<div class="clearfix comment-a-comment negative-15">' +
+                                                                "commented " + moment(commentDetails.commentOn).fromNow() + " by " +
+                                                                "<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a> · " +
+                                                                "<a id='" + commentDetails._id + "'>Reply</a>" +
+                                                            '</div>' +
+                                                        '</h6>' +
                                                 '</div>' +
                                             '</div>' +
                                         '</div>'
@@ -55,16 +59,28 @@
                             if (!sentinel) {
                                 $('.comment-a-comment').on('click', 'a', function () {
                                     $(this).unbind('click');
+                                    $('.comment-to-comment-formgroup').empty();
                                     var div = document.createElement('div');
                                     var commentId = $(this).attr('id');
                                     $(div).html(
-                                            "<div class='formgroup'>" +
-                                                "<textarea class='form-control' id='comment-to-comment-textarea' maxlength='500' rows='5'></textarea>" +
-                                                "<button class='btn btn-small btn-primary' id='submit-comment-to-comment'>Submit</button>" +
+                                            "<div class='formgroup comment-to-comment-formgroup'>" +
+                                                "<textarea class='form-control' id='comment-to-comment-textarea' maxlength='140' autofocus></textarea>" +
+                                                    '<div class="clearfix">' +
+                                                        '<span class="pull-left" id="textarea_feedback"></span>' +
+                                                        "<button class='btn btn-small btn-primary pull-right' id='submit-comment-to-comment'>Submit</button>" +
+                                                    '</div>' +
+
                                             "</div>"
                                     )
                                             .addClass('row')
                                             .appendTo($(this).closest('.media-body-wrapper'));
+                                    var text_max = 140;
+                                    $('#textarea_feedback').html(text_max + ' characters remaining');
+                                    $('#comment-to-comment-textarea').keyup(function () {
+                                        var text_length = $('#comment-to-comment-textarea').val().length;
+                                        var text_remaining = text_max - text_length;
+                                        $('#textarea_feedback').html(text_remaining + ' characters remaining');
+                                    });
                                     var submitCommentToCommentHandler = function submitCommentToCommentHandler() {
                                         $('#submit-comment-to-comment').unbind('click');
                                         $.post('/stories/comment/' + commentId + '/comment',
@@ -99,6 +115,7 @@
             }
             sentinel += comments.length;
 
+
             renderComments(comments, $('#comment-list'), 0);
 
 
diff --git a/views/stories/show.jade b/views/stories/show.jade
index e09dbb5085..b6c99affef 100644
--- a/views/stories/show.jade
+++ b/views/stories/show.jade
@@ -7,8 +7,8 @@
         var user = !{JSON.stringify(user)};
     .spacer
 
-    .row.col-xs-12
-        h3.row.text-left.negative-10
+    h3.row.col-xs-12
+        .row.text-left.negative-10
             .col-xs-3.col-sm-1.text-center
                 .row.negative-5
                     .col-xs-12.big-ion-up-arrow
@@ -17,21 +17,22 @@
                     h3.story-up-votes
                         span#storyRank= rank
             .col-xs-2.col-sm-1
-                img(src="#{author.picture}", class='img-news')
+                a(href="/" + author.username)
+                    img(src="#{author.picture}", class='img-news')
             .col-xs-7.col-sm-10
+
                 .col-xs-12.negative-28
                     a(href="#{link}")
                         h3= title
                 h6
-                    .col-xs-12.negative-15
-                        span Posted #{timeAgo}
-                        span &thinsp;by&thinsp;
-                            a(href="/" + author.username)
-                            |  @#{author.username}
-                            |  &nbsp;·&nbsp;
-                            a#reply-to-main-post Reply
-            .col-xs-10.col-xs-offset-1
-                p= description
+                    .col-xs-12.negative-28
+                        h4= description
+                        .negative-5
+                            span Posted #{timeAgo}
+                            span &thinsp;by&thinsp;
+                                a(href="/" + author.username)@#{author.username}
+                                |  &nbsp;·&nbsp;
+                                a#reply-to-main-post Reply
     .col-xs-12#reply-area