IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FEATURE: subtle in & out animations for user cards

Browse Source
This commit is contained in:
Régis Hanol 2015-03-02 18:12:25 +01:00
parent 2a7af5e718
commit 64d0d12632
3 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/views/user-card.js.es6
View File

@ -6,7 +6,7 @@ var clickOutsideEventName = "mousedown.outside-user-card",
export default Discourse.View.extend(CleansUp, { export default Discourse.View.extend(CleansUp, {
elementId: 'user-card', elementId: 'user-card',
classNameBindings: ['controller.visible::hidden', 'controller.showBadges', 'controller.hasCardBadgeImage'], classNameBindings: ['controller.visible:show', 'controller.showBadges', 'controller.hasCardBadgeImage'],
allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'), allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'),
addBackground: function() { addBackground: function() {

16
app/assets/stylesheets/common/base/magnific-popup.scss
View File

@ -651,15 +651,15 @@ button {
/* start state */ /* start state */
.mfp-content { .mfp-content {
opacity: 0; opacity: 0;
transition: all 0.2s ease-in-out; transition: all .2s;
-webkit-transform: scale(0.8); -webkit-transform: scale(.8);
-ms-transform: scale(0.8); -ms-transform: scale(.8);
transform: scale(0.8); transform: scale(.8);
} }
&.mfp-bg { &.mfp-bg {
opacity: 0; opacity: 0;
transition: all 0.3s ease-out; transition: all .3s ease-out;
} }
/* animate in */ /* animate in */
@ -679,9 +679,9 @@ button {
&.mfp-removing { &.mfp-removing {
.mfp-content { .mfp-content {
-webkit-transform: scale(0.8); -webkit-transform: scale(.8);
-ms-transform: scale(0.8); -ms-transform: scale(.8);
transform: scale(0.8); transform: scale(.8);
opacity: 0; opacity: 0;
} }
&.mfp-bg { &.mfp-bg {

9
app/assets/stylesheets/desktop/user-card.scss
View File

@ -12,6 +12,14 @@
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
min-height: 175px; min-height: 175px;
opacity: 0;
transform: scale(.7);
transition: opacity .2s, transform .2s;
&.show {
opacity: 1;
transform: scale(1);
}
.card-content { .card-content {
padding: 12px 12px 0 12px; padding: 12px 12px 0 12px;
@ -84,6 +92,7 @@
color: dark-light-diff($primary, $secondary, 50%, -50%); color: dark-light-diff($primary, $secondary, 50%, -50%);
} }
} }
.groups { .groups {
font-size: 0.929em; font-size: 0.929em;
font-weight: normal; font-weight: normal;