Adjust answerbox layout on mobile

This commit is contained in:
Andreas Nedbal 2020-05-05 05:04:54 +02:00
parent 0bc4a5b968
commit c142920c6c
3 changed files with 7 additions and 6 deletions

View file

@ -1,5 +1,6 @@
.comment {
list-style-type: none;
margin-bottom: map-get($spacers, 2);
&__container {
padding-left: 0;

View file

@ -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

View file

@ -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