Style updates to new app frame for all other screens

TryGhost · Feb 17, 2017 · 51cdd60 · 51cdd60
1 parent f7ac444
commit 51cdd60
Show file tree

Hide file tree

Showing 26 changed files with 96 additions and 144 deletions.
diff --git a/app/components/gh-nav-menu.js b/app/components/gh-nav-menu.js
@@ -10,8 +10,8 @@ export default Component.extend({
 
     open: false,
 
-    navMenuIcon: computed('ghostPaths.subdir', function () {
-        let url = `${this.get('ghostPaths.assetRoot')}/img/ghosticon.jpg`;
+    navMenuIcon: computed('config.blogUrl', function () {
+        let url = `${this.get('config.blogUrl')}/favicon.png`;
 
         return htmlSafe(`background-image: url(${url})`);
     }),

diff --git a/app/controllers/subscribers.js b/app/controllers/subscribers.js
@@ -48,7 +48,7 @@ export default Controller.extend(PaginationMixin, {
         let direction = this.get('direction');
 
         return [{
-            label: 'Subscriber',
+            label: 'Email address',
             valuePath: 'email',
             sorted: order === 'email',
             ascending: direction === 'asc',

diff --git a/app/html/apps.html b/app/html/apps.html
@@ -46,7 +46,7 @@
             <li><a id="ember799" class="ember-view gh-nav-settings-general" href="/ghost/settings/general/"><i class="icon-settings"></i>General</a></li>
             <li><a id="ember800" class="ember-view gh-nav-settings-navigation" href="/ghost/settings/navigation/"><i class="icon-compass"></i>Navigation</a></li>
             <li><a id="ember801" class="ember-view gh-nav-settings-tags" href="/ghost/settings/tags/"><i class="icon-tag"></i>Tags</a></li>
-            <li><a id="ember802" class="ember-view gh-nav-settings-code-injection" href="/ghost/settings/code-injection/"><i class="icon-code"></i>Code Injection</a></li>
+            <li><a id="ember802" class="ember-view gh-nav-settings-code-injection" href="/ghost/settings/code-injection/"><i class="icon-code"></i>Code injection</a></li>
             <li><a id="ember803" class="ember-view gh-nav-settings-labs" href="/ghost/settings/labs/"><i class="icon-labs"></i>Labs</a></li>
             <li><a id="ember804" class="ember-view gh-nav-settings-apps active" href="/ghost/settings/apps/"><i class="icon-apps"></i>Apps</a></li>
         </ul>

diff --git a/app/html/themes.html b/app/html/themes.html
@@ -46,7 +46,7 @@
             <li><a id="ember799" class="ember-view gh-nav-settings-general" href="/ghost/settings/general/"><i class="icon-settings"></i>General</a></li>
             <li><a id="ember800" class="ember-view gh-nav-settings-navigation" href="/ghost/settings/navigation/"><i class="icon-compass"></i>Navigation</a></li>
             <li><a id="ember801" class="ember-view gh-nav-settings-tags" href="/ghost/settings/tags/"><i class="icon-tag"></i>Tags</a></li>
-            <li><a id="ember802" class="ember-view gh-nav-settings-code-injection" href="/ghost/settings/code-injection/"><i class="icon-code"></i>Code Injection</a></li>
+            <li><a id="ember802" class="ember-view gh-nav-settings-code-injection" href="/ghost/settings/code-injection/"><i class="icon-code"></i>Code injection</a></li>
             <li><a id="ember803" class="ember-view gh-nav-settings-labs" href="/ghost/settings/labs/"><i class="icon-labs"></i>Labs</a></li>
             <li><a id="ember804" class="ember-view gh-nav-settings-apps active" href="/ghost/settings/apps/"><i class="icon-design"></i>Themes</a></li>
         </ul>

diff --git a/app/routes/settings/code-injection.js b/app/routes/settings/code-injection.js
@@ -3,7 +3,7 @@ import CurrentUserSettings from 'ghost-admin/mixins/current-user-settings';
 import styleBody from 'ghost-admin/mixins/style-body';
 
 export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, {
-    titleToken: 'Settings - Code Injection',
+    titleToken: 'Settings - Code injection',
     classNames: ['settings-view-code'],
 
     beforeModel() {

diff --git a/app/styles/components/dropdowns.css b/app/styles/components/dropdowns.css
@@ -42,6 +42,10 @@
     background: color(#dfe1e3 lightness(+5%));
 }
 
+.dropdown-menu li {
+    margin: 0;
+}
+
 .dropdown-menu > li > a,
 .dropdown-menu > li > button {
     display: flex;

diff --git a/app/styles/layouts/main.css b/app/styles/layouts/main.css
@@ -35,6 +35,7 @@ body > .ember-view:not(.liquid-target-container) {
     flex-grow: 1;
     display: flex;
     background: #fff;
+    overflow-y: auto;
 }
 
 /*  Flexbox fix. https://github.com/TryGhost/Ghost/issues/5804#issuecomment-141416812 */
@@ -210,35 +211,6 @@ body > .ember-view:not(.liquid-target-container) {
     color: var(--darkgrey);
 }
 
-.gh-nav-footer {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    height: 40px;
-    padding-bottom: 5px;
-    color: var(--midgrey);
-}
-
-.gh-nav-footer-sitelink {
-    flex-grow: 1;
-    padding: 12px;
-    color: color(var(--midgrey) lightness(-10%));
-    text-align: center;
-    text-transform: uppercase;
-    font-size: 1rem;
-    line-height: 1;
-    font-weight: 200;
-}
-
-.gh-nav-footer-sitelink i {
-    margin-left: 5px;
-    font-size: 1rem;
-}
-
-.gh-nav-footer-sitelink:hover {
-    color: var(--blue);
-}
-
 
 /* Mobile Nav
 /* ---------------------------------------------------------- */
@@ -324,14 +296,14 @@ body > .ember-view:not(.liquid-target-container) {
 /* ---------------------------------------------------------- */
 
 .gh-menu-toggle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 5px 10px;
-    width: 45px;
-    height: 27px;
-    border-right: #dfe1e3 1px solid;
-    line-height: 1;
+    display: block;
+    position: absolute;
+    top: 25px;
+    right: -8px;
+    height: 34px;
+    width: 25px;
+    border: color(var(--lightgrey) l(+4%)) 5px solid;
+    border-radius: 4px;
     cursor: pointer;
 }
 
@@ -370,7 +342,7 @@ body > .ember-view:not(.liquid-target-container) {
 
 .gh-nav.open .gh-autonav-toggle {
     transition: transform 0.15s;
-    transform: translate3d(-205px,0,0);
+    transform: translate3d(-240px,0,0);
 }
 
 @media (min-width: 801px) {
@@ -384,7 +356,7 @@ body > .ember-view:not(.liquid-target-container) {
         height: 100%;
         transition: transform 0.20s;
         /* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
-        transform: translate3d(-235px,0,0);
+        transform: translate3d(-240px,0,0);
     }
 
     /* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */
@@ -461,7 +433,6 @@ body > .ember-view:not(.liquid-target-container) {
     flex-grow: 1;
     padding: 2.9vw 4vw 3vw 4vw;
     margin: 0 auto;
-    overflow-y: auto;
     max-width: 1200px;
 }
 
@@ -470,6 +441,7 @@ body > .ember-view:not(.liquid-target-container) {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: 0 0 2vw 0;
 }
 
 .gh-canvas-title {

diff --git a/app/styles/layouts/settings.css b/app/styles/layouts/settings.css
@@ -13,7 +13,6 @@
     display: flex;
     align-items: center;
     margin-bottom: 10px;
-    padding: 0 20px;
 }
 
 .gh-blognav-item--error {
@@ -80,8 +79,7 @@
 }
 
 .gh-blognav-item:not(.gh-blognav-item--sortable) {
-    padding-left: calc(16px + 20px);
-    /* icon-grab + nav-item padding) */
+    padding-left: 16px;
 }
 
 /* Remove space between inputs on smaller screens */
@@ -104,7 +102,7 @@
 }
 
 
-/* Code Injection
+/* Code injection
 /* ---------------------------------------------------------- */
 
 .settings-code {

diff --git a/app/styles/layouts/subscribers.css b/app/styles/layouts/subscribers.css
@@ -13,14 +13,22 @@
 .subscribers-table {
     flex-grow: 1;
     overflow-y: auto;
-    padding: 0 12px; /* ember-light-table has 8px padding on cells */
     max-height: 100%;
 }
 
 .subscribers-table table {
     margin: 0;
 }
 
+.subscribers-table th {
+    padding: 8px 0;
+}
+
+.subscribers-table td {
+    padding: 0;
+    border-top: var(--lightgrey) 1px solid;
+}
+
 .subscribers-table table .gh-btn {
     visibility: hidden;
 }

diff --git a/app/styles/patterns/buttons.css b/app/styles/patterns/buttons.css
@@ -63,10 +63,10 @@ fieldset[disabled] .gh-btn {
 /* The background of the span is the main visual element */
 .gh-btn-blue span {
     background: linear-gradient(
-    color(var(--blue) whiteness(+7%)),
-    color(var(--blue) l(-7%) saturation(-10%)) 60%,
-    color(var(--blue) l(-7%) saturation(-10%)) 90%,
-    color(var(--blue) l(-4%) saturation(-10%))
+    color(var(--blue) whiteness(+5%)),
+    color(var(--blue) l(-5%) saturation(-8%)) 60%,
+    color(var(--blue) l(-5%) saturation(-8%)) 90%,
+    color(var(--blue) l(-3%) saturation(-8%))
     );
     box-shadow: 0 1px 0 inset rgba(255,255,255,0.1);
 }
@@ -376,6 +376,10 @@ Usage: CTA buttons grouped together horizontally.
     line-height: 1.5;
 }
 
+.gh-btn-link {
+    border: 0;
+}
+
 /* Spin Buttons!
 /* ---------------------------------------------------------- */
 .spinner {

diff --git a/app/templates/components/gh-menu-toggle.hbs b/app/templates/components/gh-menu-toggle.hbs
@@ -1 +0,0 @@
-<i class="{{iconClass}}" role="button"></i>

diff --git a/app/templates/components/gh-nav-menu.hbs b/app/templates/components/gh-nav-menu.hbs
@@ -1,3 +1,4 @@
+{{gh-menu-toggle desktopAction="toggleAutoNav" mobileAction="closeMobileMenu"}}
 {{#gh-dropdown-button tagName="header" class="gh-nav-menu" dropdownName="user-menu"}}
     <div class="gh-nav-menu-icon" style={{navMenuIcon}}></div>
     <div class="gh-nav-menu-details">
@@ -8,9 +9,16 @@
 {{/gh-dropdown-button}}
 {{#gh-dropdown tagName="div" name="user-menu" closeOnClick="true"}}
     <ul class="dropdown-menu dropdown-triangle-top js-user-menu-dropdown-menu" role="menu" style="right:-20px;left:auto;">
+        <li role="presentation"><a href="{{config.blogUrl}}/" target="_blank">View site</a></li>
         <li role="presentation">{{#link-to "about" classNames="gh-nav-menu-about dropdown-item js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-shop"></i> About Ghost{{/link-to}}</li>
         <li class="divider"></li>
         <li role="presentation">{{#link-to "team.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-user"></i> Your Profile{{/link-to}}</li>
+        <li role="presentation"><a class="dropdown-item help-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/" target="_blank"><i class="icon-ambulance"></i> Support Center</a></li>
+        <li role="presentation"><a class="dropdown-item help-menu-tweet" role="menuitem" tabindex="-1" href="https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&related=TryGhost" target="_blank" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"><i class="icon-twitter"></i> Tweet @TryGhost!</a></li>
+        <li class="divider"></li>
+        <li role="presentation"><a class="dropdown-item help-menu-how-to" role="menuitem" tabindex="-1" href="http://support.ghost.org/how-to-use-ghost/" target="_blank"><i class="icon-book"></i> How to Use Ghost</a></li>
+        <li role="presentation"><a class="dropdown-item help-menu-wishlist" role="menuitem" tabindex="-1" href="http://ideas.ghost.org/" target="_blank"><i class="icon-idea"></i> Wishlist</a></li>
+        <li class="divider"></li>
         <li role="presentation">{{#link-to "signout" classNames="dropdown-item user-menu-signout" role="menuitem" tabindex="-1"}}<i class="icon-signout"></i> Sign Out{{/link-to}}</li>
     </ul>
 {{/gh-dropdown}}
@@ -20,12 +28,12 @@
     </section>
     <ul class="gh-nav-list gh-nav-main">
         {{!<li><i class="icon-dash"></i>Dashboard</li>}}
-        <li>{{#link-to "editor.new" classNames="gh-nav-main-editor"}}<i class="icon-pen"></i>New Post{{/link-to}}</li>
+        <li>{{#link-to "editor.new" classNames="gh-nav-main-editor"}}<i class="icon-pen"></i>New story{{/link-to}}</li>
         {{!<li><a href="#"><i class="icon-user"></i>My Posts</a></li>}}
         <li>
             {{!-- clicking the Content link whilst on the content screen should reset the filter --}}
             {{#if (eq routing.currentRouteName "posts.index")}}
-                {{#link-to "posts" (query-params type=null) classNames="gh-nav-main-content active"}}<i class="icon-content"></i>Content{{/link-to}}
+                {{#link-to "posts" (query-params type=null) classNames="gh-nav-main-content active"}}<i class="icon-content"></i>Stories{{/link-to}}
             {{else}}
                 {{#link-to "posts" classNames="gh-nav-main-content"}}<i class="icon-content"></i>Content{{/link-to}}
             {{/if}}
@@ -45,32 +53,10 @@
             {{!<li><i class="icon-design"></i>Themes</li>}}
             <li>{{#link-to "settings.navigation" classNames="gh-nav-settings-navigation"}}<i class="icon-compass"></i>Navigation{{/link-to}}</li>
             <li>{{#link-to "settings.tags" classNames="gh-nav-settings-tags"}}<i class="icon-tag"></i>Tags{{/link-to}}</li>
-            <li>{{#link-to "settings.code-injection" classNames="gh-nav-settings-code-injection"}}<i class="icon-code"></i>Code Injection{{/link-to}}</li>
+            <li>{{#link-to "settings.code-injection" classNames="gh-nav-settings-code-injection"}}<i class="icon-code"></i>Code injection{{/link-to}}</li>
             <li>{{#link-to "settings.apps" classNames="gh-nav-settings-apps"}}<i class="icon-box"></i>Apps{{/link-to}}</li>
             <li>{{#link-to "settings.labs" classNames="gh-nav-settings-labs"}}<i class="icon-labs"></i>Labs{{/link-to}}</li>
         </ul>
     {{/if}}
 </section>
-<footer class="gh-nav-footer">
-    {{gh-menu-toggle desktopAction="toggleAutoNav" mobileAction="closeMobileMenu"}}
-    <a class="gh-nav-footer-sitelink" href="{{config.blogUrl}}/" target="_blank">View blog</a>
-    <div class="gh-help-menu">
-        {{#gh-dropdown-button dropdownName="help-menu" tagName="div"}}
-            <div class="gh-help-button">
-                <i class="icon-question"><span class="hidden">Help</span></i>
-            </div>
-        {{/gh-dropdown-button}}
-        {{#gh-dropdown tagName="div" name="help-menu" closeOnClick="true"}}
-            <ul class="dropdown-menu dropdown-triangle-bottom" role="menu">
-                <li role="presentation"><a class="dropdown-item help-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/" target="_blank"><i class="icon-ambulance"></i> Support Center</a></li>
-                <li role="presentation"><a class="dropdown-item help-menu-tweet" role="menuitem" tabindex="-1" href="https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&related=TryGhost" target="_blank" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"><i class="icon-twitter"></i> Tweet @TryGhost!</a></li>
-                <li class="divider"></li>
-                <li role="presentation"><a class="dropdown-item help-menu-how-to" role="menuitem" tabindex="-1" href="http://support.ghost.org/how-to-use-ghost/" target="_blank"><i class="icon-book"></i> How to Use Ghost</a></li>
-                <li role="presentation"><a class="dropdown-item help-menu-markdown" role="menuitem" tabindex="-1" href="" {{action "showMarkdownHelp"}}><i class="icon-markdown"></i> Markdown Help</a></li>
-                <li class="divider"></li>
-                <li role="presentation"><a class="dropdown-item help-menu-wishlist" role="menuitem" tabindex="-1" href="http://ideas.ghost.org/" target="_blank"><i class="icon-idea"></i> Wishlist</a></li>
-            </ul>
-        {{/gh-dropdown}}
-    </div>{{! .help-menu }}
-</footer>
 <div class="gh-autonav-toggle" {{action "openAutoNav" on="mouseEnter"}}></div>
diff --git a/app/templates/components/gh-subscribers-table-delete-cell.hbs b/app/templates/components/gh-subscribers-table-delete-cell.hbs
@@ -1 +1 @@
-<button class="gh-btn gh-btn-sm" {{action tableActions.delete row.content}}><span><i class="icon-trash"></i></span></button>
+<button class="gh-btn gh-btn-link gh-btn-sm" {{action tableActions.delete row.content}}><span><i class="icon-trash"></i></span></button>
diff --git a/app/templates/settings/code-injection-loading.hbs b/app/templates/settings/code-injection-loading.hbs
@@ -1,12 +1,12 @@
-<section class="gh-view">
-    <header class="view-header">
-        {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Code Injection</span>{{/gh-view-title}}
+<section class="gh-canvas">
+    <header class="gh-canvas-header">
+        <h2 class="gh-canvas-title">Code injection</h2>
         <section class="view-actions">
             {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}<span>Save</span>{{/gh-spin-button}}
         </section>
     </header>
 
-    <section class="view-content">
+    <section class="view-container">
         {{gh-loading-spinner}}
     </section>
 </section>
diff --git a/app/templates/settings/code-injection.hbs b/app/templates/settings/code-injection.hbs
@@ -1,12 +1,12 @@
-<section class="gh-view">
-    <header class="view-header">
-        {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Code Injection</span>{{/gh-view-title}}
+<section class="gh-canvas">
+    <header class="gh-canvas-header">
+        <h2 class="gh-canvas-title">Code injection</h2>
         <section class="view-actions">
             {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}<span>Save</span>{{/gh-spin-button}}
         </section>
     </header>
 
-    <section class="view-content">
+    <section class="view-continer">
         <form id="settings-code" novalidate="novalidate">
             <fieldset>
                 <p>

diff --git a/app/templates/settings/general-loading.hbs b/app/templates/settings/general-loading.hbs
@@ -1,12 +1,12 @@
-<section class="gh-view">
-    <header class="view-header">
-        {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>General</span>{{/gh-view-title}}
+<section class="gh-canvas">
+    <header class="gh-canvas-header">
+        <h2 class="gh-canvas-title">General</h2>
         <section class="view-actions">
             {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}<span>Save</span>{{/gh-spin-button}}
         </section>
     </header>
 
-    <section class="view-content">
+    <section class="view-container">
         {{gh-loading-spinner}}
     </section>
 </section>
diff --git a/app/templates/settings/general.hbs b/app/templates/settings/general.hbs
@@ -1,12 +1,12 @@
-<section class="gh-view">
-    <header class="view-header">
-        {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>General</span>{{/gh-view-title}}
+<section class="gh-canvas">
+    <header class="gh-canvas-header">
+        <h2 class="gh-canvas-title">General</h2>
         <section class="view-actions">
             {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}<span>Save</span>{{/gh-spin-button}}
         </section>
     </header>
 
-    <section class="view-content">
+    <section class="view-container">
         <form id="settings-general" novalidate="novalidate">
             <fieldset>
 

diff --git a/app/templates/settings/labs-loading.hbs b/app/templates/settings/labs-loading.hbs
@@ -1,9 +1,9 @@
-<section class="gh-view">
-    <header class="view-header">
-        {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Labs</span>{{/gh-view-title}}
+<section class="gh-canvas">
+    <header class="gh-canvas-header">
+        <h2 class="gh-canvas-title">Labs</h2>
     </header>
 
-    <div class="view-content">
+    <div class="view-container">
         {{gh-loading-spinner}}
     </div>
-</section>
+</section>