htwkmooc/codeocean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor styling

Browse Source
This commit is contained in:
Maximilian Grundke
2017-08-25 18:46:04 +02:00
parent bb79852e42
commit 889987f3ad
2 changed files with 55 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/stylesheets/request-for-comments.css.scss
View File

@ -25,47 +25,51 @@
.comment { .comment {
width: 100%; width: 100%;
min-width: 200px; min-width: 200px;
}
.popover-header { .comment-header {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
padding-bottom: 10px; padding-bottom: 10px;
margin: auto; margin: auto;
}
.popover-username { .comment-username {
font-weight: bold; font-weight: bold;
width: 60%; width: 60%;
float: left; float: left;
} }
.popover-date { .comment-date {
text-align: right; text-align: right;
color: #008cba; color: #008cba;
margin-left: 60%; margin-left: 60%;
font-size: x-small; font-size: x-small;
} }
.popover-updated { .comment-updated {
text-align: right; text-align: right;
margin-left: 60%; margin-left: 60%;
font-size: x-small; font-size: x-small;
} }
}
.popover-comment { .comment-content {
word-wrap: break-word; word-wrap: break-word;
margin-bottom: 10px; margin-bottom: 10px;
} }
.popover-comment-editor { .comment-editor {
width: 100%; width: 100%;
height: auto; height: auto;
background-color: inherit; background-color: inherit;
border-style: hidden; border-style: hidden;
} }
.popover-divider { .comment-actions {
display: none;
}
}
.comment-divider {
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: #008cba; background-color: #008cba;
@ -74,10 +78,6 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.popover-action-button {
display: none;
}
#otherComments { #otherComments {
h5 { h5 {
margin-top: 0; margin-top: 0;
@ -96,11 +96,10 @@
font-style: italic; font-style: italic;
} }
.popover-actions { .comment-actions {
display: flex; display: flex;
.popover-action-button { button {
display: block;
margin-right: 5px; margin-right: 5px;
} }
} }

20
app/views/request_for_comments/show.html.erb
View File

@ -182,25 +182,25 @@ also, all settings from the rails model needed for the editor configuration in t
comments.forEach(function(comment, index) { comments.forEach(function(comment, index) {
var commentText = preprocess(comment.text); var commentText = preprocess(comment.text);
if (index !== 0) { if (index !== 0) {
htmlContent += '<div class="popover-divider"></div>' htmlContent += '<div class="comment-divider"></div>'
} }
htmlContent += '<div class="comment">'; htmlContent += '<div class="comment">';
htmlContent += '<div class="popover-header">' + htmlContent += '<div class="comment-header">' +
'<div class="popover-username">' + preprocess(comment.username) + '</div>' + '<div class="comment-username">' + preprocess(comment.username) + '</div>' +
'<div class="popover-date">' + comment.date + '</div>'; '<div class="comment-date">' + comment.date + '</div>';
if (comment.updated) { if (comment.updated) {
htmlContent += '<div class="popover-updated">' + htmlContent += '<div class="comment-updated">' +
'<i class="fa fa-pencil" aria-hidden="true"></i>' + '<i class="fa fa-pencil" aria-hidden="true"></i>' +
'<%= t('request_for_comments.comment_edited') %>' + '<%= t('request_for_comments.comment_edited') %>' +
'</div>' '</div>'
} }
htmlContent += '</div>' + htmlContent += '</div>' +
'<div class="popover-comment">' + commentText + '</div>' + '<div class="comment-content">' + commentText + '</div>' +
'<textarea class="hidden popover-comment-editor">' + commentText + '</textarea>'; '<textarea class="hidden comment-editor">' + commentText + '</textarea>';
if (comment.editable) { if (comment.editable) {
htmlContent += '<div class="popover-actions">' + htmlContent += '<div class="comment-actions">' +
'<button class="popover-action-button action-edit btn btn-xs btn-warning" data-comment-id=' + comment.id + '><%= t('shared.edit') %></button>' + '<button class="action-edit btn btn-xs btn-warning" data-comment-id=' + comment.id + '><%= t('shared.edit') %></button>' +
'<button class="popover-action-button action-delete btn btn-xs btn-danger" data-comment-id=' + comment.id + '><%= t('shared.destroy') %></button>' + '<button class="action-delete btn btn-xs btn-danger" data-comment-id=' + comment.id + '><%= t('shared.destroy') %></button>' +
'</div>'; '</div>';
} }
htmlContent += '</div>'; htmlContent += '</div>';