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 {
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;
}

27
views/stories/comments.jade
View File

@ -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">' +
"<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>' +
'<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);

15
views/stories/show.jade
View File

@ -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
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
.col-xs-12.negative-28
h4= description
.negative-5
span Posted #{timeAgo}
span &thinsp;by&thinsp;
a(href="/" + author.username)
| @#{author.username}
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#reply-area