Fix broken content mgmt -> editor links on mobile

refs #5652
- add `ember-resize` addon that registers a single resize event handler and exposes it as a service and mixin
- add a component that wraps the posts list and content preview and exposes a `previewIsHidden` property
- use the `previewIsHidden` property in `gh-posts-list-item` to switch the item's link between the editor and the preview
- add `display: none` to the preview pane when in mobile so that we can test it's visibility

core/client/app/components/gh-content-view-container.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    tagName: 'section',
+    classNames: ['gh-view', 'content-view-container'],
+
+    previewIsHidden: false,
+
+    resizeService: Ember.inject.service(),
+
+    calculatePreviewIsHidden: function () {
+        this.set('previewIsHidden', !this.$('.content-preview').is(':visible'));
+    },
+
+    didInsertElement: function () {
+        this._super(...arguments);
+        this.calculatePreviewIsHidden();
+        this.get('resizeService').on('debouncedDidResize',
+            Ember.run.bind(this, this.calculatePreviewIsHidden));
+    }
+});

core/client/app/components/gh-posts-list-item.js

@@ -6,6 +6,7 @@ export default Ember.Component.extend({
 
     post: null,
     active: false,
+    previewIsHidden: false,
 
     ghostPaths: Ember.inject.service('ghost-paths'),
 
@@ -27,6 +28,10 @@ export default Ember.Component.extend({
         return `background-image: url(${this.get('authorAvatar')})`.htmlSafe();
     }),
 
+    viewOrEdit: Ember.computed('previewIsHidden', function () {
+        return this.get('previewIsHidden') ? 'editor.edit' : 'posts.post';
+    }),
+
     click: function () {
         this.sendAction('onClick', this.get('post'));
     },

core/client/app/styles/layouts/content.css

@@ -185,6 +185,7 @@
 
 @media (max-width: 900px) {
     .content-preview {
+        display: none;
         overflow: visible;
         width: 100%;
         border: none;

core/client/app/templates/components/gh-content-view-container.hbs

@@ -0,0 +1 @@
+{{yield this}}

core/client/app/templates/posts.hbs

@@ -1,4 +1,4 @@
-<section class="gh-view content-view-container">
+{{#gh-content-view-container as |container|}}
 <header class="view-header">
     {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Content</span>{{/gh-view-title}}
     <section class="view-actions">
@@ -11,8 +11,8 @@
         {{#gh-infinite-scroll-box tagName="section" classNames="content-list-content js-content-scrollbox" fetch="loadNextPage"}}
             <ol class="posts-list">
                 {{#each sortedPosts key="id" as |post|}}
-                    {{#gh-posts-list-item post=post active=(is-equal post currentPost) click="showPostContent" onDoubleClick="openEditor" as |component|}}
-                        {{#link-to "posts.post" post.id class="permalink" title="Edit this post"}}
+                    {{#gh-posts-list-item post=post active=(is-equal post currentPost) previewIsHidden=container.previewIsHidden as |component|}}
+                        {{#link-to component.viewOrEdit post.id class="permalink" title="Edit this post"}}
                             <h3 class="entry-title">{{post.title}}</h3>
                             <section class="entry-meta">
                                 <span class="avatar" style={{component.authorAvatarBackground}}>
@@ -43,4 +43,4 @@
         {{outlet}}
     </section>
 </div>
-</section>
+{{/gh-content-view-container}}

core/client/config/environment.js

@@ -32,6 +32,13 @@ module.exports = function (environment) {
 
             serverTokenEndpoint: '<overriden by initializers/simple-auth-env>',
             serverTokenRevocationEndpoint: '<overriden by initializers/simple-auth-env>'
+        },
+
+        resizeServiceDefaults: {
+            debounceTimeout: 100,
+            heightSensitive: false,
+            widthSensitive: true,
+            injectionFactories: []
         }
     };
 

core/client/package.json

@@ -37,6 +37,7 @@
     "ember-data": "1.0.0-beta.18",
     "ember-export-application-global": "^1.0.2",
     "ember-myth": "0.1.1",
+    "ember-resize": "0.0.10",
     "ember-sinon": "0.2.1",
     "fs-extra": "0.16.3",
     "glob": "^4.0.5",