diff --git a/app/assets/javascripts/answerbox/smile.coffee b/app/assets/javascripts/answerbox/smile.coffee
index 8a9b9769..b16adb66 100644
--- a/app/assets/javascripts/answerbox/smile.coffee
+++ b/app/assets/javascripts/answerbox/smile.coffee
@@ -3,7 +3,7 @@ $(document).on "click", "button[name=ab-smile]", ->
aid = btn[0].dataset.aId
action = btn[0].dataset.action
count = Number $("span#ab-smile-count-#{aid}").html()
- btn[0].dataset.loadingText = " #{count}"
+ btn[0].dataset.loadingText = " #{count}"
btn.button "loading"
target_url = switch action
@@ -36,8 +36,8 @@ $(document).on "click", "button[name=ab-smile]", ->
switch action
when 'smile'
btn[0].dataset.action = 'unsmile'
- btn.html " #{count}"
+ btn.html " #{count}"
when 'unsmile'
btn[0].dataset.action = 'smile'
- btn.html " #{count}"
+ btn.html " #{count}"
, 20
diff --git a/app/assets/javascripts/memes.coffee b/app/assets/javascripts/memes.coffee
index 873d34d0..33cc2341 100644
--- a/app/assets/javascripts/memes.coffee
+++ b/app/assets/javascripts/memes.coffee
@@ -1,3 +1,3 @@
cheet 'up up down down left right left right b a', ->
($ "body").addClass 'fa-spin'
- ($ "p.answerbox--question-text").each (i) -> ($ this).html ":^)"
\ No newline at end of file
+ ($ "p.answerbox__question-text").each (i) -> ($ this).html ":^)"
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index bc77e7ca..30ef570f 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -75,6 +75,7 @@
*/
@import
+"components/answerbox",
"components/avatars",
"components/buttons",
"components/container",
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 75cb4c14..f647663d 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -1,4 +1,3 @@
/* all custom SCSS should go into here */
-@import "scss/answerbox";
@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
new file mode 100644
index 00000000..198efc7f
--- /dev/null
+++ b/app/assets/stylesheets/components/_answerbox.scss
@@ -0,0 +1,63 @@
+.answerbox {
+ &__question-text,
+ &__question-user,
+ &__answer-user,
+ &__answer-date {
+ margin-bottom: 0px;
+ overflow: hidden;
+ }
+
+ &__answer-date {
+ font-size: .8rem;
+ line-height: .8;
+ overflow: visible;
+ }
+
+ &__answer-text {
+ margin-bottom: map-get($spacers, 3);
+ }
+
+ &__question-user-avatar,
+ &__answer-user-avatar {
+ margin-right: map-get($spacers, 2);
+ border-radius: $avatar-border-radius;
+ }
+
+ & .text-muted a,
+ & .text-muted a:hover {
+ color: var(--muted-text);
+ text-decoration: none;
+ }
+
+ &__action {
+ padding-left: map-get($spacers, 1);
+ padding-right: map-get($spacers, 1);
+
+ & i {
+ font-size: 1.4rem;
+ vertical-align: top;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+
+ &[name="ab-smile"] {
+ color: var(--primary);
+
+ &:hover {
+ color: var(--success);
+ }
+
+ &[data-action="unsmile"] {
+ color: var(--success);
+
+ &:hover {
+ color: var(--danger);
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/scss/answerbox.scss b/app/assets/stylesheets/scss/answerbox.scss
deleted file mode 100644
index 362efe92..00000000
--- a/app/assets/stylesheets/scss/answerbox.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.answerbox .text-muted a, .answerbox .text-muted a:hover {
- color: $gray;
- text-decoration: none;
-}
-
-.answerbox--img {
- min-height: 32px;
- min-width: 32px;
- height: 32px;
- width: 32px;
-}
-
-.answerbox--img-small {
- min-height: 20px;
- min-width: 20px;
- height: 20px;
- width: 20px;
-}
-
-.answerbox--question-text, .answerbox--question-user, .answerbox--answer-user, .answerbox--answer-date {
- margin-bottom: 0px;
- overflow: hidden;
-}
-
-.answerbox--question-text {
- color: $gray;
-}
-
-.answerbox--answer-text {
- font-size: 16px;
- color: #000;
- line-height: 1.3em;
-}
-
-.answerbox--question-text {
- line-height: 1.3em;
- overflow: hidden;
-}
-
-.answerbox--answer-date {
- font-size: 12px;
- line-height: 1.3em;
-}
-
-.answerbox [name="ab-smile"], .answerbox [name="ab-smile-comment"] {
- padding: 6px 11px;
- padding-left: 21px;
- position: relative;
- overflow: hidden;
- border: none;
-
- i.fa.fa-smile-o, i.fa.fa-frown-o, i.fa.fa-meh-o {
- position: absolute;
- font-size: 3em;
- left: -13px;
- top: -10px;
- display: block;
- }
-}
diff --git a/app/views/answerbox/_actions.haml b/app/views/answerbox/_actions.haml
index a41345cb..6f04c009 100644
--- a/app/views/answerbox/_actions.haml
+++ b/app/views/answerbox/_actions.haml
@@ -1,4 +1,4 @@
-%span.hidden-xs.text-muted
+%span.d-none.d-sm-inline.text-muted
- unless user_signed_in?
- if a.smile_count > 0
%button.btn.btn-info.btn-sm{name: 'ab-smile', disabled: true}
@@ -6,16 +6,16 @@
%span{id: "ab-smile-count-#{a.id}"}= a.smile_count
- if user_signed_in?
- if current_user.smiled? a
- %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :unsmile }}
- %i.fa.fa-frown-o
+ %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :unsmile }}
+ %i.fa.fa-fw.fa-frown-o
%span{id: "ab-smile-count-#{a.id}"}= a.smile_count
- else
- %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :smile }}
- %i.fa.fa-smile-o
+ %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :smile }}
+ %i.fa.fa-fw.fa-smile-o
%span{id: "ab-smile-count-#{a.id}"}= a.smile_count
- unless @display_all
- %button.btn.btn-primary.btn-sm{type: :button, name: 'ab-comments', data: { a_id: a.id, state: :hidden }}
- %i.fa.fa-comments
+ %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-comments', data: { a_id: a.id, state: :hidden }}
+ %i.fa.fa-fw.fa-comments
%span{id: "ab-comment-count-#{a.id}"}= a.comment_count
- if user_signed_in?
.btn-group
diff --git a/app/views/answerbox/_comments.haml b/app/views/answerbox/_comments.haml
index 17eacd2b..ce4687c8 100644
--- a/app/views/answerbox/_comments.haml
+++ b/app/views/answerbox/_comments.haml
@@ -7,7 +7,7 @@
%div{class: "ab-comment-smile-list", style: "height: 0; width: 0"}= render "modal/comment_smiles", comment: comment
.media.comments--media
.pull-left
- %img.img-rounded.answerbox--img{src: comment.user.profile_picture.url(:medium)}
+ %img.avatar-sm{src: comment.user.profile_picture.url(:medium)}
.media-body.comments--body
%h6.media-heading.answerbox--question-user
= user_screen_name comment.user
diff --git a/app/views/answerbox/_header.haml b/app/views/answerbox/_header.haml
index db7b486e..d4d7c8ab 100644
--- a/app/views/answerbox/_header.haml
+++ b/app/views/answerbox/_header.haml
@@ -1,9 +1,9 @@
.card-header
- .media.question-media
+ .media
- unless a.question.author_is_anonymous
%a.pull-left{href: show_user_profile_path(a.question.user.screen_name)}
- %img.img-rounded.answerbox--img{src: a.question.user.profile_picture.url(:medium)}
- .media-body.question-body
+ %img.answerbox__question-user-avatar.avatar-md{src: a.question.user.profile_picture.url(:medium)}
+ .media-body
- if user_signed_in?
.pull-right
.btn-group
@@ -18,12 +18,12 @@
%a.dropdown-item{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: a.question.id }}
%i.fa.fa-exclamation-triangle
= t 'views.actions.report'
- %h6.text-muted.media-heading.answerbox--question-user
+ %h6.text-muted.media-heading.answerbox__question-user
= raw t('views.answerbox.asked', user: user_screen_name(a.question.user, anonymous: a.question.author_is_anonymous), time: time_tooltip(a.question))
- unless a.question.author_is_anonymous
- if a.question.answer_count > 1
ยท
%a{href: show_user_question_path(a.question.user.screen_name, a.question.id)}
= pluralize(a.question.answer_count, t('views.general.answer'))
- .answerbox--question-text
+ .answerbox__question-text
= a.question.content
\ No newline at end of file
diff --git a/app/views/answerbox/_smiles.haml b/app/views/answerbox/_smiles.haml
index 119086a6..ef9a8a4f 100644
--- a/app/views/answerbox/_smiles.haml
+++ b/app/views/answerbox/_smiles.haml
@@ -7,4 +7,4 @@
- else
- a.smiles.all.each do |smile|
%a{href: show_user_profile_path(smile.user.screen_name), title: smile.user.screen_name, data: { toggle: :tooltip, placement: :top, smile_id: smile.id }}
- %img.img-rounded.answerbox--img-small{src: smile.user.profile_picture.url(:medium)}
\ No newline at end of file
+ %img.avatar-xs{src: smile.user.profile_picture.url(:medium)}
\ No newline at end of file
diff --git a/app/views/application/_answerbox.haml b/app/views/application/_answerbox.haml
index 43d86916..b7c343fc 100644
--- a/app/views/application/_answerbox.haml
+++ b/app/views/application/_answerbox.haml
@@ -3,7 +3,7 @@
= render "answerbox/header", a: a
.card-body
- if @display_all.nil?
- .answerbox--answer-text
+ .answerbox__answer-text
= markdown a.content[0..255]
- if a.content.length > 255
[...]
@@ -11,7 +11,7 @@
%a.btn.btn-primary{href: show_user_answer_path(a.user.screen_name, a.id)}
= t 'views.answerbox.read'
- else
- .answerbox--answer-text
+ .answerbox__answer-text
= markdown a.content
- if @user.nil?
.row
@@ -19,11 +19,11 @@
.media
.pull-left
%a{href: show_user_profile_path(a.user.screen_name)}
- %img.img-rounded.answerbox--img{src: a.user.profile_picture.url(:medium)}
+ %img.answerbox__answer-user-avatar.avatar-sm{src: a.user.profile_picture.url(:medium)}
.media-body
- %h6.media-heading.answerbox--answer-user
+ %h6.media-heading.answerbox__answer-user
= raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "xs"), user: user_screen_name(a.user))
- .answerbox--answer-date
+ .answerbox__answer-date
= link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
.col-md-6.col-sm-8.col-xs-6.text-right
= render 'answerbox/actions', a: a