Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Snap page transition for mobile settings

Browse source 
References #3810

- Disables the `.fade-in` animation for settings page transitions on mobile
This commit is contained in:
Paul Adam Davis 2014-09-11 14:19:16 +01:00
parent 5e9d545bba
commit 9e1f223892
2 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
core/client/assets/sass/layouts/settings.scss
View file

@ -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%;

10
core/client/views/settings.js
View file

@ -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');
},