🎨 team + apps header consistency (#716)

refs TryGhost/Ghost#8464 - fix padding on user actions button - match user screen heading to other screens - match app screen headers to other screens, update form styles - change header link colour to match non-link colour - fix team acceptance test - fix canvas top padding so header elements always align - reduce header font size
TryGhost · May 30, 2017 · f5227fc · f5227fc
1 parent efb66b1
commit f5227fc
Show file tree

Hide file tree

Showing 22 changed files with 313 additions and 277 deletions.
diff --git a/app/styles/layouts/main.css b/app/styles/layouts/main.css
@@ -481,7 +481,7 @@ body > .ember-view:not(.default-liquid-destination) {
 
 .gh-canvas {
     flex-grow: 1;
-    padding: 2.9vw 4vw 3vw 4vw;
+    padding: 24px 4vw 3vw 4vw;
     margin: 0 auto;
     max-width: 1200px;
 }
@@ -502,10 +502,27 @@ body > .ember-view:not(.default-liquid-destination) {
     padding: 0;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 3.4rem;
+    font-size: 2.9rem;
     line-height: 1.2em;
     font-weight: 700;
     letter-spacing: 0.4px;
+    /* match button height to avoid jump on navigation between screens*/
+    min-height: 35px;
+}
+
+.gh-canvas-title a {
+    color: var(--darkgrey);
+}
+
+.gh-canvas-title span {
+    display: inline-block;
+    height: 100%;
+    vertical-align: baseline;
+}
+
+.gh-canvas-title svg {
+    height: 0.6em;
+    margin: 0 10px;
 }
 
 .view-header {

diff --git a/app/styles/layouts/user.css b/app/styles/layouts/user.css
@@ -6,8 +6,7 @@
 /* ---------------------------------------------------------- */
 
 .user-actions-cog {
-    margin-right: 10px;
-    padding: 9px 11px;
+    margin-right: 10px
 }
 
 .user-actions-cog svg {

diff --git a/app/templates/posts-loading.hbs b/app/templates/posts-loading.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Your stories</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Your stories</h2>
         <section class="view-actions">
             {{#link-to "editor.new" class="gh-btn gh-btn-green" data-test-new-post-button=true}}<span>New story</span>{{/link-to}}
         </section>

diff --git a/app/templates/posts.hbs b/app/templates/posts.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Your stories</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Your stories</h2>
         <section class="view-actions">
             {{#link-to "editor.new" class="gh-btn gh-btn-green" data-test-new-post-button=true}}<span>New story</span>{{/link-to}}
         </section>

diff --git a/app/templates/settings/apps.hbs b/app/templates/settings/apps.hbs
@@ -1,3 +1 @@
-<section class="gh-canvas">
-    {{outlet}}
-</section>
+{{outlet}}
diff --git a/app/templates/settings/apps/amp.hbs b/app/templates/settings/apps/amp.hbs
@@ -1,11 +1,17 @@
-<header class="view-header">
-    {{#gh-view-title openMobileMenu="openMobileMenu"}}<span style="padding-left:1px">{{#link-to "settings.apps.index"}}Apps{{/link-to}} {{inline-svg "arrow-right"}} AMP</span>{{/gh-view-title}}
-    <section class="view-actions">
-        {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button=true}}
-    </section>
-</header>
-<section class="view-container">
-    <section class="view-content">
+<section class="gh-canvas">
+    <header class="gh-canvas-header">
+        <h2 class="gh-canvas-title" data-test-screen-title>
+            {{#link-to "settings.apps.index"}}Apps{{/link-to}}
+            <span>{{inline-svg "arrow-right"}}</span>
+            AMP
+        </h2>
+        <section class="view-actions">
+            {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button=true}}
+        </section>
+    </header>
+
+    <section class="view-container">
+        <br>
         <section class="app-grid">
             <div class="app-cell">
                 <img class="app-icon" src="assets/img/ampicon.png" />
@@ -15,19 +21,21 @@
                 <p>Accelerated Mobile Pages</p>
             </div>
         </section>
-        <section class="app-subtitle">
-            <p>Enable <a href="https://ampproject.org">Google Accelerated Mobile Pages </a>for your site?</p>
-        </section>
-        <form class="app-config-form" id="amp-settings" novalidate="novalidate">
-            <div class="form-group for-checkbox">
-                <label for="amp">AMP support for your publications</label>
-                <label class="checkbox" for="amp">
-                    {{one-way-checkbox model id="amp" name="amp" type="checkbox" update=(action "update") data-test-amp-checkbox=true}}
-                    <span class="input-toggle-component"></span>
-                    <p>Enable AMP support</p>
-                </label>
-            </div>
-        </form>
 
+        <div class="gh-setting-header">AMP configuration</div>
+        <div class="gh-setting">
+            <div class="gh-setting-content">
+                <div class="gh-setting-title">Enable AMP</div>
+                <div class="gh-setting-desc">Enable <a href="https://ampproject.org" target="_blank">Google Accelerated Mobile Pages</a> for your posts</div>
+            </div>
+            <div class="gh-setting-action">
+                <div class="for-checkbox">
+                    <label for="amp" class="checkbox">
+                        {{one-way-checkbox model id="amp" name="amp" type="checkbox" update=(action "update") data-test-amp-checkbox=true}}
+                        <span class="input-toggle-component"></span>
+                    </label>
+                </div>
+            </div>
+        </div>
     </section>
 </section>
diff --git a/app/templates/settings/apps/index.hbs b/app/templates/settings/apps/index.hbs
@@ -1,57 +1,59 @@
-<header class="gh-canvas-header">
-    <h2 class="gh-canvas-title">Apps</h2>
-</header>
+<section class="gh-canvas">
+    <header class="gh-canvas-header">
+        <h2 class="gh-canvas-title" data-test-screen-title>Apps</h2>
+    </header>
 
-<section class="apps-grid-container">
-    <span class="apps-grid-title">Available integrations</span>
-    <div class="apps-grid">
-        <div class="apps-grid-cell">
-            {{#link-to "settings.apps.slack" id="slack-link"}}
-            <article class="apps-card-app">
-                <div class="apps-card-left">
-                    <figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png)"></figure>
-                    <div class="apps-card-meta">
-                        <h3 class="apps-card-app-title">Slack</h3>
-                        <p class="apps-card-app-desc">A team communication tool</p>
+    <section class="apps-grid-container">
+        <span class="apps-grid-title">Available integrations</span>
+        <div class="apps-grid">
+            <div class="apps-grid-cell">
+                {{#link-to "settings.apps.slack" id="slack-link"}}
+                <article class="apps-card-app">
+                    <div class="apps-card-left">
+                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png)"></figure>
+                        <div class="apps-card-meta">
+                            <h3 class="apps-card-app-title">Slack</h3>
+                            <p class="apps-card-app-desc">A team communication tool</p>
+                        </div>
                     </div>
-                </div>
-                <div class="gh-card-right">
-                    <div class="apps-configured">
-                        {{#if slack.isActive}}
-                            <span class="green">Active</span>
-                        {{else}}
-                            <span>Configure</span>
-                        {{/if}}
-                        {{inline-svg "arrow-right"}}
+                    <div class="gh-card-right">
+                        <div class="apps-configured">
+                            {{#if slack.isActive}}
+                                <span class="green">Active</span>
+                            {{else}}
+                                <span>Configure</span>
+                            {{/if}}
+                            {{inline-svg "arrow-right"}}
+                        </div>
                     </div>
-                </div>
-            </article>
-            {{/link-to}}
-        </div>
+                </article>
+                {{/link-to}}
+            </div>
 
-        <div class="apps-grid-cell">
-            {{#link-to "settings.apps.amp" id="amp-link"}}
-            <article class="apps-card-app">
-                <div class="apps-card-left">
-                    <figure class="apps-card-app-icon" style="background-image:url(assets/img/ampicon.png)"></figure>
-                    <div class="apps-card-meta">
-                        <h3 class="apps-card-app-title">AMP</h3>
-                        <p class="apps-card-app-desc">Google Accelerated Mobile Pages</p>
+            <div class="apps-grid-cell">
+                {{#link-to "settings.apps.amp" id="amp-link"}}
+                <article class="apps-card-app">
+                    <div class="apps-card-left">
+                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/ampicon.png)"></figure>
+                        <div class="apps-card-meta">
+                            <h3 class="apps-card-app-title">AMP</h3>
+                            <p class="apps-card-app-desc">Google Accelerated Mobile Pages</p>
+                        </div>
                     </div>
-                </div>
-                <div class="gh-card-right">
-                    <div class="apps-configured">
-                        {{#if amp}}
-                            <span class="green">Active</span>
-                        {{else}}
-                            <span>Configure</span>
-                        {{/if}}
-                        {{inline-svg "arrow-right"}}
+                    <div class="gh-card-right">
+                        <div class="apps-configured">
+                            {{#if amp}}
+                                <span class="green">Active</span>
+                            {{else}}
+                                <span>Configure</span>
+                            {{/if}}
+                            {{inline-svg "arrow-right"}}
+                        </div>
                     </div>
-                </div>
-            </article>
-            {{/link-to}}
+                </article>
+                {{/link-to}}
+            </div>
         </div>
-    </div>
-    <p class="apps-grid-note">(More coming soon!)</p>
+        <p class="apps-grid-note">(More coming soon!)</p>
+    </section>
 </section>
diff --git a/app/templates/settings/apps/slack.hbs b/app/templates/settings/apps/slack.hbs
@@ -1,11 +1,17 @@
-<header class="view-header">
-    {{#gh-view-title openMobileMenu="openMobileMenu"}}<span style="padding-left:1px">{{#link-to "settings.apps.index"}}Apps{{/link-to}} {{inline-svg "arrow-right"}} Slack</span>{{/gh-view-title}}
-    <section class="view-actions">
-        {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button=true}}
-    </section>
-</header>
-<section class="view-container">
-    <section class="view-content">
+<section class="gh-canvas">
+    <header class="gh-canvas-header">
+        <h2 class="gh-canvas-title" data-test-screen-title>
+            {{#link-to "settings.apps.index"}}Apps{{/link-to}}
+            <span>{{inline-svg "arrow-right"}}</span>
+            Slack
+        </h2>
+        <section class="view-actions">
+            {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button=true}}
+        </section>
+    </header>
+
+    <section class="view-container">
+        <br>
         <section class="app-grid">
             <div class="app-cell">
                 <img class="app-icon" src="assets/img/slackicon.png" />
@@ -15,23 +21,27 @@
                 <p>A messaging app for teams</p>
             </div>
         </section>
-        <section class="app-subtitle">
-            <p>Automatically send newly published posts to a channel in Slack.</p>
-        </section>
 
         <form class="app-config-form" id="slack-settings" novalidate="novalidate" {{action "save" on="submit"}}>
-            {{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="url"}}
-                <label for="url">Webhook URL</label>
-                {{gh-input model.url name="slack[url]" update=(action "updateURL") onenter=(action "save") placeholder="https://hooks.slack.com/services/..." data-test-slack-url-input=true}}
-                {{#unless model.errors.url}}
-                    <p>Set up a new incoming webhook <a href="https://my.slack.com/apps/new/A0F7XDUAZ-incoming-webhooks" target="_blank">here</a>, and grab the URL.</p>
-                {{else}}
-                    {{gh-error-message errors=model.errors property="url"}}
-                {{/unless}}
-            {{/gh-form-group}}
+            <div class="gh-setting-header">Slack configuration</div>
+            <div class="gh-setting">
+                <div class="gh-setting-content">
+                    <div class="gh-setting-title">Webhook URL</div>
+                    <div class="gh-setting-desc">Automatically send newly published posts to a channel in Slack</div>
+                    <div class="gh-setting-content-extended">
+                        {{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="url"}}
+                            {{gh-input model.url name="slack[url]" update=(action "updateURL") onenter=(action "save") placeholder="https://hooks.slack.com/services/..." data-test-slack-url-input=true}}
+                            {{#unless model.errors.url}}
+                                <p>Set up a new incoming webhook <a href="https://my.slack.com/apps/new/A0F7XDUAZ-incoming-webhooks" target="_blank">here</a>, and grab the URL.</p>
+                            {{else}}
+                                {{gh-error-message errors=model.errors property="url"}}
+                            {{/unless}}
+                        {{/gh-form-group}}
+                    </div>
+                </div>
+            </div>
         </form>
 
         {{gh-task-button "Send Test Notification" task=sendTestNotification successText="Sent" class="gh-btn gh-btn-grey gh-btn-icon" disabled=testNotificationDisabled data-test-send-notification-button=true}}
-
     </section>
 </section>
diff --git a/app/templates/settings/code-injection-loading.hbs b/app/templates/settings/code-injection-loading.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Code injection</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Code injection</h2>
         <section class="view-actions">
             {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" disabled=true data-test-save-button=true}}
         </section>

diff --git a/app/templates/settings/code-injection.hbs b/app/templates/settings/code-injection.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Code injection</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Code injection</h2>
         <section class="view-actions">
             {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button=true}}
         </section>

diff --git a/app/templates/settings/design-loading.hbs b/app/templates/settings/design-loading.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Design</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Design</h2>
         <section class="view-actions">
             {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" disabled=true}}
         </section>

diff --git a/app/templates/settings/design.hbs b/app/templates/settings/design.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Design</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Design</h2>
         <section class="view-actions">
             {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button=true}}
         </section>

diff --git a/app/templates/settings/general-loading.hbs b/app/templates/settings/general-loading.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">General</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>General</h2>
         <section class="view-actions">
             {{gh-task-button "Save settings" task=save class="gh-btn gh-btn-blue gh-btn-icon" disabled=true data-test-save-button=true}}
         </section>

diff --git a/app/templates/settings/general.hbs b/app/templates/settings/general.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">General</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>General</h2>
         <section class="view-actions">
             {{gh-task-button "Save settings" task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button=true}}
         </section>

diff --git a/app/templates/settings/labs-loading.hbs b/app/templates/settings/labs-loading.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Labs</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Labs</h2>
     </header>
 
     <div class="view-container">

diff --git a/app/templates/settings/labs.hbs b/app/templates/settings/labs.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Labs</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Labs</h2>
     </header>
 
     <section class="view-container settings-debug">

diff --git a/app/templates/subscribers.hbs b/app/templates/subscribers.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Subscribers <span style="font-weight:200;margin-left:10px;display:inline-block;" data-test-total-subscribers> ({{total}})</span></h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Subscribers <span style="font-weight:200;margin-left:10px;display:inline-block;" data-test-total-subscribers> ({{total}})</span></h2>
         <div class="view-actions">
             {{#link-to "subscribers.import" class="gh-btn gh-btn-hover-green"}}<span>Import CSV</span>{{/link-to}}
             <a {{action 'exportData'}} class="gh-btn"><span>Export CSV</span></a>

diff --git a/app/templates/team/index-loading.hbs b/app/templates/team/index-loading.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Team members</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Team members</h2>
         {{!-- Do not show Invite user button to authors --}}
         {{#unless session.user.isAuthor}}
             <section class="view-actions">

diff --git a/app/templates/team/index.hbs b/app/templates/team/index.hbs
@@ -1,6 +1,6 @@
 <section class="gh-canvas">
     <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title">Team members</h2>
+        <h2 class="gh-canvas-title" data-test-screen-title>Team members</h2>
         {{!-- Do not show Invite user button to authors --}}
         {{#unless session.user.isAuthor}}
             <section class="view-actions">