FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor and adjust answerbox styles

This commit is contained in:
Andreas Nedbal 2020-05-02 20:35:28 +02:00
parent 2a8a80e859
commit b508eb3f21
11 changed files with 87 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/answerbox/smile.coffee
View File

@ -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 = "<i class=\"fa fa-meh-o fa-spin\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
btn[0].dataset.loadingText = "<i class=\"fa fa-fw fa-meh-o fa-spin\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
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 "<i class=\"fa fa-frown-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
btn.html "<i class=\"fa fa-fw fa-frown-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
when 'unsmile'
btn[0].dataset.action = 'smile'
btn.html "<i class=\"fa fa-smile-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
btn.html "<i class=\"fa fa-fw fa-smile-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
, 20

2
app/assets/javascripts/memes.coffee
View File

@ -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 ":^)"
($ "p.answerbox__question-text").each (i) -> ($ this).html ":^)"

1
app/assets/stylesheets/application.scss
View File

@ -75,6 +75,7 @@
*/
@import
"components/answerbox",
"components/avatars",
"components/buttons",
"components/container",

1
app/assets/stylesheets/base.css.scss
View File

@ -1,4 +1,3 @@
/* all custom SCSS should go into here */
@import "scss/answerbox";
@import "scss/comments";

63
app/assets/stylesheets/components/_answerbox.scss Normal file
View File

@ -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);
}
}
}
}
}

59
app/assets/stylesheets/scss/answerbox.scss
View File

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

14
app/views/answerbox/_actions.haml
View File

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

2
app/views/answerbox/_comments.haml
View File

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

10
app/views/answerbox/_header.haml
View File

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

2
app/views/answerbox/_smiles.haml
View File

@ -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)}
%img.avatar-xs{src: smile.user.profile_picture.url(:medium)}

10
app/views/application/_answerbox.haml
View File

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