Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-09-06 10:50:21 +08:00
Code Packages Activity Actions 9

FIX: Restore animation for like action on mobile (#14844)

Browse source 
Regressed in 89a2cec7be
This commit is contained in:
Penar Musaraj 2021-11-08 13:21:16 -05:00 • committed by GitHub
parent e0ced68eec
commit 9ddb3a9ca6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/widgets/post-menu.js
View file

@ -677,7 +677,7 @@ export default createWidget("post-menu", {
`.toggle-like[data-post-id="${attrs.id}"] .d-icon` `.toggle-like[data-post-id="${attrs.id}"] .d-icon`
); );
heart.closest(".toggle-like").classList.add("has-like"); heart.closest(".toggle-like").classList.add("has-like");
heart.classList.add("has-animation"); heart.classList.add("heart-animation");
return new Promise((resolve) => { return new Promise((resolve) => {
later(() => { later(() => {

16
app/assets/stylesheets/common/base/topic-post.scss
View file

@ -274,6 +274,22 @@ $quote-share-maxwidth: 150px;
} }
} }
@keyframes heartBump {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.has-like .d-icon.heart-animation {
animation: heartBump 0.4s;
}
// we use aside to hold expandable quotes (versus, say, static blockquotes) // we use aside to hold expandable quotes (versus, say, static blockquotes)
aside.quote { aside.quote {
margin-top: 1em; margin-top: 1em;

15
app/assets/stylesheets/desktop/topic-post.scss
View file

@ -1,15 +1,3 @@
@keyframes heartBump {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.wrap { .wrap {
max-width: $large-width; max-width: $large-width;
} }
@ -115,9 +103,6 @@ nav.post-controls {
// Like button after I've liked // Like button after I've liked
.d-icon { .d-icon {
color: var(--love); color: var(--love);
&.has-animation {
animation: heartBump 0.4s;
}
} }
&.d-hover { &.d-hover {
background: var(--primary-low); background: var(--primary-low);