Basic settings restructure

- created new central settings page and moved there all settings from the nav menu

ghost/admin/app/components/gh-nav-menu.hbs

@@ -32,7 +32,6 @@
             </li>
         </ul>
         <ul class="gh-nav-list gh-nav-manage">
-            <li class="gh-nav-list-h">Manage</li>
             <li class="gh-nav-list-new relative">
                 <GhLinkToCustomViewsIndex @route="posts" @query={{reset-query-params "posts"}} data-test-nav="posts">{{svg-jar "posts"}}Posts</GhLinkToCustomViewsIndex>
                 <LinkTo @route="editor.new" @model="post" @classNames="gh-secondary-action gh-nav-new-post" @alt="New post" @title="New post" data-test-nav="new-story"><span>{{svg-jar "add-stroke"}}</span></LinkTo>
@@ -85,16 +84,11 @@
         </ul>
         {{#if (gh-user-can-admin this.session.user)}}
             <ul class="gh-nav-list gh-nav-settings">
-                <li class="gh-nav-list-h">Settings</li>
-                <li><LinkTo @route="settings.general" data-test-nav="settings">{{svg-jar "settings"}}General</LinkTo></li>
-                <li><LinkTo @route="settings.design" data-test-nav="design">{{svg-jar "paintbrush"}}Design</LinkTo></li>
-                <li><LinkTo @route="settings.code-injection" data-test-nav="code-injection">{{svg-jar "brackets"}}Code injection</LinkTo></li>
-                <li><LinkTo @route="settings.integrations" @current-when={{this.isIntegrationRoute}} data-test-nav="integrations">{{svg-jar "modules"}}Integrations</LinkTo></li>
                 <li class="relative">
                     <button class="gh-secondary-action" title="Toggle Night shift" {{action (toggle "nightShift" this.feature)}}>
                         <span>{{svg-jar "nightshift"}}</span>
                     </button>
-                    <LinkTo @route="settings.labs" data-test-nav="labs">{{svg-jar "labs"}}Labs</LinkTo>
+                    <LinkTo @route="settings" @current-when={{this.isSettingsRoute}} data-test-nav="settings">{{svg-jar "settings"}}Settings</LinkTo>
                 </li>
                 {{#if this.showBilling}}
                     <li class="relative">

ghost/admin/app/router.js

@@ -52,6 +52,8 @@ Router.map(function () {
     this.route('tag.new', {path: '/tags/new'});
     this.route('tag', {path: '/tags/:tag_slug'});
 
+    this.route('settings');
+
     this.route('settings.general', {path: '/settings/general'});
     this.route('settings.labs', {path: '/settings/labs'});
     this.route('settings.labs.members', {path: '/settings/labs/members'});

ghost/admin/app/routes/settings.js

@@ -0,0 +1,4 @@
+import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
+
+export default class SettingsRoute extends AuthenticatedRoute {
+}

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

@@ -1,5 +1,57 @@
 /* Settings
 /* ---------------------------------------------------------- */
+.gh-settings-main-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    background: var(--white);
+    box-shadow: 0 0 1px rgba(0,0,0,.12), 0 1px 6px rgba(0,0,0,0.03), 0 6px 10px -8px rgba(0,0,0,.1);
+    border-radius: .5rem;;
+}
+
+.gh-settings-main-grid .gh-setting-group {
+    display: flex;
+    color: var(--darkgrey);
+    border-top: 1px solid var(--whitegrey);
+    border-left: 1px solid var(--whitegrey);
+    padding: 20px;
+}
+
+.gh-settings-main-grid .gh-setting-group:nth-child(3n-2) {
+    border-left: none;
+}
+
+.gh-settings-main-grid .gh-setting-group:nth-child(-n+3) {
+    border-top: none;
+}
+
+.gh-settings-main-grid .gh-setting-group svg {
+    margin-top: 3px;
+    flex-basis: 48px;
+    max-width: 28px;
+    width: 28px;
+    height: 28px;
+}
+
+.gh-settings-main-grid .gh-setting-group svg path {
+    fill: var(--midgrey);
+}
+
+.gh-settings-main-grid .gh-setting-group div {
+    margin-left: 14px;
+    flex-shrink: 1;
+}
+
+.gh-settings-main-grid .gh-setting-group h4 {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.gh-settings-main-grid .gh-setting-group p {
+    color: var(--midgrey);
+    margin: 0;
+    padding: 0;
+    line-height: 1.5em;
+}
 
 .gh-setting-header {
     margin: 4vw 0 5px 1px;

ghost/admin/app/templates/settings.hbs

@@ -0,0 +1,55 @@
+<section class="gh-canvas">
+    <GhCanvasHeader class="gh-canvas-header">
+        <h2 class="gh-canvas-title" data-test-screen-title>
+            Settings
+        </h2>
+    </GhCanvasHeader>
+
+    <section class="view-container">
+        {{!-- <div class="flex flex-column br3 shadow-1 bg-grouped-table pa5 mt2"> --}}
+        <div class="gh-settings-main-grid">
+            <LinkTo class="gh-setting-group" @route="settings.general" data-test-nav="settings">
+                {{svg-jar "page"}}
+                <div>
+                    <h4>General</h4>
+                    <p>Update basic publication details, and generic site metadata</p>
+                </div>
+            </LinkTo>
+            <LinkTo class="gh-setting-group" @route="settings.design" data-test-nav="design">
+                {{svg-jar "paintbrush"}}
+                <div>
+                    <h4>Design</h4>
+                    <p>Upload your site icon, logo and set accent color</p>
+                </div>
+            </LinkTo>
+            <LinkTo class="gh-setting-group" @route="settings.labs.members" data-test-nav="design">
+                {{svg-jar "members"}}
+                <div>
+                    <h4>Members</h4>
+                    <p>Connect to Stripe, customise Portal and set up membership details</p>
+                </div>
+            </LinkTo>
+            <LinkTo class="gh-setting-group" @route="settings.integrations" @current-when={{this.isIntegrationRoute}} data-test-nav="integrations">
+                {{svg-jar "modules"}}
+                <div>
+                    <h4>Integrations</h4>
+                    <p>Integrate third party apps and services with your Ghost site</p>
+                </div>
+            </LinkTo>
+            <LinkTo class="gh-setting-group" @route="settings.code-injection" data-test-nav="code-injection">
+                {{svg-jar "brackets"}}
+                <div>
+                    <h4>Code injection</h4>
+                    <p>Add code to the header or footer of your publication</p>
+                </div>
+            </LinkTo>
+            <LinkTo class="gh-setting-group"o @route="settings.labs" data-test-nav="labs">
+                {{svg-jar "labs"}}
+                <div>
+                    <h4>Labs</h4>
+                    <p>Testing ground for new or experimental features</p>
+                </div>
+            </LinkTo>
+        </div>
+    </section>
+</section>

ghost/admin/app/templates/settings/code-injection-loading.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             Code injection
         </h2>
         <section class="view-actions">

ghost/admin/app/templates/settings/code-injection.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             Code injection
         </h2>
         <section class="view-actions">

ghost/admin/app/templates/settings/design-loading.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             Design
         </h2>
         <section class="view-actions">

ghost/admin/app/templates/settings/design.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             Design
         </h2>
         <section class="view-actions">

ghost/admin/app/templates/settings/general-loading.hbs

@@ -1,7 +1,9 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
-            General settings
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
+            General
         </h2>
         <section class="view-actions">
             <GhTaskButton @buttonText="Save settings" @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" @disabled={{true}} data-test-save-button="true" />

ghost/admin/app/templates/settings/general.hbs

@@ -2,7 +2,9 @@
     <div>
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
-            General settings
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
+            General
         </h2>
         <section class="view-actions">
             <GhTaskButton @buttonText="Save settings" @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button="true" />

ghost/admin/app/templates/settings/integration-loading.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             Integrations
         </h2>
     </header>

ghost/admin/app/templates/settings/integration.hbs

@@ -2,6 +2,8 @@
     <form class="mb15" {{action (perform "save") on="submit"}}>
         <GhCanvasHeader class="gh-canvas-header">
             <h2 class="gh-canvas-title" data-test-screen-title>
+                <LinkTo @route="settings">Settings</LinkTo>
+                <span>{{svg-jar "arrow-right"}}</span>
                 <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
                 <span>{{svg-jar "arrow-right"}}</span>
                 {{this.integration.name}}

ghost/admin/app/templates/settings/integrations.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             Integrations
         </h2>
     </GhCanvasHeader>

ghost/admin/app/templates/settings/integrations/amp-loading.hbs

@@ -1,6 +1,10 @@
 <div class="gh-canvas">
     <header class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             <LinkTo @route="settings.integrations">Integrations</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             AMP

ghost/admin/app/templates/settings/integrations/amp.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             AMP

ghost/admin/app/templates/settings/integrations/firstpromoter.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             FirstPromoter

ghost/admin/app/templates/settings/integrations/slack-loading.hbs

@@ -1,6 +1,8 @@
 <div class="gh-canvas">
     <header class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             <LinkTo @route="settings.integrations">Integrations</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             Slack

ghost/admin/app/templates/settings/integrations/slack.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             Slack

ghost/admin/app/templates/settings/integrations/unsplash-loading.hbs

@@ -1,6 +1,8 @@
 <div class="gh-canvas">
     <header class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             <LinkTo @route="settings.integrations">Integrations</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             Unsplash

ghost/admin/app/templates/settings/integrations/unsplash.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             Unsplash

ghost/admin/app/templates/settings/integrations/zapier.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             Zapier

ghost/admin/app/templates/settings/labs-loading.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             Labs
         </h2>
     </header>

ghost/admin/app/templates/settings/labs.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             Labs
         </h2>
     </GhCanvasHeader>

ghost/admin/app/templates/settings/labs/members.hbs

@@ -1,6 +1,8 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings">Settings</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
             <LinkTo @route="settings.labs">Labs</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             Members