codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-23 23:58:31 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

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, {
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'),
addBackground: function() {

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

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

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

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