IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 11:20:57 -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, {
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 {

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

@ -5,13 +5,21 @@
width: 500px;
left: 20px;
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;
background-color: $primary;
color: $secondary;
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;
@ -25,13 +33,13 @@
}
}
&.no-bg {
min-height: 50px;
&.no-bg {
min-height: 50px;
.card-content {
margin-top: 0;
.card-content {
margin-top: 0;
}
}
}
.avatar-placeholder {
width: 120px;
@ -84,6 +92,7 @@
color: dark-light-diff($primary, $secondary, 50%, -50%);
}
}
.groups {
font-size: 0.929em;
font-weight: normal;