Snap page transition for mobile settings

References #3810 - Disables the `.fade-in` animation for settings page transitions on mobile
TryGhost · Sep 11, 2014 · 9e1f223 · 9e1f223
1 parent 5e9d545
commit 9e1f223
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss
@@ -141,6 +141,12 @@
 // The main content panel on the right
 .settings-content {
     margin-left: 25%;
+
+    @media (max-width: 800px) {
+        &.fade-in {
+            animation: none;
+        }
+    }
 
     .settings-general img {
         max-width: 100%;

diff --git a/core/client/views/settings.js b/core/client/views/settings.js
@@ -4,21 +4,21 @@ var SettingsView = Ember.View.extend({
     // used by SettingsContentBaseView and on resize to mobile from desktop
     showSettingsContent: function () {
         if (mobileQuery.matches) {
-            $('.settings-menu').animate({right: '100%', left: '-110%', 'margin-right': '15px'}, 300);
-            $('.settings-content').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
+            $('.settings-menu').css({right: '100%', left: '-110%', 'margin-right': '15px'});
+            $('.settings-content').css({right: '0', left: '0', 'margin-left': '0'});
             $('.settings-header-inner').css('display', 'block');
         }
     },
     // used by SettingsIndexView
     showSettingsMenu: function () {
         if (mobileQuery.matches) {
             $('.settings-header-inner').css('display', 'none');
-            $('.settings-menu').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
-            $('.settings-content').animate({right: '-100%', left: '100%', 'margin-left': '15'}, 300);
+            $('.settings-menu').css({right: '0', left: '0', 'margin-right': '0'});
+            $('.settings-content').css({right: '-100%', left: '100%', 'margin-left': '15'});
         }
     },
     showAll: function () {
-        //Remove any styles applied by jQuery#animate
+        //Remove any styles applied by jQuery#css
         $('.settings-menu, .settings-content').removeAttr('style');
     },