From c142920c6cbf0258c4032515b36b2895ceaa8cb7 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Tue, 5 May 2020 05:04:54 +0200
Subject: [PATCH] Adjust answerbox layout on mobile

---
 app/assets/stylesheets/components/_comments.scss |  1 +
 app/views/answerbox/_comments.haml               |  2 +-
 app/views/application/_answerbox.haml            | 10 +++++-----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/components/_comments.scss b/app/assets/stylesheets/components/_comments.scss
index 2cadc515..70d35759 100644
--- a/app/assets/stylesheets/components/_comments.scss
+++ b/app/assets/stylesheets/components/_comments.scss
@@ -1,5 +1,6 @@
 .comment {
   list-style-type: none;
+  margin-bottom: map-get($spacers, 2);
 
   &__container {
     padding-left: 0;
diff --git a/app/views/answerbox/_comments.haml b/app/views/answerbox/_comments.haml
index b543a5c5..4e635a3d 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
           .pull-left
-            %img.comment__user-avatar.avatar-md{src: comment.user.profile_picture.url(:medium)}
+            %img.comment__user-avatar.avatar-sm{src: comment.user.profile_picture.url(:medium)}
           .media-body
             %h6.media-heading.comment__user
               = user_screen_name comment.user
diff --git a/app/views/application/_answerbox.haml b/app/views/application/_answerbox.haml
index b7c343fc..92cc1063 100644
--- a/app/views/application/_answerbox.haml
+++ b/app/views/application/_answerbox.haml
@@ -15,24 +15,24 @@
         = markdown a.content
     - if @user.nil?
       .row
-        .col-md-6.col-sm-4.col-xs-6.text-left.text-muted
+        .col-4.col-sm-4.col-md-6.text-left.text-muted
           .media
             .pull-left
               %a{href: show_user_profile_path(a.user.screen_name)}
                 %img.answerbox__answer-user-avatar.avatar-sm{src: a.user.profile_picture.url(:medium)}
             .media-body
               %h6.media-heading.answerbox__answer-user
-                = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "xs"), user: user_screen_name(a.user))
+                = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "d-none d-sm-inline"), user: user_screen_name(a.user))
               .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
+        .col-8.col-sm-8.col-md-6.text-right
           = render 'answerbox/actions', a: a
     - else
       .row
-        .col-md-6.col-sm-4.col-xs-6.text-left.text-muted
+        .col-4.col-sm-4.col-md-6.text-left.text-muted
           %i.fa.fa-clock-o
           = 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
+        .col-8.col-sm-8.col-md-6.text-right
           = render 'answerbox/actions', a: a
   .card-footer{id: "ab-comments-section-#{a.id}", style: @display_all.nil? ? 'display: none' : nil }
     %div{id: "ab-smiles-#{a.id}"}= render 'answerbox/smiles', a: a