Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FEATURE: subtle in & out animations for user cards

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 {

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

@ -5,13 +5,21 @@
width: 500px; width: 500px;
left: 20px; left: 20px;
z-index: 990; z-index: 990;
box-shadow: 0 2px 6px rgba(0,0,0, .6); box-shadow: 0 2px 6px rgba(0,0,0,.6);
margin-top: -2px; margin-top: -2px;
background-color: $primary; background-color: $primary;
color: $secondary; color: $secondary;
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;
@ -25,13 +33,13 @@
} }
} }
&.no-bg { &.no-bg {
min-height: 50px; min-height: 50px;
.card-content { .card-content {
margin-top: 0; margin-top: 0;
}
} }
}
.avatar-placeholder { .avatar-placeholder {
width: 120px; width: 120px;
@ -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;