diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 30ef570f..745ee6f1 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -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"; diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss deleted file mode 100644 index f647663d..00000000 --- a/app/assets/stylesheets/base.css.scss +++ /dev/null @@ -1,3 +0,0 @@ -/* all custom SCSS should go into here */ - -@import "scss/comments"; \ No newline at end of file diff --git a/app/assets/stylesheets/components/_answerbox.scss b/app/assets/stylesheets/components/_answerbox.scss index 198efc7f..1c1209d6 100644 --- a/app/assets/stylesheets/components/_answerbox.scss +++ b/app/assets/stylesheets/components/_answerbox.scss @@ -44,7 +44,8 @@ text-decoration: none; } - &[name="ab-smile"] { + &[name="ab-smile"], + &[name="ab-smile-comment"] { color: var(--primary); &:hover { diff --git a/app/assets/stylesheets/components/_comments.scss b/app/assets/stylesheets/components/_comments.scss new file mode 100644 index 00000000..2cadc515 --- /dev/null +++ b/app/assets/stylesheets/components/_comments.scss @@ -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; + } +} + diff --git a/app/assets/stylesheets/inbox.css.scss b/app/assets/stylesheets/inbox.css.scss deleted file mode 100644 index 07a9c997..00000000 --- a/app/assets/stylesheets/inbox.css.scss +++ /dev/null @@ -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/ diff --git a/app/assets/stylesheets/scss/comments.scss b/app/assets/stylesheets/scss/comments.scss deleted file mode 100644 index 08b73e2d..00000000 --- a/app/assets/stylesheets/scss/comments.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/app/assets/stylesheets/user.css.scss b/app/assets/stylesheets/user.css.scss deleted file mode 100644 index 7c5eca9c..00000000 --- a/app/assets/stylesheets/user.css.scss +++ /dev/null @@ -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/ diff --git a/app/views/answerbox/_comments.haml b/app/views/answerbox/_comments.haml index ce4687c8..b543a5c5 100644 --- a/app/views/answerbox/_comments.haml +++ b/app/views/answerbox/_comments.haml @@ -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