Merge pull request #5778 from kevinansfield/mobile-preview

Mobile markdown/preview tabs

ghost/admin/app/components/gh-content-view-container.js

@@ -9,7 +9,9 @@ export default Ember.Component.extend({
     resizeService: Ember.inject.service(),
 
     calculatePreviewIsHidden: function () {
+        if (this.$('.content-preview').length) {
             this.set('previewIsHidden', !this.$('.content-preview').is(':visible'));
+        }
     },
 
     didInsertElement: function () {

ghost/admin/app/components/gh-editor.js

@@ -54,5 +54,15 @@ export default Ember.Component.extend({
         previewPosition = scrollInfo.top * ratio;
 
         return previewPosition;
-    })
+    }),
+
+    activeTab: 'markdown',
+    markdownActive: Ember.computed.equal('activeTab', 'markdown'),
+    previewActive: Ember.computed.equal('activeTab', 'preview'),
+
+    actions: {
+        selectTab: function (tab) {
+            this.set('activeTab', tab);
+        }
+    }
 });

ghost/admin/app/styles/layouts/editor.css

@@ -73,15 +73,45 @@
     line-height: 1em;
 }
 .editor .floatingheader a {
+    padding: 5px 15px;
     color: var(--midgrey);
 }
+.editor .floatingheader a.active {
+    font-weight: bold;
+}
+.editor .floatingheader a:first-of-type {
+    padding-left: 0;
+}
+.editor .floatingheader a:last-of-type {
+    padding-right: 0;
+}
+.editor .floatingheader span a:not(:first-of-type) {
+    border-left: 1px solid #dfe1e3;
+}
+.editor .floatingheader .mobile-tabs {
+    display: none;
+}
 
 /* Switch to 1 col editor on small screens */
 @media (max-width: 1000px) {
-    .editor .entry-markdown {
+    .editor .entry-markdown,
-        width: 100%;
-    }
     .editor .entry-preview {
+        width: 100%;
+        border-left: none;
+    }
+    /* We can't use display:none here as we want to keep widths/heights
+     * so that scrolling is kept in sync */
+    .editor .entry-markdown:not(.active),
+    .editor .entry-preview:not(.active) {
+        visibility: hidden;
+        position: absolute;
+        z-index: -1;
+        height: 100%;
+    }
+    .editor .floatingheader .mobile-tabs {
+        display: inline;
+    }
+    .editor .floatingheader .desktop-tabs {
         display: none;
     }
 }

ghost/admin/app/templates/editor/edit.hbs

@@ -1,7 +1,7 @@
 {{#gh-editor editorScrollInfo=editorScrollInfo as |ghEditor|}}
     <header class="view-header">
         {{#gh-view-title classNames="gh-editor-title" openMobileMenu="openMobileMenu"}}
-            {{gh-trim-focus-input type="text" id="entry-title" class="gh-input" placeholder="Your Post Title" value=model.titleScratch
+            {{gh-trim-focus-input type="text" id="entry-title"placeholder="Your Post Title" value=model.titleScratch
         tabindex="1" focus=shouldFocusTitle}}
         {{/gh-view-title}}
         <section class="view-actions">
@@ -22,9 +22,13 @@
     </header>
 
     <section class="view-container view-editor">
-        <section class="entry-markdown js-entry-markdown">
+        <section class="entry-markdown js-entry-markdown {{if ghEditor.markdownActive 'active'}}">
             <header class="floatingheader">
-                <span>Markdown</span>
+                <span class="desktop-tabs">Markdown</span>
+                <span class="mobile-tabs">
+                    <a href="#" {{action 'selectTab' 'markdown' target=ghEditor}} class="{{if ghEditor.markdownActive 'active'}}">Markdown</a>
+                    <a href="#" {{action 'selectTab' 'preview' target=ghEditor}} class="{{if ghEditor.previewActive 'active'}}">Preview</a>
+                </span>
                 <a class="markdown-help" href="" {{action "openModal" "markdown"}}><i class="icon-markdown"></i></a>
             </header>
             <section id="entry-markdown-content" class="entry-markdown-content">
@@ -32,10 +36,14 @@
             </section>
         </section>
 
-        <section class="entry-preview js-entry-preview">
+        <section class="entry-preview js-entry-preview {{if ghEditor.previewActive 'active'}}">
             <header class="floatingheader">
-                <span>Preview</span>
+                <span class="desktop-tabs">Preview</span>
-                <span class="entry-word-count js-entry-word-count">{{gh-count-words model.scratch}}</span>
+                <span class="mobile-tabs">
+                    <a href="#" {{action 'selectTab' 'markdown' target=ghEditor}} class="{{if ghEditor.markdownActive 'active'}}">Markdown</a>
+                    <a href="#" {{action 'selectTab' 'preview' target=ghEditor}} class="{{if ghEditor.previewActive 'active'}}">Preview</a>
+                </span>
+                <span class="entry-word-count">{{gh-count-words model.scratch}}</span>
             </header>
             <section class="entry-preview-content js-entry-preview-content">
                 {{gh-ed-preview classNames="rendered-markdown js-rendered-markdown"