From 2fb6fcabb2c2ddcbf026ece0fcb660f73704f141 Mon Sep 17 00:00:00 2001 From: James Morris Date: Tue, 8 Nov 2022 14:29:04 +0000 Subject: [PATCH] Changed post and page rows go to editor plus code and styles cleanup - Made the majority of the row go to the editor instead - Removed illegal nested hyperlinks and cleaned up other markup - Removed some feature flag code around this page and fixed styles for them - Improved some dark mode styling - Lots of refactoring with code and styles refs https://github.com/TryGhost/Team/issues/2223 --- .../app/components/posts-list/list-item.hbs | 151 ++++++------ .../app/components/posts-list/list-item.js | 14 -- ghost/admin/app/styles/app-dark.css | 20 +- ghost/admin/app/styles/components/lists.css | 9 - ghost/admin/app/styles/layouts/content.css | 221 +++++------------- 5 files changed, 147 insertions(+), 268 deletions(-) diff --git a/ghost/admin/app/components/posts-list/list-item.hbs b/ghost/admin/app/components/posts-list/list-item.hbs index 5ed3771658..f26013cff9 100644 --- a/ghost/admin/app/components/posts-list/list-item.hbs +++ b/ghost/admin/app/components/posts-list/list-item.hbs @@ -1,5 +1,5 @@ {{!-- template-lint-disable no-invalid-interactive --}} -
  • {{else}} - +

    {{@post.title}} {{#if @post.lexical}} @@ -74,10 +74,10 @@

    {{#if @post.isScheduled}} - + Scheduled - {{#if this.isStateHovered}} + {{#if this.isHovered}} to be published {{if @post.newsletter "and sent "}}{{this.scheduledText}} to {{humanize-recipient-filter @post.emailSegment}} {{/if}} @@ -91,7 +91,7 @@ {{/if}} {{#if @post.isPublished}} - + Published {{#if @post.didEmailFail}} but failed to send newsletter @@ -105,7 +105,7 @@ {{/if}} {{#if @post.isSent}} - + {{#if @post.didEmailFail}} Failed to send newsletter {{else}} @@ -122,9 +122,60 @@ {{/if}} {{!-- Opened / Signups column --}} - - {{#if (and @post.showEmailOpenAnalytics @post.showEmailClickAnalytics) }} - + {{#if (and @post.showEmailOpenAnalytics @post.showEmailClickAnalytics) }} + + + {{#if this.isHovered}} + {{format-number @post.email.openedCount}} + {{else}} + {{@post.email.openRate}}% + {{/if}} + + + opened + + + {{else if (and @post.isPage @post.showAttributionAnalytics) }} + + + {{@post.count.signups}} + + + signups + + + {{else}} + + {{!-- Empty on purpose --}} + + {{/if}} + + {{!-- Clicked / Conversions column --}} + {{#if @post.showEmailClickAnalytics }} + + + {{#if this.isHovered}} + {{format-number @post.count.clicks}} + {{else}} + {{@post.clickRate}}% + {{/if}} + + + clicked + + + {{else if (and @post.isPage @post.showPaidAttributionAnalytics) }} + + + {{@post.count.paid_conversions}} + + + conversions + + + {{else}} + {{#if @post.showEmailOpenAnalytics }} + {{#if this.isHovered}} {{format-number @post.email.openedCount}} @@ -136,73 +187,25 @@ opened - {{else if (and @post.isPage @post.showAttributionAnalytics) }} - - - {{@post.count.signups}} - - - signups - + {{else}} + + {{!-- Empty on purpose --}} {{/if}} - - - {{!-- Clicked / Conversions column --}} - - {{#unless @post.showEmailClickAnalytics}} - {{#if @post.showEmailOpenAnalytics }} - - - {{#if this.isHovered}} - {{format-number @post.email.openedCount}} - {{else}} - {{@post.email.openRate}}% - {{/if}} - - - opened - - - {{/if}} - {{/unless}} - {{#if @post.showEmailClickAnalytics }} - - - {{#if this.isHovered}} - {{format-number @post.count.clicks}} - {{else}} - {{@post.clickRate}}% - {{/if}} - - - clicked - - - {{else if (and @post.isPage @post.showPaidAttributionAnalytics) }} - - - {{@post.count.paid_conversions}} - - - conversions - - - {{/if}} - + {{/if}} {{!-- Button column --}} - -

    - {{#if @post.hasAnalyticsPage }} - - {{svg-jar "stats" title=""}} - - {{else}} - - {{svg-jar "pen" title=""}} - - {{/if}} -
    - + {{#if @post.hasAnalyticsPage }} + + + {{svg-jar "stats" title="Go to Analytics"}} + + + {{else}} + + + {{svg-jar "pen" title="Go to Editor"}} + + + {{/if}}

    • diff --git a/ghost/admin/app/components/posts-list/list-item.js b/ghost/admin/app/components/posts-list/list-item.js index 61f906a247..b237f0fd6b 100644 --- a/ghost/admin/app/components/posts-list/list-item.js +++ b/ghost/admin/app/components/posts-list/list-item.js @@ -34,20 +34,6 @@ export default class PostsListItemClicks extends Component { return text.join(' '); } - get routeForLink() { - if (this.post.hasAnalyticsPage) { - return 'posts.analytics'; - } - return 'editor.edit'; - } - - get modelsForLink() { - if (this.post.hasAnalyticsPage) { - return [this.post]; - } - return [this.post.displayName, this.post.id]; - } - @action mouseOver() { this.isHovered = true; diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index 8894be6de6..8bd4859e61 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -978,27 +978,27 @@ input:focus, border-top: 1px solid var(--hairline-color-1); } -a.gh-post-list-cta { +.gh-post-list-cta { background: #26282b; color: #ffffff; border-color: #33373d; } -a.gh-post-list-cta > svg { +.gh-post-list-cta > svg { color: #ffffff; } -a.gh-post-list-cta > span { +.gh-post-list-cta > span { color: #ffffff; } -a.gh-post-list-cta.is-hovered { +.gh-post-list-cta.is-hovered { background: #1d1e20; border-color: #33373d; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); } -a.gh-post-list-cta.is-hovered:hover { +.gh-post-list-cta.is-hovered:hover { background: #1d1e20; } @@ -1225,7 +1225,6 @@ kbd { /* Finishing touches */ -/* ---------------------------------------------------- */ .gh-done { background: #15171A; @@ -1460,3 +1459,12 @@ kbd { .gh-post-activity-feed .gh-dashboard-list-item:hover { background: transparent; } + + +/* Post rows */ + +.gh-posts-list-item .gh-content-entry-meta, +.gh-posts-list-item .gh-content-entry-status, +.gh-posts-list-item .gh-content-email-stats { + color: #626D79; +} diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css index b5a296997a..b1d09fafc3 100644 --- a/ghost/admin/app/styles/components/lists.css +++ b/ghost/admin/app/styles/components/lists.css @@ -129,15 +129,6 @@ ul.nostyle li { color: var(--darkgrey); } -.gh-list-data a.gh-post-row-event { - opacity: 1; - transition: opacity .1s linear; -} - -.gh-list-data a.gh-post-row-event:hover { - opacity: 0.7; -} - .gh-list-data-date { font-weight: 500; font-size: 1.3rem; diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css index 81c7815f5e..2d2add4260 100644 --- a/ghost/admin/app/styles/layouts/content.css +++ b/ghost/admin/app/styles/layouts/content.css @@ -231,29 +231,21 @@ .gh-post-list-updated, .gh-post-list-author, -.gh-post-list-recipients, -.gh-post-list-opens, -.gh-post-list-signups, -.gh-post-list-conversions { +.gh-post-list-metrics { color: var(--middarkgrey); font-size: 1.3rem; } -.gh-post-list-signups, -.gh-post-list-conversions, -.gh-post-list-recipients { - padding-right: 8px; -} - -/** TODO: improve this hover style */ -a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:hover > span { - opacity: 0.5; -} - .gh-post-list-button { width: 78px; } +.gh-list-data.gh-post-list-metrics, +.gh-list-data.gh-post-list-button { + vertical-align: top; + padding-left: 0; +} + .gh-list .gh-content-entry-title { display: flex; align-items: center; @@ -268,9 +260,6 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho .gh-posts-list-item p { margin: 0 0 2px; - font-size: 1.3rem; - overflow-wrap: break-word; - color: var(--middarkgrey); } .gh-schedule-plan { @@ -281,15 +270,6 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho max-width: 200px; } -.gh-content-entry-meta { - font-size: 1.3rem; - color: var(--midlightgrey); -} - -.gh-content-entry-meta .gh-badge { - margin-right: 3px; -} - .gh-content-email-stats-mobile { display: none; } @@ -454,10 +434,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho @media (max-width: 1600px) { .feature-memberAttribution .gh-post-list-status, - .feature-memberAttribution .gh-post-list-recipients, - .feature-memberAttribution .gh-post-list-opens, - .feature-memberAttribution .gh-post-list-signups, - .feature-memberAttribution .gh-post-list-conversions { + .feature-memberAttribution .gh-post-list-metrics { padding-left: 12px; padding-right: 12px; } @@ -477,10 +454,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho /* Mobile style of post list */ @media (max-width: 1200px) { .feature-memberAttribution .gh-post-list-status, - .feature-memberAttribution .gh-post-list-recipients, - .feature-memberAttribution .gh-post-list-opens, - .feature-memberAttribution .gh-post-list-signups, - .feature-memberAttribution .gh-post-list-conversions { + .feature-memberAttribution .gh-post-list-metrics { padding-left: 0; padding-right: 0; } @@ -493,86 +467,11 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho padding-right: 12px; } - .gh-posts-list-item:not(.gh-posts-list-item-labs) { - display: flex; - flex-wrap: wrap; - border-bottom: 1px solid var(--whitegrey); - margin: 0; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs):nth-of-type(2) { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs):hover { - background: var(--whitegrey-l2); - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs):hover .gh-list-data { - background: none !important; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-featured { - display: block; - order: 1; - border-bottom: none; - position: absolute; - left: -6px; - top: 4px; - border: none; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-title { - display: block; - order: 2; - flex: 1 1 100%; - border: none; - padding: 20px 0 4px; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-status, - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-recipients, - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-opens, - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-signups, - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-conversions { - display: inline-block; - border: none; - padding: 0 4px 20px 0; - font-size: 1.3rem; - max-width: 140px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-status { - order: 3; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-recipients { - order: 4; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-opens { - order: 5; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-signups { - order: 6; - } - - .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-conversions { - order: 7; - } - - .gh-posts-list-item.gh-posts-list-item-labs .gh-post-list-opens, - .gh-posts-list-item.gh-posts-list-item-labs .gh-post-list-clicks { + .gh-posts-list-item .gh-post-list-metrics { width: 0; } - .gh-posts-list-item.gh-posts-list-item-labs .gh-post-list-opens > div, - .gh-posts-list-item.gh-posts-list-item-labs .gh-post-list-clicks > div { + .gh-posts-list-item .gh-post-list-metrics > * { display: none; } @@ -609,7 +508,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho display: none; } - .gh-list-data a.gh-post-row-event { + .gh-list-data a.gh-post-list-metrics { display: none; } @@ -1373,53 +1272,42 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho stroke: var(--midgrey); } - -/* Post list – LABS -/* ---------------------------------------------------------- */ - -.gh-posts-list-item-labs .gh-list-data { - padding: 2rem 0; - vertical-align: top; -} - -.gh-posts-list-item-labs .gh-list-data-inner { - display: flex; - justify-content: flex-end; - padding: 0 20px 0 0; -} - -.gh-posts-list-item-labs:nth-of-type(2) .gh-list-data { +.gh-posts-list-item:nth-of-type(2) .gh-list-data { border-top: var(--whitegrey) 1px solid; } -.gh-posts-list-item-labs .gh-content-entry-title { +.gh-content-entry-title { margin: 0 0 2px; font-size: 1.55rem; font-weight: 600; } -.gh-posts-list-item-labs .gh-content-entry-meta, -.gh-posts-list-item-labs .gh-content-entry-status { +.gh-content-entry-meta, +.gh-content-entry-status { max-width: max-content; font-size: 1.35rem; - color: var(--midlightgrey-d2); + color: #99a3ad; } -.gh-posts-list-item-labs .gh-content-entry-status .draft { +.gh-content-entry-meta .gh-badge { + margin-right: 3px; +} + +.gh-content-entry-status .draft { display: flex; align-items: center; color: var(--pink); font-weight: 500; } -.gh-posts-list-item-labs .gh-content-entry-status .scheduled { +.gh-content-entry-status .scheduled { display: flex; align-items: center; color: var(--green); font-weight: 500; } -.gh-posts-list-item-labs .gh-content-entry-status .status-dot { +.gh-content-entry-status .status-dot { display: inline-block; width: 6px; height: 6px; @@ -1427,27 +1315,27 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho border-radius: 999px; } -.gh-posts-list-item-labs .gh-content-entry-status .scheduled .status-dot { +.gh-content-entry-status .scheduled .status-dot { border-color: var(--green); background: var(--green); } -.gh-posts-list-item-labs .gh-content-entry-status .draft .status-dot { +.gh-content-entry-status .draft .status-dot { border-color: var(--pink); background: var(--pink); } -.gh-posts-list-item-labs .gh-content-entry-status .error { +.gh-content-entry-status .error { color: var(--red); font-weight: 500; } -.gh-posts-list-item-labs .schedule-details { +.schedule-details { margin-left: 3px; color: var(--midlightgrey-d1); } -.gh-posts-list-item-labs .schedule-details.absolute { +.schedule-details.absolute { position: absolute; transform: translateX(-100%); min-width: max-content; @@ -1459,25 +1347,24 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho transition: all 1s ease; } -.gh-posts-list-item-labs .gh-post-list-clicks, -.gh-posts-list-item-labs .gh-post-list-opens { - padding-right: 24px; +.gh-post-list-metrics { width: 120px; } -.gh-posts-list-item-labs .gh-content-email-stats, -.gh-posts-list-item-labs a.gh-post-list-cta { +.gh-content-email-stats, +.gh-post-list-cta { margin: 0 0 3px; color: var(--midlightgrey-d2); font-size: 1.35rem; font-weight: 400; } -.gh-posts-list-item-labs .gh-content-email-stats { +.gh-content-email-stats { margin-top: -1px; } .gh-content-email-stats-value { + display: block; color: var(--black); font-size: 1.55rem; font-weight: 600; @@ -1490,11 +1377,15 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho padding: 0 0 0 1px; } -a.gh-post-list-cta { +.gh-post-list-button { + width: 78px; +} + +.gh-post-list-cta { display: flex; align-items: center; justify-content: flex-start; - margin: -7px 16px 0 0; + margin: 0; padding: 1px 14px; border: 1px solid var(--whitegrey-d1); background: var(--white); @@ -1507,40 +1398,40 @@ a.gh-post-list-cta { transition: all .1s linear; } -.gh-post-list-button a.gh-post-list-cta { +.gh-list-data .gh-post-list-cta { justify-content: center; width: 56px; } -.gh-post-analytics-header a.gh-post-list-cta { +.gh-post-analytics-header .gh-post-list-cta { margin-top: -14px; margin-right: 0; } -a.gh-post-list-cta.is-hovered { +.gh-post-list-cta.is-hovered { border-color: var(--whitegrey-d2); } -a.gh-post-list-cta.stats.is-hovered { +.gh-post-list-cta.stats.is-hovered { color: var(--green); } -a.gh-post-list-cta.stats.is-hovered:hover { +.gh-post-list-cta.stats.is-hovered:hover { border-color: var(--lightgrey-l2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } -a.gh-post-list-cta.edit.is-hovered { +.gh-post-list-cta.edit.is-hovered { color: var(--pink); } -a.gh-post-list-cta.edit.is-hovered:hover, -a.gh-post-list-cta.edit:not(.is-hovered):hover { +.gh-post-list-cta.edit.is-hovered:hover, +.gh-post-list-cta.edit:not(.is-hovered):hover { border-color: var(--lightgrey-l2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } -a.gh-post-list-cta > svg { +.gh-post-list-cta > svg { width: 1.5rem; height: 1.5rem; color: var(--darkgrey); @@ -1548,11 +1439,11 @@ a.gh-post-list-cta > svg { transition: all .1s linear; } -a.gh-post-list-cta > svg path { +.gh-post-list-cta > svg path { stroke-width: 2; } -a.gh-post-list-cta > span { +.gh-post-list-cta > span { line-height: 36px; font-weight: 600; padding: 0 0 0 0.75rem; @@ -1560,14 +1451,14 @@ a.gh-post-list-cta > span { transition: all .1s linear; } -a.gh-post-list-cta.edit.is-hovered > *, -a.gh-post-list-cta.edit.is-hovered:hover > *, -a.gh-post-list-cta.edit:not(.is-hovered):hover > * { +.gh-post-list-cta.edit.is-hovered > *, +.gh-post-list-cta.edit.is-hovered:hover > *, +.gh-post-list-cta.edit:not(.is-hovered):hover > * { color: var(--pink-d1); } -a.gh-post-list-cta.stats.is-hovered > *, -a.gh-post-list-cta.stats.is-hovered:hover > * { +.gh-post-list-cta.stats.is-hovered > *, +.gh-post-list-cta.stats.is-hovered:hover > * { color: var(--green-d1); }