Merge pull request #4044 from novaugust/issue4032

Abstract mobile transition interactions

core/client/assets/sass/components/modals.scss

@@ -48,7 +48,7 @@
     z-index: 1050;
     pointer-events: auto;
 
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
         width: auto;
         padding: 10px;
     };
@@ -57,7 +57,7 @@
         min-width: 100px;
     }
 
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
         width: 100%;
         margin-left: 0;
     }
@@ -77,7 +77,7 @@
     @extend %modal;
     padding: 60px 0 30px;
 
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
         padding: 30px 0;
     }
 }
@@ -134,11 +134,11 @@
 .modal-style-wide {
     width: 550px;
 
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
         width: 100%;
     }
 }
 
 .modal-style-centered {
     text-align: center;
-}
+}

core/client/assets/sass/layouts/content.scss

@@ -9,7 +9,7 @@
     height: 100%;
     width: 100%;
 
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
         overflow-x: hidden;
     }
 }
@@ -24,7 +24,7 @@
     border-right: $lightbrown 1px solid;
     background: #fff;
 
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
         width: auto;
         right: 0;
         z-index: 500;
@@ -77,7 +77,7 @@
         float: right;
         text-align: right;
         margin-left: 15px;
-        @media (max-width: 800px) {
+        @media (max-width: 900px) {
             float: none;
         }
     }
@@ -118,7 +118,7 @@
             @media (max-width: 400px) {
                 padding: 15px;
             }
-            @media (max-width: 800px) {
+            @media (max-width: 900px) {
                 padding-right: 40px;
             }
 
@@ -128,7 +128,7 @@
                 margin-top: -6px;
                 right: 15px;
             }
-            @media (min-width: 801px) {
+            @media (min-width: 901px) {
                 &:after {
                     display: none;
                 }
@@ -143,7 +143,7 @@
     } // li
 
     li.active {
-        @media (min-width: 801px) {
+        @media (min-width: 901px) {
             // only apply active styles on larger devices
 
             border-bottom: lighten($midgrey, 40%) 1px solid;
@@ -178,7 +178,7 @@
     right:0;
     overflow: auto;
     background: #fff;
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
         width: auto;
         left: 100%;
         right: -100%;
@@ -245,7 +245,7 @@
     padding: 0px;
     display: table;
     z-index: 600;
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
         position: fixed;
         top: 45%;
         left: 50%;
@@ -255,7 +255,7 @@
         vertical-align: middle;
         display: table-cell;
         text-align: center;
-        @media (max-width: 800px) {
+        @media (max-width: 900px) {
             display: block;
             position: relative;
             left: -50%;
@@ -268,4 +268,4 @@
         }
     } // ,no-posts
 
-} // .no-posts-box
+} // .no-posts-box

core/client/assets/sass/layouts/settings.scss

@@ -49,7 +49,7 @@
             top: 50%;
             left: 30px;
             transform: translateY(-50%);
-            
+
             transition: color 0.1s;
             color: $brown;
 
@@ -139,8 +139,8 @@
 // The main content panel on the right
 .settings-content {
     margin-left: 25%;
-    
-    @media (max-width: 800px) {
+
+    @media (max-width: 900px) {
         &.fade-in {
             animation: none;
         }
@@ -312,4 +312,4 @@
             float: right;
         }
     }
-}
+}

core/client/assets/sass/patterns/_shame.scss

@@ -72,7 +72,7 @@
                 border-width: 10px 8px 10px 0;
             }
 
-            @media (max-width: 800px) {
+            @media (max-width: 900px) {
                 display: inline-block;
             }
         }
@@ -142,4 +142,4 @@
 
 .ghost-popover.open {
     display: block !important;
-}
+}

core/client/controllers/posts/post.js

@@ -1,4 +1,3 @@
-import {mobileQuery} from 'ghost/utils/mobile';
 var PostController = Ember.ObjectController.extend({
     isPublished: Ember.computed.equal('status', 'published'),
     classNameBindings: ['featured'],
@@ -13,17 +12,8 @@ var PostController = Ember.ObjectController.extend({
                 self.notifications.showErrors(errors);
             });
         },
-        hidePostContent: function () {
-            if (mobileQuery.matches) {
-                $('.js-content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
-                $('.js-content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
-            }
-        },
         showPostContent: function () {
-            if (mobileQuery.matches) {
-                $('.js-content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
-                $('.js-content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
-            }
+            this.transitionToRoute('posts.post', this.get('model'));
         }
     }
 });

core/client/routes/mobile-index-route.js

@@ -0,0 +1,29 @@
+import mobileQuery from 'ghost/utils/mobile';
+
+//Routes that extend MobileIndexRoute need to implement
+// desktopTransition, a function which is called when
+// the user resizes to desktop levels.
+var MobileIndexRoute = Ember.Route.extend({
+    desktopTransition: Ember.K,
+
+    activate: function attachDesktopTransition() {
+        this._super();
+        mobileQuery.addListener(this.desktopTransitionMQ);
+    },
+
+    deactivate: function removeDesktopTransition() {
+        this._super();
+        mobileQuery.removeListener(this.desktopTransitionMQ);
+    },
+
+    setDesktopTransitionMQ: function () {
+        var self = this;
+        this.set('desktopTransitionMQ', function desktopTransitionMQ() {
+            if (!mobileQuery.matches) {
+                self.desktopTransition();
+            }
+        });
+    }.on('init')
+});
+
+export default MobileIndexRoute;

core/client/routes/posts.js

@@ -60,9 +60,6 @@ var PostsRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, Shortcut
         'down': 'moveDown'
     },
     actions: {
-        openEditor: function (post) {
-            this.transitionTo('editor.edit', post);
-        },
         moveUp: function () {
             this.stepThroughPosts(-1);
         },

core/client/routes/posts/index.js

@@ -1,28 +1,38 @@
+import MobileIndexRoute from 'ghost/routes/mobile-index-route';
 import loadingIndicator from 'ghost/mixins/loading-indicator';
+import mobileQuery from 'ghost/utils/mobile';
 
-var PostsIndexRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, loadingIndicator, {
-    //Transition to posts.post if there are any posts the user can see
+var PostsIndexRoute = MobileIndexRoute.extend(SimpleAuth.AuthenticatedRouteMixin, loadingIndicator, {
+    // Transition to a specific post if we're not on mobile
     beforeModel: function () {
+        if (!mobileQuery.matches) {
+            return this.goToPost();
+        }
+    },
+
+    goToPost: function () {
         var self = this,
-        // the store has been populated so we can work with the local copy
+            // the store has been populated by PostsRoute
             posts = this.store.all('post'),
             post;
-
         return this.store.find('user', 'me').then(function (user) {
-            // return the first post find that matches the following criteria:
-            // * User is an author, and is the author of this post
-            // * User has a role other than author
             post = posts.find(function (post) {
+                // Authors can only see posts they've written
                 if (user.get('isAuthor')) {
                     return post.isAuthoredByUser(user);
-                } else {
-                    return true;
                 }
+                return true;
             });
             if (post) {
                 return self.transitionTo('posts.post', post);
             }
+            self.get('controller').set('noPosts', true);
         });
+    },
+
+    //Mobile posts route callback
+    desktopTransition: function () {
+        this.goToPost();
     }
 });
 

core/client/routes/posts/post.js

@@ -1,6 +1,5 @@
 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) {
@@ -53,10 +52,6 @@ var PostsPostRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, load
         this._super(controller, model);
 
         this.controllerFor('posts').set('currentPost', model);
-
-        if (mobileQuery.matches) {
-            this.controllerFor('posts.post').send('hidePostContent');
-        }
     },
 
     shortcuts: {

core/client/routes/settings/index.js

@@ -1,36 +1,25 @@
-import {mobileQuery} from 'ghost/utils/mobile';
+import MobileIndexRoute from 'ghost/routes/mobile-index-route';
 import CurrentUserSettings from 'ghost/mixins/current-user-settings';
+import mobileQuery from 'ghost/utils/mobile';
 
-var SettingsIndexRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, CurrentUserSettings, {
-    // redirect to general tab, unless on a mobile phone
+var SettingsIndexRoute = MobileIndexRoute.extend(SimpleAuth.AuthenticatedRouteMixin, CurrentUserSettings, {
+    // Redirect users without permission to view settings,
+    // and show the settings.general route unless the user
+    // is mobile
     beforeModel: function () {
         var self = this;
-        this.currentUser()
+        return this.currentUser()
             .then(this.transitionAuthor())
             .then(this.transitionEditor())
             .then(function () {
                 if (!mobileQuery.matches) {
                     self.transitionTo('settings.general');
-                } else {
-                    //fill the empty {{outlet}} in settings.hbs if the user
-                    //goes to fullscreen
-
-                    //fillOutlet needs special treatment so that it is
-                    //properly bound to this when called from a MQ event
-                    self.set('fillOutlet', _.bind(function fillOutlet(mq) {
-                        if (!mq.matches) {
-                            self.transitionTo('settings.general');
-                        }
-                    }, self));
-                    mobileQuery.addListener(self.fillOutlet);
                 }
             });
     },
-
-    deactivate: function () {
-        if (this.get('fillOutlet')) {
-            mobileQuery.removeListener(this.fillOutlet);
-        }
+
+    desktopTransition: function () {
+        this.transitionTo('settings.general');
     }
 });
 

core/client/templates/posts/index.hbs

@@ -1,6 +1,8 @@
+{{#if noPosts}}
 <div class="no-posts-box">
     <div class="no-posts">
         <h3>You Haven't Written Any Posts Yet!</h3>
         {{#link-to "editor.new"}}<button type="button" class="btn btn-green btn-lg" title="New Post">Write a new Post</button>{{/link-to}}
     </div>
 </div>
+{{/if}}

core/client/templates/posts/post.hbs

@@ -1,5 +1,5 @@
 <header class="post-preview-header">
-    <button type="button" class="btn btn-default btn-back" {{action "hidePostContent"}}>Back</button>
+    {{#link-to "posts" tagName="button" class="btn btn-default btn-back"}}Back{{/link-to}}
     <button type="button" {{bind-attr class="featured:featured:unfeatured"}} title="Feature this post" {{action "toggleFeatured"}}>
         <span class="hidden">Star</span>
     </button>

core/client/templates/settings.hbs

@@ -4,7 +4,7 @@
 </header>
 
 <div class="page-content">
-    <nav class="settings-menu">
+    <nav class="settings-menu js-settings-menu">
         <ul>
             {{#unless session.user.isAuthor}}
                 {{#unless session.user.isEditor}}

core/client/templates/settings/about.hbs

@@ -1,6 +1,6 @@
 <header class="settings-view-header">
     <h2 class="page-title">About</h2>
-    <div class="settings-header-inner">
+    <div class="js-settings-header-inner settings-header-inner">
         {{#link-to 'settings' class='btn btn-default btn-back'}}Back{{/link-to}}
     </div>
 </header>