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

get a running start on refactoring comment ui elements

Browse Source
This commit is contained in:
Michael Q Larson
2015-03-08 18:56:06 -07:00
parent 9475c2a899
commit 2f54153b16
3 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/css/main.less
View File

@ -829,11 +829,6 @@ iframe.iphone {
width: 100%; width: 100%;
} }
.comment-to-comment-formgroup {
width: 50%;
height: 35px;
}
.story-headline { .story-headline {
font-size: 20px; font-size: 20px;
} }

19
views/stories/comments.jade
View File

@ -7,7 +7,6 @@
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 ? 'odd' : 'even';
R.forEach(function displayComments(comment) { R.forEach(function displayComments(comment) {
$.ajax({ $.ajax({
@ -61,13 +60,17 @@
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 comment-to-comment-formgroup'>" + "<div class='formgroup comment-to-comment-formgroup'>" +
"<text class='form-control' id='comment-to-comment-textarea' maxlength='140' autofocus></textarea>" + "<div class=col-xs-12" +
'<span class="pull-left" id="textarea_feedback"></span>' + "<div class='input-group'>" +
"<button class='btn btn-small btn-primary pull-right' id='submit-comment-to-comment'>Submit</button>" + "<input class='form-control' id='comment-to-comment-textarea' type='text' maxlength='140' autofocus />" +
'</div>' + "</div>" +
"</div>" +
"</div>" "<span class='input-group-btn'>" +
"<button id='submit-comment-to-comment' class='btn btn-big btn-primary btn-responsive' type='button'>Send</button>" +
"</span>" +
"<span class='pull-left' id='textarea_feedback'></span>" +
"</div>"
) )
.addClass('row') .addClass('row')
.appendTo($(this).closest('.media-body-wrapper')); .appendTo($(this).closest('.media-body-wrapper'));

10
views/stories/show.jade
View File

@ -41,10 +41,18 @@
input#comment-box.big-text-field.field-responsive.form-control(type='text', placeholder='Enter your reply', autofocus) input#comment-box.big-text-field.field-responsive.form-control(type='text', placeholder='Enter your reply', autofocus)
span.input-group-btn span.input-group-btn
button#comment-button.btn.btn-big.btn-primary.btn-responsive(type='button') Send button#comment-button.btn.btn-big.btn-primary.btn-responsive(type='button') Send
span.pull-left#textarea_feedback
script. script.
$('#reply-to-main-post').on('click', function() { $('#reply-to-main-post').on('click', function() {
$('#initial-comment-submit').removeClass('hidden-element'); $('#initial-comment-submit').removeClass('hidden-element');
$(this).unbind('click'); $(this).unbind('click');
$('.comment-to-comment-formgroup').empty();
});
var text_max = 140;
$('#textarea_feedback').html(text_max + ' characters remaining');
$('#comment-box').keyup(function () {
var text_length = $('#comment-box').val().length;
var text_remaining = text_max - text_length;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
}); });
include ./comments include ./comments