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

Improve comment view, re-enable upvoting for articles

Browse Source
This commit is contained in:
Nathan Leniz
2015-03-05 09:13:22 +09:00
parent ba97c984e7
commit 3fac5cb70e
4 changed files with 51 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/main.less
View File

@ -754,7 +754,6 @@ iframe.iphone {
.big-ion-up-arrow { .big-ion-up-arrow {
font-size: 45px; font-size: 45px;
margin-top: -10px; margin-top: -10px;
text-align: center;
margin-bottom: -15px; margin-bottom: -15px;
} }

2
public/js/main.js
View File

@ -143,6 +143,8 @@ $(document).ready(function() {
.done(function (data, textStatus, xhr) { .done(function (data, textStatus, xhr) {
$('#storyRank').text(data.rank); $('#storyRank').text(data.rank);
}); });
} else {
console.log('Can\'t upvote because you\'ve already upvoted');
} }
}; };
$('#upvote').on('click', upvoteHandler); $('#upvote').on('click', upvoteHandler);

45
views/stories/comments.jade
View File

@ -1,8 +1,8 @@
h6 h3.text-left
ul#comment-list.comment-list div#comment-list.comment-list
script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js") 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. script.
var commentDetails; var commentDetails;
R.forEach(function displayComments(comment) { R.forEach(function displayComments(comment) {
@ -20,11 +20,40 @@ h6
success: function (data, textStatus, xhr) { success: function (data, textStatus, xhr) {
console.log(data); console.log(data);
commentDetails = data; commentDetails = data;
var li = document.createElement('li'); var div = document.createElement('div');
$(li) $(div)
.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 + .html("" +
"</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'>" "<div class='row'>" +
+ commentDetails.author.username + "</div><div class='col-xs-3'></div></div></li>") "<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')); .appendTo($('#comment-list'));
} }

45
views/stories/show.jade
View File

@ -10,12 +10,13 @@ block content
.panel-heading.text-center Camper News .panel-heading.text-center Camper News
.panel-body .panel-body
h3.row.text-left.negative-10 h3.row.text-left.negative-10
.col-xs-3.col-sm-1 .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
a#upvote
i.ion-arrow-up-b i.ion-arrow-up-b
h3.story-up-votes h3.story-up-votes
span= rank span#storyRank= rank
.col-xs-2.col-sm-1 .col-xs-2.col-sm-1
img(src="#{author.picture}", class='img-responsive') img(src="#{author.picture}", class='img-responsive')
.col-xs-7.col-sm-10 .col-xs-7.col-sm-10
@ -29,39 +30,15 @@ block content
@#{author.username} @#{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
include ./comments
// .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
// //
title: story.headline, title: story.headline,