From b3d2f2ef1f447792b08717b0af3586d315e6ef84 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Mon, 22 Aug 2022 17:52:33 +0200 Subject: [PATCH] Updated UX for accessing Audit log refs. https://github.com/TryGhost/Toolbox/issues/356 - The entry for Audit log had been temporarily put on the top level Settings screen. Instead it's now accessible from Settings / General from a generic About box which had been moved from the What's new page. This also required to update the layout of the What's new page a little bit. --- ghost/admin/app/styles/layouts/main.css | 3 +- ghost/admin/app/styles/layouts/settings.css | 114 +++ ghost/admin/app/styles/layouts/whatsnew.css | 33 +- ghost/admin/app/templates/settings.hbs | 10 - .../admin/app/templates/settings/general.hbs | 862 ++++++++++-------- ghost/admin/app/templates/whatsnew.hbs | 32 +- .../public/assets/icons/calendar-stroke.svg | 1 + 7 files changed, 638 insertions(+), 417 deletions(-) create mode 100644 ghost/admin/public/assets/icons/calendar-stroke.svg diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index 92e67c9022..e5aec7fab0 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -1366,11 +1366,12 @@ } .gh-expandable-header .gh-expandable-description { - margin: 0; + margin: 4px 0 0; padding: 0; color: var(--midgrey); font-size: 1.3rem; font-weight: 400; + line-height: 1.45em; } .gh-expandable-content { diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css index b4cc0b6169..93cff7ee7d 100644 --- a/ghost/admin/app/styles/layouts/settings.css +++ b/ghost/admin/app/styles/layouts/settings.css @@ -510,6 +510,15 @@ /* General /* ---------------------------------------------------------- */ +.gh-general-settings { + display: grid; + grid-template-columns: 2fr 1fr; + grid-gap: 80px; +} + +.gh-general-settings .gh-expandable-header .gh-expandable-description { + max-width: 620px; +} .gh-seo-settings { display: flex; @@ -557,6 +566,19 @@ margin-right: 32px; } +.gh-general-settings .gh-seo-settings { + flex-direction: column; +} + +.gh-general-settings .gh-seo-settings .form-group { + max-width: 100%; +} + +.gh-general-settings .gh-seo-settings-left, +.gh-general-settings .gh-seo-container { + max-width: 591px; +} + .gh-twitter-settings { display: flex; } @@ -596,6 +618,19 @@ } } +.gh-general-settings .gh-twitter-settings { + flex-direction: column; +} + +.gh-general-settings .gh-twitter-settings .form-group { + max-width: 100%; +} + +.gh-general-settings .gh-twitter-settings-left, +.gh-general-settings .gh-twitter-container { + max-width: 591px; +} + .gh-og-settings { display: flex; } @@ -635,6 +670,85 @@ } } +.gh-general-settings .gh-og-settings { + flex-direction: column; +} + +.gh-general-settings .gh-og-settings .form-group { + max-width: 100%; +} + +.gh-general-settings .gh-og-settings-left, +.gh-general-settings .gh-og-container { + max-width: 591px; +} + +.gh-general-settings .gh-about-box { + margin-top: 19px; + position: relative; + top: unset; + right: unset; +} + +.gh-general-settings .gh-copyright-info { + border-top: none; + max-width: 350px; + margin-top: 12px; + padding-top: 0; +} + +.gh-about-links { + margin: 0; + padding: 0; + list-style: none; + margin-top: 12px; + padding-top: 12px; + border-top: 1px solid var(--lightgrey-l2); +} + +.gh-about-links li { + margin: 0 0 4px; + font-size: 1.4rem; + line-height: 1.8em; +} + +.gh-about-links li a span { + display: flex; + align-items: center; +} + +.gh-about-links li a span svg { + width: 16px; + height: 16px; + margin-right: 6px; +} + +.gh-about-links li a { + color: var(--middarkgrey); +} + +.gh-about-links li a:hover { + color: var(--black); +} + +.gh-about-links:last-of-type { + margin-bottom: -12px; +} + +.gh-about-links .calendar-icon { + width: 14px; + height: 14px; + margin-right: 8px; +} + +.gh-about-links li a:hover .hover-stroke path { + stroke: var(--black); +} + +.gh-about-links li a:hover .hover-fill path { + fill: var(--black); +} + /* Navigation /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/styles/layouts/whatsnew.css b/ghost/admin/app/styles/layouts/whatsnew.css index ca331c247f..1c4aa97b4c 100644 --- a/ghost/admin/app/styles/layouts/whatsnew.css +++ b/ghost/admin/app/styles/layouts/whatsnew.css @@ -1,6 +1,5 @@ /* About /ghost/settings/about/ /* ---------------------------------------------------------- */ - .gh-about-logo svg { position: relative; width: 120px; @@ -19,6 +18,15 @@ grid-gap: 80px; } +.gh-whats-new-canvas .gh-about-container { + display: flex; + grid-template-columns: unset; + grid-gap: unset; + margin: 0 auto; + max-width: 920px; + margin-top: 60px; +} + .gh-about-box { position: sticky; top: 96px; @@ -124,11 +132,17 @@ border-top: 1px solid var(--lightgrey-l2); padding-top: 16px; margin-top: 16px; + line-height: 1.45em; } /* What's new */ /* ---------------------------------------------------------- */ +.gh-whats-new-canvas .gh-canvas-header-content { + border-bottom: 1px solid var(--whitegrey); + margin-bottom: -1px; +} + .gh-whats-new { flex-grow: 2; color: var(--darkgrey); @@ -215,24 +229,35 @@ max-width: 620px; } +.gh-whats-new-canvas .gh-wn-content { + margin: 0 auto; +} + .gh-wn-entry h4 { font-size: 1.2rem; font-weight: 500; - letter-spacing: 0.3px; + letter-spacing: 0; text-transform: uppercase; margin: 24px 0 4px; color: var(--midlightgrey); } .gh-wn-entry h1 { - font-size: 3.1rem; + font-size: 3.7rem; line-height: 1.3em; font-weight: 700; - letter-spacing: 0px; + letter-spacing: -0.021em; color: var(--black); margin-bottom: 16px; } +.gh-whats-new-canvas .gh-wn-entry h1, +.gh-whats-new-canvas .gh-wn-entry h4 { + max-width: 620px; + margin-left: auto; + margin-right: auto; +} + .gh-wn-entry h2 { border-bottom: none; font-size: 1.9rem; diff --git a/ghost/admin/app/templates/settings.hbs b/ghost/admin/app/templates/settings.hbs index 34b1abc178..d7ec205582 100644 --- a/ghost/admin/app/templates/settings.hbs +++ b/ghost/admin/app/templates/settings.hbs @@ -82,16 +82,6 @@

Testing ground for new features

- - {{#if (feature 'auditLog')}} - - {{svg-jar "TODO"}} -
-

Audit log

-

View staff user actions

-
- - {{/if}} diff --git a/ghost/admin/app/templates/settings/general.hbs b/ghost/admin/app/templates/settings/general.hbs index 8ef145a891..56e84932fc 100644 --- a/ghost/admin/app/templates/settings/general.hbs +++ b/ghost/admin/app/templates/settings/general.hbs @@ -17,429 +17,513 @@ @modifier="action wide" /> {{/if}} - -
-

Publication info

-
-
-
-
-

Title & description

-

The details used to identify your publication around the web

-
- -
-
- {{#liquid-if this.pubInfoOpen}} -
- - - -

The name of your site

- - - - - -

Used in your theme, meta data and search results

- -
- {{/liquid-if}} -
-
- -
-
-
-

Site timezone

-

Set the time and date of your publication, used for all published posts

-
- -
-
- {{#liquid-if this.timezoneOpen}} -
- -
- {{/liquid-if}} -
-
- -
-
-
-

Publication Language

-

Set the language/locale which is used on your site

-
- -
-
- {{#liquid-if this.langOpen}} -
- - - -

Default: English (en); you can add translation files to your theme for any language

- -
- {{/liquid-if}} -
-
-
-
- -
-

Site meta settings

-
-
-
-
-

Meta data

-

Extra content for search engines

-
- -
-
- {{#liquid-if this.metaDataOpen}} -
-
-
- - - - -

Recommended: 70 characters. You’ve used {{gh-count-down-characters this.settings.metaTitle 70}}

- - - - - -

Recommended: 156 characters. You’ve used {{gh-count-down-characters this.settings.metaDescription 156}}

- -
-
- -
-
-
- {{svg-jar "google"}} -
{{svg-jar "google-search"}}
-
-
{{this.config.blogDomain}}
-
{{or this.settings.metaTitle this.settings.title}}
-
- {{truncate (or this.settings.metaDescription this.settings.description) 159}} -
-
-
-
+
+
+
+

Publication info

+
+
+
+
+

Title & description

+

The details used to identify your publication around the web

+
- {{/liquid-if}} -
-
- -
-
-
-

Twitter card

-

Customize structured data of your site for Twitter

-
- -
-
- {{#liquid-if this.twitterCardOpen}} -
-
-
- - - - - - +
+ {{#liquid-if this.pubInfoOpen}} +
+ - + +

The name of your site

 - - - + - + +

Used in your theme, meta data and search results
-
- -
-
- {{svg-jar "social-twitter" class="social-icon"}} -
- {{or this.settings.metaTitle this.settings.title}} - 12 hrs -
- - -
-
+
+ +
+

Site meta settings

+
+
+
+
+

Meta data

+

Extra content for search engines

+
+ +
+
+ {{#liquid-if this.metaDataOpen}} +
+
+
+ + + + +

Recommended: 70 characters. You’ve used {{gh-count-down-characters this.settings.metaTitle 70}}

+ + + + + +

Recommended: 156 characters. You’ve used {{gh-count-down-characters this.settings.metaDescription 156}}

+ +
+
+ +
+
+
+ {{svg-jar "google"}} +
{{svg-jar "google-search"}}
+
+
{{this.config.blogDomain}}
+
{{or this.settings.metaTitle this.settings.title}}
+
+ {{truncate (or this.settings.metaDescription this.settings.description) 159}}
- +
+
+ {{/liquid-if}} +
+
+ +
+
+
+

Twitter card

+

Customize structured data of your site for Twitter

+
+ +
+
+ {{#liquid-if this.twitterCardOpen}} +
+
+
+ + + + + + + + + + + + + + +
+
+ +
+
+ {{svg-jar "social-twitter" class="social-icon"}} +
+ {{or this.settings.metaTitle this.settings.title}} + 12 hrs +
+ + +
+ + +
+ {{/liquid-if}}
- {{/liquid-if}} -
+ +
+
+
+

Facebook card

+

Customize structured data of your site

+
+ +
+
+ {{#liquid-if this.facebookCardOpen}} +
+
+
+ + + + + + + + + + + + + + +
+
+ +
+
+ {{svg-jar "social-facebook" class="social-icon"}} +
+
{{or this.settings.metaTitle this.settings.title}}
+
12 hrs
+
+
+
+ + +
+
+ {{#if this.settings.ogImage}} +
+ {{/if}} +
+ {{!-- Ensures description is hidden if title exceeds one line --}} +
+
+ {{this.config.blogDomain}} +
+
{{truncate (or this.settings.ogTitle this.settings.title)}}
+
{{truncate (or this.settings.ogDescription this.settings.description)}}
+
+
+
+
+ {{svg-jar "facebook-like" class="z-999"}}{{svg-jar "facebook-heart" class="nl1"}}182 + 7 comments + 2 shares +
+
+
+
+
+ {{/liquid-if}} +
+
+ +
+
+
+

Social accounts

+

Link your social accounts for full structured data and rich card support

+
+ +
+
+ {{#liquid-if this.socialOpen}} +
+ + + +

URL of your publication's Facebook Page

+ + + + +

URL of your publication's Twitter profile

+ +
+ {{/liquid-if}} +
+
+ +
-
-
-
-

Facebook card

-

Customize structured data of your site

-
- -
-
- {{#liquid-if this.facebookCardOpen}} -
-
-
- - - - - - +
+

Advanced settings

+
+
+
+
+

Make this site private

+

+ Enable protection with a simple shared password. All search engine optimization and social features will be disabled. +

+
+
+ +
+
+
+ {{#if this.settings.isPrivate}} +
+ + A private RSS feed is available at + {{this.privateRSSUrl}} + + - - - - - - + +

Set the password for this site
-
- -
-
- {{svg-jar "social-facebook" class="social-icon"}} -
-
{{or this.settings.metaTitle this.settings.title}}
-
12 hrs
-
-
-
- - -
-
- {{#if this.settings.ogImage}} -
- {{/if}} -
- {{!-- Ensures description is hidden if title exceeds one line --}} -
-
- {{this.config.blogDomain}} -
-
{{truncate (or this.settings.ogTitle this.settings.title)}}
-
{{truncate (or this.settings.ogDescription this.settings.description)}}
-
-
-
-
- {{svg-jar "facebook-like" class="z-999"}}{{svg-jar "facebook-heart" class="nl1"}}182 - 7 comments - 2 shares -
-
-
-
+ {{/if}}
- {{/liquid-if}} -
+
+
+
-
-
-
-

Social accounts

-

Link your social accounts for full structured data and rich card support

+ {{#if (feature 'auditLog')}} +
+
+ - -
-
- {{#liquid-if this.socialOpen}} -
- - - -

URL of your publication's Facebook Page

- - - - -

URL of your publication's Twitter profile

- -
- {{/liquid-if}} -
-
- -
+ {{#if this.upgradeStatus.message}} +
+

+ Update available! {{this.upgradeStatus.message}} +

+
+ {{/if}} -
-

Advanced settings

-
-
-
-
-

Make this site private

-

- Enable protection with a simple shared password. All search engine optimization and social features will be disabled. -

-
-
- -
-
-
- {{#if this.settings.isPrivate}} -
- - A private RSS feed is available at - {{this.privateRSSUrl}} - - - - -

Set the password for this site

- +
    + {{#if this.linkToGitHubReleases}} +
  • Version: {{this.config.version}}
    • + {{else}} +
  • Version: {{this.config.version}}
    • + {{/if}} + {{#if this.showSystemInfo}} +
  • Environment: {{this.config.environment}}
    • +
  • Database: {{this.config.database}}
    • +
  • Mail: {{#if this.config.mail}}{{this.config.mail}}{{else}}Native{{/if}}
    • + {{/if}} + {{#if (enable-developer-experiments)}} +
  • Developer experiments: Enabled
    • + {{/if}} +
+ + {{#if (and this.showSystemInfo this.showDatabaseWarning)}} +
+ You are running an unsupported database in production. Please upgrade to MySQL 8.
{{/if}} + + + +
    +
  • + + + {{svg-jar "calendar-stroke" class="calendar-icon stroke-middarkgrey hover-stroke"}} + Audit log + + +
    • +
+
+
+ Copyright © 2013 – {{this.copyrightYear}} Ghost Foundation, released under the MIT license. Ghost is a registered trademark of Ghost Foundation Ltd.
- + {{/if}}
{{outlet}} \ No newline at end of file diff --git a/ghost/admin/app/templates/whatsnew.hbs b/ghost/admin/app/templates/whatsnew.hbs index 18f9d2e73e..ee923e0773 100644 --- a/ghost/admin/app/templates/whatsnew.hbs +++ b/ghost/admin/app/templates/whatsnew.hbs @@ -1,22 +1,26 @@ -
+

{{svg-jar "gift"}} What's new?

-
- User documentation - Get help with Ghost - Get involved -
+ {{#if (not (feature 'auditLog'))}} +
+ User documentation + Get help with Ghost + Get involved +
+ {{/if}}
{{#each this.whatsNew.entries as |entry|}} - -

{{moment-format entry.published_at "DD MMMM YYYY"}}

-

{{entry.title}}

- {{#if entry.feature_image}} - - {{/if}} +
+ +

{{moment-format entry.published_at "DD MMMM YYYY"}}

+

{{entry.title}}

+ {{#if entry.feature_image}} + + {{/if}} +
{{#if entry.custom_excerpt}}

{{entry.custom_excerpt}}

@@ -25,7 +29,7 @@ {{{entry.html}}} {{/if}}
- +
{{/each}} See all updates →
@@ -36,6 +40,7 @@ Get involved
+ {{#if (not (feature 'auditLog'))}}
+ {{/if}}
diff --git a/ghost/admin/public/assets/icons/calendar-stroke.svg b/ghost/admin/public/assets/icons/calendar-stroke.svg new file mode 100644 index 0000000000..b7f7d1888e --- /dev/null +++ b/ghost/admin/public/assets/icons/calendar-stroke.svg @@ -0,0 +1 @@ +calendar \ No newline at end of file