From 2331572978a1654902b91ff796999c9639e9c5e3 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Tue, 5 Aug 2014 12:51:39 +0300
Subject: [PATCH] Adding global app frame wrappers

This makes the new responsive styles work in a basic way. It'll probably need revisiting to break out the header area into a partial (maybe?)
---
 ghost/admin/templates/application.hbs |  9 +++-
 ghost/admin/templates/editor/edit.hbs | 50 +++++++++--------
 ghost/admin/templates/posts.hbs       | 77 +++++++++++++++------------
 ghost/admin/templates/settings.hbs    | 46 ++++++++++------
 4 files changed, 107 insertions(+), 75 deletions(-)

diff --git a/ghost/admin/templates/application.hbs b/ghost/admin/templates/application.hbs
index a9295d0c15..2ec653339c 100644
--- a/ghost/admin/templates/application.hbs
+++ b/ghost/admin/templates/application.hbs
@@ -1,11 +1,16 @@
+<div id="container">
+<a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
+
 {{#unless hideNav}}
     {{partial "navbar"}}
 {{/unless}}
 
-<main role="main" id="main" {{bind-attr data-notification-count=topNotificationCount}}>
+<main id="gh-main" class="viewport" role="main" {{bind-attr data-notification-count=topNotificationCount}}>
     {{gh-notifications location="top" notify="topNotificationChange"}}
     {{gh-notifications location="bottom"}}
-
     {{outlet}}
 </main>
+
 {{outlet modal}}
+
+</div>
\ No newline at end of file
diff --git a/ghost/admin/templates/editor/edit.hbs b/ghost/admin/templates/editor/edit.hbs
index d8420ef809..1f5be1b2bd 100644
--- a/ghost/admin/templates/editor/edit.hbs
+++ b/ghost/admin/templates/editor/edit.hbs
@@ -1,27 +1,35 @@
-<header>
-    <section class="box entry-title">
-        {{gh-trim-focus-input type="text" id="entry-title" placeholder="Your Post Title" value=titleScratch tabindex="1" focus=shouldFocusTitle}}
-    </section>
+<header class="page-header">
+    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
+    <h2>Editor</h2>
 </header>
 
-<section class="entry-markdown active">
-    <header class="floatingheader" id="entry-markdown-header">
-        <small>Markdown</small>
-        <a class="markdown-help" href="" {{action "openModal" "markdown"}}><span class="hidden">What is Markdown?</span></a>
+<div class="page-content">
+    <header>
+        <section class="box entry-title">
+            {{gh-trim-focus-input type="text" id="entry-title" placeholder="Your Post Title" value=titleScratch tabindex="1" focus=shouldFocusTitle}}
+        </section>
     </header>
-    <section id="entry-markdown-content" class="entry-markdown-content">
-        {{gh-codemirror value=scratch scrollInfo=view.markdownScrollInfo setCodeMirror="setCodeMirror"}}
-    </section>
-</section>
 
-<section class="entry-preview">
-    <header class="floatingheader" id="entry-preview-header">
-        <small>Preview <span class="entry-word-count js-entry-word-count">{{gh-count-words scratch}}</span></small>
-    </header>
-    <section class="entry-preview-content">
-        {{gh-markdown markdown=scratch scrollPosition=view.scrollPosition
-            uploadStarted="disableCodeMirror" uploadFinished="enableCodeMirror" uploadSuccess="handleImgUpload"}}
+    <section class="entry-markdown active">
+        <header class="floatingheader">
+            <small>Markdown</small>
+            <a class="markdown-help" href="" {{action "openModal" "markdown"}}><span class="hidden">What is Markdown?</span></a>
+        </header>
+        <section id="entry-markdown-content" class="entry-markdown-content">
+            {{gh-codemirror value=scratch scrollInfo=view.markdownScrollInfo setCodeMirror="setCodeMirror"}}
+        </section>
     </section>
-</section>
 
-{{partial "publish-bar"}}
+    <section class="entry-preview">
+        <header class="floatingheader" id="entry-preview-header">
+            <small>Preview <span class="entry-word-count js-entry-word-count">{{gh-count-words scratch}}</span></small>
+        </header>
+        <section class="entry-preview-content">
+            {{gh-markdown markdown=scratch scrollPosition=view.scrollPosition
+                uploadStarted="disableCodeMirror" uploadFinished="enableCodeMirror" uploadSuccess="handleImgUpload"}}
+        </section>
+    </section>
+
+    {{partial "publish-bar"}}
+
+</div>
diff --git a/ghost/admin/templates/posts.hbs b/ghost/admin/templates/posts.hbs
index 92778bb618..c2a5e28956 100644
--- a/ghost/admin/templates/posts.hbs
+++ b/ghost/admin/templates/posts.hbs
@@ -1,35 +1,42 @@
-<section class="content-list js-content-list">
-    <header class="floatingheader">
-        <section class="content-filter">
-            <small>All Posts</small>
-        </section>
-        {{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
-    </header>
-    {{#view "content-list-content-view" tagName="section"}}
-    <ol class="posts-list">
-        {{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
-        {{#link-to "posts.post" this class="permalink" title="Edit this post"}}
-        <h3 class="entry-title">{{title}}</h3>
-        <section class="entry-meta">
-            <span class="status">
-                {{#if isPublished}}
-                {{#if page}}
-                <span class="page">Page</span>
-                {{else}}
-                <time datetime="{{unbound published_at}}" class="date published">
-                    Published {{gh-format-timeago published_at}}
-                </time>
-                {{/if}}
-                {{else}}
-                <span class="draft">Draft</span>
-                {{/if}}
-            </span>
-        </section>
-        {{/link-to}}
-        {{/each}}
-    </ol>
-    {{/view}}
-</section>
-<section class="content-preview js-content-preview">
-    {{outlet}}
-</section>
+<header class="page-header">
+    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
+    <h2>Content</h2>
+</header>
+
+<div class="page-content">
+    <section class="content-list js-content-list">
+        <header class="floatingheader">
+            <section class="content-filter">
+                <small>All Posts</small>
+            </section>
+            {{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
+        </header>
+        {{#view "content-list-content-view" tagName="section"}}
+        <ol class="posts-list">
+            {{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
+            {{#link-to "posts.post" this class="permalink" title="Edit this post"}}
+            <h3 class="entry-title">{{title}}</h3>
+            <section class="entry-meta">
+                <span class="status">
+                    {{#if isPublished}}
+                    {{#if page}}
+                    <span class="page">Page</span>
+                    {{else}}
+                    <time datetime="{{unbound published_at}}" class="date published">
+                        Published {{gh-format-timeago published_at}}
+                    </time>
+                    {{/if}}
+                    {{else}}
+                    <span class="draft">Draft</span>
+                    {{/if}}
+                </span>
+            </section>
+            {{/link-to}}
+            {{/each}}
+        </ol>
+        {{/view}}
+    </section>
+    <section class="content-preview js-content-preview">
+        {{outlet}}
+    </section>
+</div>
\ No newline at end of file
diff --git a/ghost/admin/templates/settings.hbs b/ghost/admin/templates/settings.hbs
index f89dce24ff..af54a0e1e8 100644
--- a/ghost/admin/templates/settings.hbs
+++ b/ghost/admin/templates/settings.hbs
@@ -1,19 +1,31 @@
-<aside class="settings-sidebar" role="complementary">
-    <header>
-        <h1 class="title">Settings</h1>
-    </header>
-    <nav class="settings-menu">
-        <ul>
-            {{#unless session.user.isAuthor}}
-                {{#unless session.user.isEditor}}
-                    {{gh-activating-list-item route="settings.general" title="General" classNames="general"}}
+<header class="page-header">
+    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
+    <h2>Settings</h2>
+</header>
+
+<div class="page-content">
+    <aside class="settings-sidebar" role="complementary">
+        <header>
+            <h1 class="title">Settings</h1>
+        </header>
+        <nav class="settings-menu">
+            <ul>
+                {{#unless session.user.isAuthor}}
+                    {{#unless session.user.isEditor}}
+                        {{gh-activating-list-item route="settings.general" title="General" classNames="general"}}
+                    {{/unless}}
+
+                    {{gh-activating-list-item route="settings.users" title="Users" classNames="users"}}
+
+                    {{#if showApps}}
+                        {{#unless session.user.isEditor}}
+                            {{gh-activating-list-item route="settings.apps" title="Apps" classNames="apps"}}
+                        {{/unless}}
+                    {{/if}}
                 {{/unless}}
+            </ul>
+        </nav>
+    </aside>
 
-                {{gh-activating-list-item route="settings.users" title="Users" classNames="users"}}
-
-            {{/unless}}
-        </ul>
-    </nav>
-</aside>
-
-{{outlet}}
+    {{outlet}}
+</div>