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

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

@ -25,47 +25,51 @@
.comment {
width: 100%;
min-width: 200px;
.comment-header {
width: 100%;
overflow: hidden;
padding-bottom: 10px;
margin: auto;
.comment-username {
font-weight: bold;
width: 60%;
float: left;
}
.comment-date {
text-align: right;
color: #008cba;
margin-left: 60%;
font-size: x-small;
}
.comment-updated {
text-align: right;
margin-left: 60%;
font-size: x-small;
}
}
.comment-content {
word-wrap: break-word;
margin-bottom: 10px;
}
.comment-editor {
width: 100%;
height: auto;
background-color: inherit;
border-style: hidden;
}
.comment-actions {
display: none;
}
}
.popover-header {
width: 100%;
overflow: hidden;
padding-bottom: 10px;
margin: auto;
}
.popover-username {
font-weight: bold;
width: 60%;
float: left;
}
.popover-date {
text-align: right;
color: #008cba;
margin-left: 60%;
font-size: x-small;
}
.popover-updated {
text-align: right;
margin-left: 60%;
font-size: x-small;
}
.popover-comment {
word-wrap: break-word;
margin-bottom: 10px;
}
.popover-comment-editor {
width: 100%;
height: auto;
background-color: inherit;
border-style: hidden;
}
.popover-divider {
.comment-divider {
width: 100%;
height: 1px;
background-color: #008cba;
@ -74,10 +78,6 @@
margin-bottom: 10px;
}
.popover-action-button {
display: none;
}
#otherComments {
h5 {
margin-top: 0;
@ -96,11 +96,10 @@
font-style: italic;
}
.popover-actions {
.comment-actions {
display: flex;
.popover-action-button {
display: block;
button {
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) {
var commentText = preprocess(comment.text);
if (index !== 0) {
htmlContent += '<div class="popover-divider"></div>'
htmlContent += '<div class="comment-divider"></div>'
}
htmlContent += '<div class="comment">';
htmlContent += '<div class="popover-header">' +
'<div class="popover-username">' + preprocess(comment.username) + '</div>' +
'<div class="popover-date">' + comment.date + '</div>';
htmlContent += '<div class="comment-header">' +
'<div class="comment-username">' + preprocess(comment.username) + '</div>' +
'<div class="comment-date">' + comment.date + '</div>';
if (comment.updated) {
htmlContent += '<div class="popover-updated">' +
htmlContent += '<div class="comment-updated">' +
'<i class="fa fa-pencil" aria-hidden="true"></i>' +
'<%= t('request_for_comments.comment_edited') %>' +
'</div>'
}
htmlContent += '</div>' +
'<div class="popover-comment">' + commentText + '</div>' +
'<textarea class="hidden popover-comment-editor">' + commentText + '</textarea>';
'<div class="comment-content">' + commentText + '</div>' +
'<textarea class="hidden comment-editor">' + commentText + '</textarea>';
if (comment.editable) {
htmlContent += '<div class="popover-actions">' +
'<button class="popover-action-button 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>' +
htmlContent += '<div class="comment-actions">' +
'<button class="action-edit btn btn-xs btn-warning" data-comment-id=' + comment.id + '><%= t('shared.edit') %></button>' +
'<button class="action-delete btn btn-xs btn-danger" data-comment-id=' + comment.id + '><%= t('shared.destroy') %></button>' +
'</div>';
}
htmlContent += '</div>';