Refactor comment styles and layout
This commit is contained in:
Andreas Nedbal
parent
85d97b0c71
commit
9b38b1d736
|
|
@ -78,6 +78,7 @@
|
|||
"components/answerbox",
|
||||
"components/avatars",
|
||||
"components/buttons",
|
||||
"components/comments",
|
||||
"components/container",
|
||||
"components/entry",
|
||||
"components/jumbotron",
|
||||
|
|
@ -96,6 +97,3 @@
|
|||
|
||||
@import
|
||||
"utilities";
|
||||
|
||||
|
||||
@import "base";
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
/* all custom SCSS should go into here */
|
||||
|
||||
@import "scss/comments";
|
||||
|
|
@ -44,7 +44,8 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
&[name="ab-smile"] {
|
||||
&[name="ab-smile"],
|
||||
&[name="ab-smile-comment"] {
|
||||
color: var(--primary);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
.comment {
|
||||
list-style-type: none;
|
||||
|
||||
&__container {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&__user,
|
||||
&__content {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
&__user-avatar {
|
||||
margin-right: map-get($spacers, 2);
|
||||
border-radius: $avatar-border-radius;
|
||||
}
|
||||
|
||||
&__input-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__input {
|
||||
z-index: 99;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
&__character-count {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
right: .5rem;
|
||||
top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Place all the styles related to the inbox controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
.comments {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.comments li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.comments .pull-right {
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
.comments--box {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.comments--count {
|
||||
z-index: 0;
|
||||
margin-top: -2em;
|
||||
}
|
||||
|
||||
.comments--body {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.comments--content {
|
||||
overflow: hidden;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.comments--content p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.comments--media {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Place all the styles related to the user controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
|
@ -1,52 +1,52 @@
|
|||
- if a.comments.all.count == 0
|
||||
= t 'views.answerbox.no_comment'
|
||||
- else
|
||||
%ul.comments
|
||||
%ul.comment__container
|
||||
- a.comments.order(:created_at).each do |comment|
|
||||
%li{data: { comment_id: comment.id }}
|
||||
%li.comment{data: { comment_id: comment.id }}
|
||||
%div{class: "ab-comment-smile-list", style: "height: 0; width: 0"}= render "modal/comment_smiles", comment: comment
|
||||
.media.comments--media
|
||||
.media
|
||||
.pull-left
|
||||
%img.avatar-sm{src: comment.user.profile_picture.url(:medium)}
|
||||
.media-body.comments--body
|
||||
%h6.media-heading.answerbox--question-user
|
||||
%img.comment__user-avatar.avatar-md{src: comment.user.profile_picture.url(:medium)}
|
||||
.media-body
|
||||
%h6.media-heading.comment__user
|
||||
= user_screen_name comment.user
|
||||
%span.text-muted{title: comment.created_at, data: { toggle: :tooltip, placement: :right }}
|
||||
= "#{time_ago_in_words(comment.created_at)} ago"
|
||||
.pull-right
|
||||
%span.hidden-xs.text-muted
|
||||
- unless user_signed_in?
|
||||
- if comment.smile_count > 0
|
||||
%button.btn.btn-info.btn-sm{name: 'ab-smile-comment', disabled: true}
|
||||
%i.fa.fa-smile-o
|
||||
%span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
|
||||
- if user_signed_in?
|
||||
- if current_user.smiled_comment? comment
|
||||
%button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :unsmile }}
|
||||
%i.fa.fa-frown-o
|
||||
%span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
|
||||
- else
|
||||
%button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :smile }}
|
||||
.comment__content
|
||||
= markdown comment.content
|
||||
.pull-right
|
||||
%span.d-none.d-sm-inline.text-muted
|
||||
- unless user_signed_in?
|
||||
- if comment.smile_count > 0
|
||||
%button.btn.btn-link.answerbox__action{name: 'ab-smile-comment', disabled: true}
|
||||
%i.fa.fa-smile-o
|
||||
%span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
|
||||
.btn-group
|
||||
%button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
|
||||
%span.caret
|
||||
.dropdown-menu.dropdown-menu-right{role: :menu}
|
||||
%a.dropdown-item{href: '#', type: :button, data: { target: "#modal-view-comment#{comment.id}-smiles", toggle: :modal}}
|
||||
%i.fa.fa-smile-o
|
||||
= t 'views.actions.view'
|
||||
- if privileged?(comment.user) or privileged?(a.user)
|
||||
%a.dropdown-item.text-danger{href: '#', data: { action: 'ab-comment-destroy', c_id: comment.id }}
|
||||
%i.fa.fa-trash-o
|
||||
= t 'views.actions.delete'
|
||||
- unless comment.user == current_user
|
||||
%a.dropdown-item{href: '#', data: { action: 'ab-comment-report', c_id: comment.id }}
|
||||
%i.fa.fa-exclamation-triangle
|
||||
= t 'views.acions.report'
|
||||
.comments--content
|
||||
= markdown comment.content
|
||||
- if user_signed_in?
|
||||
- if current_user.smiled_comment? comment
|
||||
%button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :unsmile }}
|
||||
%i.fa.fa-fw.fa-frown-o
|
||||
%span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
|
||||
- else
|
||||
%button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :smile }}
|
||||
%i.fa.fa-fw.fa-smile-o
|
||||
%span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
|
||||
.btn-group
|
||||
%button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
|
||||
%span.caret
|
||||
.dropdown-menu.dropdown-menu-right{role: :menu}
|
||||
%a.dropdown-item{href: '#', type: :button, data: { target: "#modal-view-comment#{comment.id}-smiles", toggle: :modal}}
|
||||
%i.fa.fa-smile-o
|
||||
= t 'views.actions.view'
|
||||
- if privileged?(comment.user) or privileged?(a.user)
|
||||
%a.dropdown-item.text-danger{href: '#', data: { action: 'ab-comment-destroy', c_id: comment.id }}
|
||||
%i.fa.fa-trash-o
|
||||
= t 'views.actions.delete'
|
||||
- unless comment.user == current_user
|
||||
%a.dropdown-item{href: '#', data: { action: 'ab-comment-report', c_id: comment.id }}
|
||||
%i.fa.fa-exclamation-triangle
|
||||
= t 'views.acions.report'
|
||||
- if user_signed_in?
|
||||
.form-group.has-feedback{name: 'ab-comment-new-group', data: { a_id: a.id }}
|
||||
%input.form-control.comments--box{type: :text, placeholder: t('views.placeholder.comment'), name: 'ab-comment-new', data: {a_id: a.id }}
|
||||
%span.text-muted.form-control-feedback.comments--count{id: "ab-comment-charcount-#{a.id}"} 160
|
||||
.form-group.has-feedback.comment__input-group{name: 'ab-comment-new-group', data: { a_id: a.id }}
|
||||
%input.form-control.comment__input{type: :text, placeholder: t('views.placeholder.comment'), name: 'ab-comment-new', data: {a_id: a.id }}
|
||||
%span.text-muted.form-control-feedback.comment__character-count{id: "ab-comment-charcount-#{a.id}"} 160
|
||||
|
|
|
|||
Loading…
Reference in New Issue