Commit 7fa35baf authored by bbaer's avatar bbaer
Browse files

style comments with grid

parent ed836901
......@@ -48,10 +48,32 @@ var QfqNS = QfqNS || {};
n.Comment.prototype._buildComment = function(allowEdit) {
console.log(this.comment);
var commentWrap = $('<div/>', {
text: "Hello there:" + this.comment.comment
var $commentWrap = $('<div/>', {
class: "qfqComment"
});
return commentWrap;
var $avatar = $('<img>', {
src: "https://www.gravatar.com/avatar/6e9f325143bc5fd4ee2d3afe2df96669?s=100&d=mm",
class: "qfqCommentAvatar"
});
$avatar.appendTo($commentWrap);
var $topLine = $('<div />', {
class: "qfqCommentTopLine"
});
$('<span />', {
class: "qfqCommentAuthor",
text: this.user.name
}).appendTo($topLine);
$('<span />', {
class: "qfqCommentDateTime",
text: this.comment.dateTime
}).appendTo($topLine);
$topLine.appendTo($commentWrap);
var $comment = $('<div />', {
class: "qfqCommentText",
text: this.comment.comment
});
$comment.appendTo($commentWrap);
return $commentWrap;
};
})(QfqNS);
\ No newline at end of file
......@@ -425,10 +425,11 @@ i.@{spinner_class} {
}
.qfqCommentContainer {
background-color: #fff;
background-color: #f5f5f5;
color: #333;
margin-left: -5px;
margin-right: -5px;
font-size: 0.8em;
padding: 10px;
}
......@@ -439,6 +440,62 @@ i.@{spinner_class} {
padding-right: 15px;
}
.qfqComment {
display: grid;
position: relative;
grid-template-columns: 110px auto;
grid-template-rows: 25px 75px auto;
margin: 10px;
}
.qfqCommentAvatar {
border-radius: 5px;
grid-column: 1;
grid-row-start: 1;
grid-row-end: 2;
width: 100px;
height: 100px;
border: 1px solid #ccc;
padding: 0px;
}
.qfqCommentAuthor {
position: absolute;
top: 5px;
left: 8px;
font-size: 0.8em;
}
.qfqCommentText {
grid-column: 2;
grid-row-start: 2;
grid-row-end: 3;
background-color: #fff;
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 5px 5px;
}
.qfqCommentTopLine {
position: relative;
grid-row: 1;
grid-column: 2;
border: 1px solid #ccc;
border-bottom: 1px solid #efefef;
border-radius: 5px 5px 0 0;
background-color: #fff;
}
.qfqCommentDateTime {
position: absolute;
right: 8px;
top: 5px;
color: grey;
font-size: 0.8em;
}
.qfqCode {
width: ~"calc(100% - 50px)";
padding-left: 15px;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment