FEATURE: subtle in & out animations for user cards

discourse · Mar 2, 2015 · 64d0d12 · 64d0d12
1 parent 2a7af5e
commit 64d0d12
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/app/assets/javascripts/discourse/views/user-card.js.es6 b/app/assets/javascripts/discourse/views/user-card.js.es6
@@ -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() {

diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -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 {

diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
@@ -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;