Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Lots of visual tweaks to the post list table

Browse source 
refs https://github.com/TryGhost/Team/issues/1965
This commit is contained in:
James Morris 2022-09-26 17:27:53 +01:00
parent d132b723da
commit ad2cb3ae11
4 changed files with 99 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
ghost/admin/app/components/posts-list/list-item-clicks.hbs
View file

@ -96,7 +96,7 @@
Published
{{#if @post.hasEmail}}
and sent
{{#if this.isStateHovered}}
{{#if this.isHovered}}
<span {{css-transition "anim-fade-in-scale"}}>to {{gh-pluralize @post.email.emailCount "member"}}</span>
{{/if}}
{{/if}}
@ -106,7 +106,7 @@
{{#if @post.isSent}}
<span class="sent" {{on "mouseover" (fn (mut this.isStateHovered) true)}} {{on "mouseleave" (fn (mut this.isStateHovered) false)}}>
Sent
{{#if this.isStateHovered}}
{{#if this.isHovered}}
<span {{css-transition "anim-fade-in-scale"}}>to {{gh-pluralize @post.email.emailCount "member"}}</span>
{{/if}}
</span>
@ -117,13 +117,12 @@
</LinkTo>
{{/if}}
{{!-- Opens and clicks columns --}}
{{#if (and @post.email (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor) (or @post.isSent @post.isPublished) this.settings.emailTrackOpens @post.email.trackOpens this.feature.emailAnalytics (eq @post.displayName "post"))}}
{{!-- Opens column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens">
{{!-- Opens column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens">
{{#if (and @post.email (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor) (or @post.isSent @post.isPublished) this.settings.emailTrackOpens @post.email.trackOpens this.feature.emailAnalytics (eq @post.displayName "post"))}}
<div class="flex flex-column" {{on "mouseover" (fn (mut this.isOpenStatHovered) true)}} {{on "mouseleave" (fn (mut this.isOpenStatHovered) false)}}>
<span class="gh-content-email-stats-value">
{{#if this.isOpenStatHovered}}
{{#if this.isHovered}}
{{format-number @post.email.openedCount}}
{{else}}
{{@post.email.openRate}}<sup>%</sup>
@ -133,17 +132,15 @@
opened
</span>
</div>
</LinkTo>
{{else}}
<div class="gh-list-data"></div>
{{/if}}
{{/if}}
</LinkTo>
{{#if (and @post.email (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor) (or @post.isSent @post.isPublished) this.settings.emailTrackClicks this.feature.emailAnalytics)}}
{{!-- Clicks column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-clicks">
{{!-- Clicks column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-clicks">
{{#if (and @post.email (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor) (or @post.isSent @post.isPublished) this.settings.emailTrackClicks this.feature.emailAnalytics)}}
<div class="flex flex-column" {{on "mouseover" (fn (mut this.isClickStatHovered) true)}} {{on "mouseleave" (fn (mut this.isClickStatHovered) false)}}>
<span class="gh-content-email-stats-value">
{{#if this.isClickStatHovered}}
{{#if this.isHovered}}
{{format-number @post.count.clicks}}
{{else}}
{{@post.clickRate}}<sup>%</sup>
@ -153,23 +150,21 @@
clicked
</span>
</div>
</LinkTo>
{{else}}
<div class="gh-list-data"></div>
{{/if}}
{{/if}}
</LinkTo>
{{!-- Button column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data {{if (not-eq this.settings.membersSignupAccess "none") "gh-post-list-button"}}">
{{#if (not-eq this.settings.membersSignupAccess "none")}}
<div class="flex">
<div class="gh-list-data-inner">
{{#if (and (not this.session.user.isContributor) (or @post.isSent @post.isPublished) (or this.settings.emailTrackClicks (feature "memberAttribution")))}}
<LinkTo @route="posts.analytics" @model={{@post}} class="gh-post-list-cta stats {{if this.isHovered "is-hovered"}}" title="View post analytics">
{{svg-jar "stats" title="View post analytics"}}<span>Stats</span>
<LinkTo @route="posts.analytics" @model={{@post}} class="gh-post-list-cta stats {{if this.isHovered "is-hovered"}}" title="">
{{svg-jar "stats" title=""}}<span>Stats</span>
</LinkTo>
{{else}}
{{!-- <LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="gh-post-list-cta edit {{if this.isHovered "is-hovered"}}" title="Edit this post">
{{svg-jar "pen" title="Edit this post"}} Edit
</LinkTo> --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="gh-post-list-cta edit {{if this.isHovered "is-hovered"}}" title="">
{{svg-jar "pen" title=""}}<span>Edit</span>
</LinkTo>
{{/if}}
</div>
{{else}}
@ -180,7 +175,7 @@
Scheduled
</span>
{{/if}}
{{#if @post.isDraft}}
<span class="draft">
<span class="status-dot"></span>

25
ghost/admin/app/styles/app-dark.css
View file

@ -983,6 +983,31 @@ input:focus,
border-top: 1px solid var(--hairline-color-1);
}
a.gh-post-list-cta {
background: #26282b;
color: #ffffff;
border: 1px solid #33373d;
box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}
a.gh-post-list-cta > svg {
color: #ffffff;
}
a.gh-post-list-cta > span {
color: #ffffff;
}
a.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 {
background: #1d1e20;
}
@media (max-width: 1200px) {
.gh-list-data {
border-top: 0 none;

72
ghost/admin/app/styles/layouts/content.css
View file

@ -961,6 +961,12 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
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 {
border-top: var(--whitegrey) 1px solid;
}
@ -1061,61 +1067,85 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
a.gh-post-list-cta {
display: flex;
align-items: center;
max-width: max-content;
margin: -6px 16px 0 0;
padding: 8px 14px;
justify-content: flex-start;
margin: -7px 16px 0 0;
padding: 1px 14px;
border: 1px solid rgb(222, 227, 231);
box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px;
background: var(--white);
border: 1px solid var(--lightgrey-l1);
color: var(--midgrey);
color: var(--darkgrey);
border-radius: var(--border-radius);
transition: all .2s ease;
height: 40px;
white-space: nowrap;
height: 38px;
overflow: hidden;
transition: all .1s linear;
}
.gh-post-analytics-header a.gh-post-list-cta {
margin-top: -14px;
margin-right: 0;
}
a.gh-post-list-cta.is-hovered {
border-color: rgb(186, 191, 194);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
a.gh-post-list-cta.stats.is-hovered {
color: var(--green);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
a.gh-post-list-cta.stats.is-hovered:hover {
border-color: var(--lightgrey);
color: var(--green-d1);
border-color: var(--green-d1);
}
a.gh-post-list-cta.edit.is-hovered {
color: var(--pink-l2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
color: var(--pink);
}
a.gh-post-list-cta.edit.is-hovered:hover,
a.gh-post-list-cta.edit:not(.is-hovered):hover {
border-color: var(--lightgrey);
color: var(--pink-l1);
color: var(--pink-d1);
border-color: var(--pink-d1);
}
a.gh-post-list-cta svg {
a.gh-post-list-cta > svg {
width: 1.5rem;
height: 1.5rem;
color: var(--darkgrey);
stroke: var(--darkgrey);
}
a.gh-post-list-cta.edit svg {
padding: 1px;
}
a.gh-post-list-cta svg path {
a.gh-post-list-cta > svg path {
stroke-width: 2;
}
a.gh-post-list-cta > span {
padding: 0 0 0 1rem;
line-height: 36px;
font-weight: 600;
padding: 0 0 0 0.75rem;
color: var(--darkgrey-l1);
transition: all .1s linear;
}
a.gh-post-list-cta.edit.is-hovered > * {
color: var(--pink-d1);
}
a.gh-post-list-cta.edit.is-hovered:hover > *,
a.gh-post-list-cta.edit:not(.is-hovered):hover > * {
color: var(--pink-d2);
}
a.gh-post-list-cta.stats.is-hovered > * {
color: var(--green-d1);
}
a.gh-post-list-cta.stats.is-hovered:hover > * {
color: var(--green-d2);
}
@media screen and (max-width: 1080px) {
.gh-post-analytics-box.resources {

4
ghost/admin/app/templates/posts/analytics.hbs
View file

@ -34,8 +34,8 @@
{{moment-format publishedAt "HH:mm"}}
{{/let}}
</div>
<LinkTo @route="editor.edit" @models={{array this.post.displayName this.post.id}} class="gh-post-list-cta edit" title="Edit this post">
{{svg-jar "pen" title="Edit this post"}}
<LinkTo @route="editor.edit" @models={{array this.post.displayName this.post.id}} class="gh-post-list-cta edit" title="">
{{svg-jar "pen" title=""}}<span>Edit post</span>
</LinkTo>
</div>
</GhCanvasHeader>