Mobile view menu for content screen

closes #4031 - Adds css to show back button, edit button in header nav on mobile
TryGhost · Sep 18, 2014 · 8575e8d · 8575e8d
1 parent c38c0cd
commit 8575e8d
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 4 deletions.
diff --git a/core/client/assets/sass/layouts/content.scss b/core/client/assets/sass/layouts/content.scss
@@ -235,8 +235,66 @@
         width:100%;
         height:auto;
     }
+} // .content-preview
 
-} // .preview-post
+.post-preview-header {
+    .page-title, .btn-back {
+        display: none;
+    }
+
+    @media (max-width: 900px) {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        z-index: 3000;
+        height: 44px;
+        text-align: center;
+        color: #fff;
+        background: #242628;
+        overflow: hidden;
+
+        .btn-back {
+            display: block;
+            position: absolute;
+            top: 4px;
+            left: 4px;
+            color: #fff;
+            background-color: transparent;
+        }
+
+        .page-title {
+            display: block;
+        }
+
+        .post-controls {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+        }
+
+
+        .post-edit {
+            color: #fff;
+            background-color: transparent;
+        }
+
+        .featured, .unfeatured, small {
+            display: none;
+        } // @media (max-width: 900px)
+    }
+
+    @media (min-width: 901px) {
+        .unfeatured, .featured {
+            float: left;
+        }
+        .post-published-by {
+            float: left;
+            margin-top: 7px;
+            margin-left: 3px;
+        }
+    }
+} // .post-preview-header
 
 .no-posts-box {
     position: relative;

diff --git a/core/client/templates/posts/post.hbs b/core/client/templates/posts/post.hbs
@@ -1,9 +1,10 @@
-<header class="post-preview-header">
+<header class="post-preview-header clearfix">
     {{#link-to "posts" tagName="button" class="btn btn-default btn-back"}}Back{{/link-to}}
+    <h2 class="page-title">Preview</h2>
     <button type="button" {{bind-attr class="featured:featured:unfeatured"}} title="Feature this post" {{action "toggleFeatured"}}>
         <span class="hidden">Star</span>
     </button>
-    <small>
+    <small class="post-published-by">
         <span class="status">{{#if isPublished}}Published{{else}}Written{{/if}}</span>
         <span class="normal">by</span>
         <span class="author">{{#if author.name}}{{author.name}}{{else}}{{author.email}}{{/if}}</span>

diff --git a/core/client/templates/settings/apps.hbs b/core/client/templates/settings/apps.hbs
@@ -1,4 +1,4 @@
-<header>
+<header class="settings-view-header">
     {{#link-to 'settings' class='btn btn-default'}}Back{{/link-to}}
     <h2 class="title">Apps</h2>
 </header>