mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Lots of visual tweaks to the post list table
refs https://github.com/TryGhost/Team/issues/1965
This commit is contained in:
parent
d132b723da
commit
ad2cb3ae11
4 changed files with 99 additions and 49 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue