From 9e1f223892ecd80e9f3f3094c3e8032e60b90623 Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Thu, 11 Sep 2014 14:19:16 +0100
Subject: [PATCH] Snap page transition for mobile settings

References #3810

- Disables the `.fade-in` animation for settings page transitions on mobile
---
 core/client/assets/sass/layouts/settings.scss |  6 ++++++
 core/client/views/settings.js                 | 10 +++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss
index 8cb0d80ea086..d36be6499816 100644
--- 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
index 0c36b2265e0a..622949e34126 100644
--- a/core/client/views/settings.js
+++ b/core/client/views/settings.js
@@ -4,8 +4,8 @@ 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');
         }
     },
@@ -13,12 +13,12 @@ var SettingsView = Ember.View.extend({
     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');
     },