gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Minor view tweaking

Browse Source
This commit is contained in:
Nathan Leniz
2015-03-08 20:22:55 +09:00
parent 6283ec1174
commit 212e59e061
3 changed files with 49 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/css/main.less
View File

@ -178,7 +178,7 @@ ul {
} }
.positive-10 { .positive-10 {
margin-top: 10px; padding-top: 10px;
} }
.positive-15 { .positive-15 {
@ -829,8 +829,13 @@ iframe.iphone {
// background-color: #e5e5e5; // background-color: #e5e5e5;
//} //}
.media-body-wrapper:nth-child(odd){ .media-news {
background-color: #e5e5e5; width: 100%;
}
.comment-to-comment-formgroup {
width: 50%;
height: 35px;
} }

39
views/stories/comments.jade
View File

@ -7,7 +7,7 @@
var sentinel = 0; var sentinel = 0;
var renderComments = function renderComments(comments, containerSelector, level) { var renderComments = function renderComments(comments, containerSelector, level) {
var commentDetails; var commentDetails;
var backgroundColorForCommentNestingLevel = level % 2 !== 0 ? '#e5e5e5' : '#e7e7e7imit T'; var backgroundColorForCommentNestingLevel = level % 2 !== 0 ? 'odd' : 'even';
R.forEach(function displayComments(comment) { R.forEach(function displayComments(comment) {
$.ajax({ $.ajax({
@ -26,18 +26,22 @@
var div = document.createElement('div'); var div = document.createElement('div');
$(div) $(div)
.html( .html(
'<div class="media">' + '<div class="media ' + backgroundColorForCommentNestingLevel + ' media-news">' +
'<div class="media-left">' + '<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>' +
'<div class="media-body comment_' + commentDetails._id + '">' + '<div class="media-body comment_' + commentDetails._id + '">' +
'<div class="media-body-wrapper">' + '<div class="media-body-wrapper">' +
'<p>' + commentDetails.body + '</p>' + '<p>' + commentDetails.body + '</p>' +
'<div class="clearfix comment-a-comment negative-15">' + '<h6>' +
"commented " + moment(commentDetails.commentOn).fromNow() + " by " + '<div class="clearfix comment-a-comment negative-15">' +
"<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a> · " + "commented " + moment(commentDetails.commentOn).fromNow() + " by " +
"<a id='" + commentDetails._id + "'>Reply</a>" + "<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a> · " +
'</div>' + "<a id='" + commentDetails._id + "'>Reply</a>" +
'</div>' +
'</h6>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>' '</div>'
@ -55,16 +59,28 @@
if (!sentinel) { if (!sentinel) {
$('.comment-a-comment').on('click', 'a', function () { $('.comment-a-comment').on('click', 'a', function () {
$(this).unbind('click'); $(this).unbind('click');
$('.comment-to-comment-formgroup').empty();
var div = document.createElement('div'); var div = document.createElement('div');
var commentId = $(this).attr('id'); var commentId = $(this).attr('id');
$(div).html( $(div).html(
"<div class='formgroup'>" + "<div class='formgroup comment-to-comment-formgroup'>" +
"<textarea class='form-control' id='comment-to-comment-textarea' maxlength='500' rows='5'></textarea>" + "<textarea class='form-control' id='comment-to-comment-textarea' maxlength='140' autofocus></textarea>" +
"<button class='btn btn-small btn-primary' id='submit-comment-to-comment'>Submit</button>" + '<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>" "</div>"
) )
.addClass('row') .addClass('row')
.appendTo($(this).closest('.media-body-wrapper')); .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() { var submitCommentToCommentHandler = function submitCommentToCommentHandler() {
$('#submit-comment-to-comment').unbind('click'); $('#submit-comment-to-comment').unbind('click');
$.post('/stories/comment/' + commentId + '/comment', $.post('/stories/comment/' + commentId + '/comment',
@ -99,6 +115,7 @@
} }
sentinel += comments.length; sentinel += comments.length;
renderComments(comments, $('#comment-list'), 0); renderComments(comments, $('#comment-list'), 0);

25
views/stories/show.jade
View File

@ -7,8 +7,8 @@
var user = !{JSON.stringify(user)}; var user = !{JSON.stringify(user)};
.spacer .spacer
.row.col-xs-12 h3.row.col-xs-12
h3.row.text-left.negative-10 .row.text-left.negative-10
.col-xs-3.col-sm-1.text-center .col-xs-3.col-sm-1.text-center
.row.negative-5 .row.negative-5
.col-xs-12.big-ion-up-arrow .col-xs-12.big-ion-up-arrow
@ -17,21 +17,22 @@
h3.story-up-votes h3.story-up-votes
span#storyRank= rank span#storyRank= rank
.col-xs-2.col-sm-1 .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-7.col-sm-10
.col-xs-12.negative-28 .col-xs-12.negative-28
a(href="#{link}") a(href="#{link}")
h3= title h3= title
h6 h6
.col-xs-12.negative-15 .col-xs-12.negative-28
span Posted #{timeAgo} h4= description
span &thinsp;by&thinsp; .negative-5
a(href="/" + author.username) span Posted #{timeAgo}
| @#{author.username} span &thinsp;by&thinsp;
| &nbsp;·&nbsp; a(href="/" + author.username)@#{author.username}
a#reply-to-main-post Reply | &nbsp;·&nbsp;
.col-xs-10.col-xs-offset-1 a#reply-to-main-post Reply
p= description
.col-xs-12#reply-area .col-xs-12#reply-area