From 38315ffab149a9c9681c489870b98e13c4b0cf38 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Fri, 17 Feb 2017 12:50:07 +0700 Subject: [PATCH] Style updates to new app frame for all other screens --- ghost/admin/app/components/gh-nav-menu.js | 4 +- ghost/admin/app/controllers/subscribers.js | 2 +- ghost/admin/app/html/apps.html | 2 +- ghost/admin/app/html/themes.html | 2 +- .../app/routes/settings/code-injection.js | 2 +- .../admin/app/styles/components/dropdowns.css | 4 ++ ghost/admin/app/styles/layouts/main.css | 52 +++++-------------- ghost/admin/app/styles/layouts/settings.css | 6 +-- .../admin/app/styles/layouts/subscribers.css | 10 +++- ghost/admin/app/styles/patterns/buttons.css | 12 +++-- .../templates/components/gh-menu-toggle.hbs | 1 - .../app/templates/components/gh-nav-menu.hbs | 36 ++++--------- .../gh-subscribers-table-delete-cell.hbs | 2 +- .../settings/code-injection-loading.hbs | 8 +-- .../app/templates/settings/code-injection.hbs | 8 +-- .../templates/settings/general-loading.hbs | 8 +-- .../admin/app/templates/settings/general.hbs | 8 +-- .../app/templates/settings/labs-loading.hbs | 10 ++-- ghost/admin/app/templates/settings/labs.hbs | 8 +-- .../templates/settings/navigation-loading.hbs | 8 +-- .../app/templates/settings/navigation.hbs | 6 +-- ghost/admin/app/templates/subscribers.hbs | 30 ++--------- ghost/admin/app/templates/subscribers/new.hbs | 3 +- .../app/templates/team/index-loading.hbs | 4 +- ghost/admin/app/templates/team/index.hbs | 2 +- .../settings/code-injection-test.js | 2 +- 26 files changed, 96 insertions(+), 144 deletions(-) diff --git a/ghost/admin/app/components/gh-nav-menu.js b/ghost/admin/app/components/gh-nav-menu.js index 2dd160a1a0..37da9124d8 100644 --- a/ghost/admin/app/components/gh-nav-menu.js +++ b/ghost/admin/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/ghost/admin/app/controllers/subscribers.js b/ghost/admin/app/controllers/subscribers.js index 5d4a2b4437..b74fe14f4e 100644 --- a/ghost/admin/app/controllers/subscribers.js +++ b/ghost/admin/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/ghost/admin/app/html/apps.html b/ghost/admin/app/html/apps.html index ec8783bdd8..1480ee12b5 100644 --- a/ghost/admin/app/html/apps.html +++ b/ghost/admin/app/html/apps.html @@ -46,7 +46,7 @@
  • General
  • Navigation
  • Tags
    • -
  • Code Injection
    • +
  • Code injection
  • Labs
  • Apps
    • diff --git a/ghost/admin/app/html/themes.html b/ghost/admin/app/html/themes.html index b696c1c381..cb46435750 100644 --- a/ghost/admin/app/html/themes.html +++ b/ghost/admin/app/html/themes.html @@ -46,7 +46,7 @@
  • General
  • Navigation
  • Tags
    • -
  • Code Injection
    • +
  • Code injection
  • Labs
  • Themes
    • diff --git a/ghost/admin/app/routes/settings/code-injection.js b/ghost/admin/app/routes/settings/code-injection.js index 0bd44e695a..cd0c62d6fb 100644 --- a/ghost/admin/app/routes/settings/code-injection.js +++ b/ghost/admin/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/ghost/admin/app/styles/components/dropdowns.css b/ghost/admin/app/styles/components/dropdowns.css index 79ea0151f2..512f44a4c4 100644 --- a/ghost/admin/app/styles/components/dropdowns.css +++ b/ghost/admin/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/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index c8a742742e..f09087d159 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/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/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css index 02c4202f8c..d758ca41a2 100644 --- a/ghost/admin/app/styles/layouts/settings.css +++ b/ghost/admin/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/ghost/admin/app/styles/layouts/subscribers.css b/ghost/admin/app/styles/layouts/subscribers.css index b382afa7fa..7c1a01103f 100644 --- a/ghost/admin/app/styles/layouts/subscribers.css +++ b/ghost/admin/app/styles/layouts/subscribers.css @@ -13,7 +13,6 @@ .subscribers-table { flex-grow: 1; overflow-y: auto; - padding: 0 12px; /* ember-light-table has 8px padding on cells */ max-height: 100%; } @@ -21,6 +20,15 @@ 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/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index c7bf4eeb73..e04bc29247 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/ghost/admin/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/ghost/admin/app/templates/components/gh-menu-toggle.hbs b/ghost/admin/app/templates/components/gh-menu-toggle.hbs index dae2476648..e69de29bb2 100644 --- a/ghost/admin/app/templates/components/gh-menu-toggle.hbs +++ b/ghost/admin/app/templates/components/gh-menu-toggle.hbs @@ -1 +0,0 @@ - diff --git a/ghost/admin/app/templates/components/gh-nav-menu.hbs b/ghost/admin/app/templates/components/gh-nav-menu.hbs index 0f200340c8..9cddfd837f 100644 --- a/ghost/admin/app/templates/components/gh-nav-menu.hbs +++ b/ghost/admin/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"}}
    @@ -8,9 +9,16 @@ {{/gh-dropdown-button}} {{#gh-dropdown tagName="div" name="user-menu" closeOnClick="true"}} {{/gh-dropdown}} @@ -20,12 +28,12 @@ {{/if}} -
    diff --git a/ghost/admin/app/templates/components/gh-subscribers-table-delete-cell.hbs b/ghost/admin/app/templates/components/gh-subscribers-table-delete-cell.hbs index 301bd63874..2ee9dba546 100644 --- a/ghost/admin/app/templates/components/gh-subscribers-table-delete-cell.hbs +++ b/ghost/admin/app/templates/components/gh-subscribers-table-delete-cell.hbs @@ -1 +1 @@ - + diff --git a/ghost/admin/app/templates/settings/code-injection-loading.hbs b/ghost/admin/app/templates/settings/code-injection-loading.hbs index 45c5d48a30..b04987d870 100644 --- a/ghost/admin/app/templates/settings/code-injection-loading.hbs +++ b/ghost/admin/app/templates/settings/code-injection-loading.hbs @@ -1,12 +1,12 @@ -
    -
    - {{#gh-view-title openMobileMenu="openMobileMenu"}}Code Injection{{/gh-view-title}} +
    +
    +

    Code injection

    {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}}
    -
    +
    {{gh-loading-spinner}}
    diff --git a/ghost/admin/app/templates/settings/code-injection.hbs b/ghost/admin/app/templates/settings/code-injection.hbs index f1684a25c8..0b1f99f6a6 100644 --- a/ghost/admin/app/templates/settings/code-injection.hbs +++ b/ghost/admin/app/templates/settings/code-injection.hbs @@ -1,12 +1,12 @@ -
    -
    - {{#gh-view-title openMobileMenu="openMobileMenu"}}Code Injection{{/gh-view-title}} +
    +
    +

    Code injection

    {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}}
    -
    +

    diff --git a/ghost/admin/app/templates/settings/general-loading.hbs b/ghost/admin/app/templates/settings/general-loading.hbs index c468b17168..00892ce67e 100644 --- a/ghost/admin/app/templates/settings/general-loading.hbs +++ b/ghost/admin/app/templates/settings/general-loading.hbs @@ -1,12 +1,12 @@ -

    -
    - {{#gh-view-title openMobileMenu="openMobileMenu"}}General{{/gh-view-title}} +
    +
    +

    General

    {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}}
    -
    +
    {{gh-loading-spinner}}
    diff --git a/ghost/admin/app/templates/settings/general.hbs b/ghost/admin/app/templates/settings/general.hbs index 52bb185517..cf45373cf9 100644 --- a/ghost/admin/app/templates/settings/general.hbs +++ b/ghost/admin/app/templates/settings/general.hbs @@ -1,12 +1,12 @@ -
    -
    - {{#gh-view-title openMobileMenu="openMobileMenu"}}General{{/gh-view-title}} +
    +
    +

    General

    {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}}
    -
    +
    diff --git a/ghost/admin/app/templates/settings/labs-loading.hbs b/ghost/admin/app/templates/settings/labs-loading.hbs index 00fab7ec86..a5e441408b 100644 --- a/ghost/admin/app/templates/settings/labs-loading.hbs +++ b/ghost/admin/app/templates/settings/labs-loading.hbs @@ -1,9 +1,9 @@ -
    -
    - {{#gh-view-title openMobileMenu="openMobileMenu"}}Labs{{/gh-view-title}} +
    +
    +

    Labs

    -
    +
    {{gh-loading-spinner}}
    -
    \ No newline at end of file +
    diff --git a/ghost/admin/app/templates/settings/labs.hbs b/ghost/admin/app/templates/settings/labs.hbs index c2739ce11e..413f72e62d 100644 --- a/ghost/admin/app/templates/settings/labs.hbs +++ b/ghost/admin/app/templates/settings/labs.hbs @@ -1,9 +1,9 @@ -
    -
    - {{#gh-view-title openMobileMenu="openMobileMenu"}}Labs{{/gh-view-title}} +
    +
    +

    Labs

    -
    +

    Important note: Labs is a testing ground for experimental features which aren't quite ready for primetime. They may change, break or inexplicably disappear at any time.

    diff --git a/ghost/admin/app/templates/settings/navigation-loading.hbs b/ghost/admin/app/templates/settings/navigation-loading.hbs index f34352cbd7..9a9d548b2b 100644 --- a/ghost/admin/app/templates/settings/navigation-loading.hbs +++ b/ghost/admin/app/templates/settings/navigation-loading.hbs @@ -1,12 +1,12 @@ -
    -
    - {{#gh-view-title openMobileMenu="openMobileMenu"}}Navigation{{/gh-view-title}} +
    +
    +

    Navigation

    {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}}
    -
    +
    {{gh-loading-spinner}}
    diff --git a/ghost/admin/app/templates/settings/navigation.hbs b/ghost/admin/app/templates/settings/navigation.hbs index 3b021814d1..7512474799 100644 --- a/ghost/admin/app/templates/settings/navigation.hbs +++ b/ghost/admin/app/templates/settings/navigation.hbs @@ -1,6 +1,6 @@ -
    -
    - {{#gh-view-title openMobileMenu="openMobileMenu"}}Navigation{{/gh-view-title}} +
    +
    +

    Navigation

    {{#gh-spin-button class="gh-btn gh-btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}}
    diff --git a/ghost/admin/app/templates/subscribers.hbs b/ghost/admin/app/templates/subscribers.hbs index 76fa4ceac9..5f78e888b7 100644 --- a/ghost/admin/app/templates/subscribers.hbs +++ b/ghost/admin/app/templates/subscribers.hbs @@ -1,7 +1,9 @@ -
    -
    - {{#gh-view-title openMobileMenu="openMobileMenu"}}Subscribers{{/gh-view-title}} +
    +
    +

    Subscribers ({{total}})

    + {{#link-to "subscribers.import" class="gh-btn gh-btn-hover-green"}}Import CSV{{/link-to}} + Export CSV {{#link-to "subscribers.new" class="gh-btn gh-btn-green"}}Add Subscriber{{/link-to}}
    @@ -13,28 +15,6 @@ loadNextPage=(action 'loadNextPage') sortByColumn=(action 'sortByColumn') delete=(action 'deleteSubscriber')}} - -
    -
    -

    Import Subscribers

    -
    -
    - {{#link-to "subscribers.import" class="gh-btn gh-btn-hover-green"}}Import CSV{{/link-to}} - Export CSV -
    - -
    -

    Quick Stats

    -
    -
    -
      -
    • - Total Subscribers: - {{total}} -
      • -
    -
    -
    diff --git a/ghost/admin/app/templates/subscribers/new.hbs b/ghost/admin/app/templates/subscribers/new.hbs index 46de448405..805b0fe999 100644 --- a/ghost/admin/app/templates/subscribers/new.hbs +++ b/ghost/admin/app/templates/subscribers/new.hbs @@ -1,4 +1,5 @@ {{gh-fullscreen-modal "new-subscriber" model=model confirm=(route-action "save") - close=(route-action "cancel")}} + close=(route-action "cancel") + modifier="action wide"}} diff --git a/ghost/admin/app/templates/team/index-loading.hbs b/ghost/admin/app/templates/team/index-loading.hbs index 94a78fc36f..bc50aac05d 100644 --- a/ghost/admin/app/templates/team/index-loading.hbs +++ b/ghost/admin/app/templates/team/index-loading.hbs @@ -1,6 +1,6 @@ -
    +
    -

    Team Members

    +

    Team members

    {{!-- Do not show Invite user button to authors --}} {{#unless session.user.isAuthor}}
    diff --git a/ghost/admin/app/templates/team/index.hbs b/ghost/admin/app/templates/team/index.hbs index dd3c497c4c..6db51d02e8 100644 --- a/ghost/admin/app/templates/team/index.hbs +++ b/ghost/admin/app/templates/team/index.hbs @@ -1,6 +1,6 @@
    -

    Team Members

    +

    Team members

    {{!-- Do not show Invite user button to authors --}} {{#unless session.user.isAuthor}}
    diff --git a/ghost/admin/tests/acceptance/settings/code-injection-test.js b/ghost/admin/tests/acceptance/settings/code-injection-test.js index 56075d8a04..9511f6b933 100644 --- a/ghost/admin/tests/acceptance/settings/code-injection-test.js +++ b/ghost/admin/tests/acceptance/settings/code-injection-test.js @@ -71,7 +71,7 @@ describe('Acceptance: Settings - Code-Injection', function() { expect(currentURL(), 'currentURL').to.equal('/settings/code-injection'); // has correct page title - expect(document.title, 'page title').to.equal('Settings - Code Injection - Test Blog'); + expect(document.title, 'page title').to.equal('Settings - Code injection - Test Blog'); // highlights nav menu expect($('.gh-nav-settings-code-injection').hasClass('active'), 'highlights nav menu item')