Merge pull request #3535 from rwjblue/properly-transition-on-mobile

Handle toggleing the content screen on mobile.

core/client/controllers/posts.js

@@ -72,6 +72,18 @@ var PostsController = Ember.ArrayController.extend(PaginationControllerMixin, {
         //this is necesariy because we do not have access to the model inside the Controller::init method
         this._super({'modelType': 'post'});
 
+    },
+
+    actions: {
+        showContentPreview: function () {
+            $('.content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
+            $('.content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
+        },
+
+        hideContentPreview: function () {
+            $('.content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
+            $('.content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
+        },
     }
 });
 

core/client/routes/posts/index.js

@@ -1,4 +1,5 @@
 import loadingIndicator from 'ghost/mixins/loading-indicator';
+import {mobileQuery} from 'ghost/utils/mobile';
 
 var PostsIndexRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, loadingIndicator, {
     // This route's only function is to determine whether or not a post
@@ -7,7 +8,8 @@ var PostsIndexRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, loa
     beforeModel: function () {
         var self = this,
         // the store has been populated so we can work with the local copy
-            posts = this.store.all('post');
+            posts = this.store.all('post'),
+            currentPost = this.controllerFor('posts').get('currentPost');
 
         return this.store.find('user', 'me').then(function (user) {
             // return the first post find that matches the following criteria:
@@ -23,6 +25,10 @@ var PostsIndexRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, loa
         })
         .then(function (post) {
             if (post) {
+                if (currentPost === post && mobileQuery.matches) {
+                    self.controllerFor('posts').send('hideContentPreview');
+                }
+
                 return self.transitionTo('posts.post', post);
             }
         });

core/client/routes/posts/post.js

@@ -1,5 +1,6 @@
 import loadingIndicator from 'ghost/mixins/loading-indicator';
 import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
+import {mobileQuery} from 'ghost/utils/mobile';
 
 var PostsPostRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, loadingIndicator, ShortcutsRoute, {
     model: function (params) {
@@ -52,6 +53,10 @@ var PostsPostRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, load
         this._super(controller, model);
 
         this.controllerFor('posts').set('currentPost', model);
+
+        if (mobileQuery.matches) {
+            this.controllerFor('posts').send('hideContentPreview');
+        }
     },
 
     shortcuts: {

core/client/views/posts.js

@@ -1,24 +1,24 @@
 import {responsiveAction} from 'ghost/utils/mobile';
 
 var PostsView = Ember.View.extend({
+    target: Ember.computed.alias('controller'),
     classNames: ['content-view-container'],
     tagName: 'section',
 
     mobileInteractions: function () {
         Ember.run.scheduleOnce('afterRender', this, function () {
+            var self = this;
             // ### Show content preview when swiping left on content list
             $('.manage').on('click', '.content-list ol li', function (event) {
                 responsiveAction(event, '(max-width: 800px)', function () {
-                    $('.content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
+                    self.send('showContentPreview');
-                    $('.content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
                 });
             });
 
             // ### Hide content preview
             $('.manage').on('click', '.content-preview .button-back', function (event) {
                 responsiveAction(event, '(max-width: 800px)', function () {
-                    $('.content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
+                    self.send('hideContentPreview');
-                    $('.content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
                 });
             });
         });