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

Updated post list item hover state

Browse source 
Refs https://github.com/TryGhost/Team/issues/1895
This commit is contained in:
Sanne de Vries 2022-09-14 11:50:28 +01:00
parent 1c6c737a22
commit b5904d9956
4 changed files with 98 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,23 +12,33 @@
{{@post.title}} {{svg-jar "external" class="gh-post-list-external"}} {{@post.title}} {{svg-jar "external" class="gh-post-list-external"}}
</h3> </h3>
{{#unless @hideAuthor }} {{#unless @hideAuthor }}
<p> <p class="gh-content-entry-meta">
<span class="gh-content-entry-meta"> <span class="gh-content-entry-author">
By <span class="midgrey-l2 fw5">{{post-author-names @post}}</span> By {{post-author-names @post}}
{{#if @post.primaryTag}} {{#if @post.primaryTag}}
in <span class="midgrey-l2 fw5">{{@post.primaryTag.name}}</span> in <span class="midgrey-l2 fw5">{{@post.primaryTag.name}}</span>
{{/if}} {{/if}}
• <span data-tooltip="{{gh-format-post-time @post.updatedAtUTC "D MMM YYYY"}}">{{gh-format-post-time @post.updatedAtUTC draft=true}}</span> •
</span>
<span class="gh-content-entry-date">
{{#if this.isHovered}}
{{gh-format-post-time @post.updatedAtUTC "D MMM YYYY"}}
{{else}}
{{gh-format-post-time @post.updatedAtUTC draft=true}}
{{/if}}
</span> </span>
</p> </p>
<p> <p class="gh-content-entry-status">
<span class="gh-content-status-published nowrap"> <span class="published">
Published Published
{{#if @post.hasEmail}} {{#if @post.hasEmail}}
&amp; Sent {{#if isHovered}}
and sent to 2,467 free subscribers
{{else}}
and sent
{{/if}}
{{/if}} {{/if}}
</span> </span>
</p> </p>
@ -41,39 +51,55 @@
</h3> </h3>
{{#unless @hideAuthor }} {{#unless @hideAuthor }}
<p class="gh-content-entry-meta"> <p class="gh-content-entry-meta">
By {{post-author-names @post}} <span class="gh-content-entry-author">
By {{post-author-names @post}}
{{#if @post.primaryTag}} {{#if @post.primaryTag}}
in {{@post.primaryTag.name}} in <span class="midgrey-l2 fw5">{{@post.primaryTag.name}}</span>
{{/if}} {{/if}}
•
• <span data-tooltip="{{gh-format-post-time @post.updatedAtUTC "D MMM YYYY"}}">{{gh-format-post-time @post.updatedAtUTC draft=true}}</span> </span>
<span class="gh-content-entry-date">
{{#if this.isHovered}}
{{gh-format-post-time @post.updatedAtUTC "D MMM YYYY"}}
{{else}}
{{gh-format-post-time @post.updatedAtUTC draft=true}}
{{/if}}
</span>
</p> </p>
<p class="gh-content-entry-meta"> <p class="gh-content-entry-status">
{{#if @post.isScheduled}} {{#if @post.isScheduled}}
<span class="gh-content-status scheduled" title="Scheduled" data-tooltip="To be published {{if @post.newsletter "& sent at "}}{{capitalize this.scheduledText}} to {{@post.emailSegment}} members"> <span class="scheduled" title="Scheduled" data-tooltip="To be published {{if @post.newsletter "& sent at "}}{{capitalize this.scheduledText}} to {{@post.emailSegment}} members">
Scheduled Scheduled
</span> </span>
{{/if}} {{/if}}
{{#if @post.isDraft}} {{#if @post.isDraft}}
<span class="gh-content-status draft"> <span class="draft">
Draft Draft
</span> </span>
{{/if}} {{/if}}
{{#if @post.isPublished}} {{#if @post.isPublished}}
<span class="gh-content-status published"> <span class="published">
Published Published
{{#if @post.hasEmail}} {{#if @post.hasEmail}}
and sent {{#if isHovered}}
and sent to 2,467 free subscribers
{{else}}
and sent
{{/if}}
{{/if}} {{/if}}
</span> </span>
{{/if}} {{/if}}
{{#if @post.isSent}} {{#if @post.isSent}}
<span class="gh-content-status sent"> <span class="sent">
Sent {{#if isHovered}}
Sent to 2,467 free subscribers
{{else}}
Sent
{{/if}}
</span> </span>
{{/if}} {{/if}}
</p> </p>
@ -95,28 +121,32 @@
{{else}} {{else}}
<span class="darkgrey fw5 gh-content-email-stats"> <span class="darkgrey fw5 gh-content-email-stats">
{{#if this.isHovered}} {{#if this.isHovered}}
{{format-number @post.email.openedCount}} 1,283
{{else}} {{else}}
{{@post.email.openRate}}%&nbsp; 52%
{{/if}} {{/if}}
</span> </span>
{{/if}} {{/if}}
<span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{@post.email.openRate}}% opens</span> <span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{@post.email.openRate}}% opens</span>
</div> </div>
{{else}}
<span class="gh-list-nodata">&mdash;</span>
{{/if}} {{/if}}
</LinkTo> </LinkTo>
{{!-- Clicks column --}} {{!-- Clicks column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-clicks"> <LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-clicks">
<span class="gh-list-nodata">&mdash;</span> {{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
{{#if this.isHovered}}
444
{{else}}
18%
{{/if}}
{{/if}}
</LinkTo> </LinkTo>
{{/if}} {{/if}}
{{!-- Button column --}} {{!-- Button column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-cta"> <LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-cta">
{{#if @post.isPublished}} {{#if (or @post.isSent @post.isPublished)}}
<LinkTo @route="posts.analytics" @model={{@post}} class="gh-btn gh-btn-outline gh-btn-icon"> <LinkTo @route="posts.analytics" @model={{@post}} class="gh-btn gh-btn-outline gh-btn-icon">
<span> <span>
{{svg-jar "stats" class="stats"}} Stats {{svg-jar "stats" class="stats"}} Stats

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

@ -427,10 +427,6 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
stroke-width: 1.5; stroke-width: 1.5;
} }
.gh-content-entry-author {
color: var(--middarkgrey);
}
.gh-posts-placeholder { .gh-posts-placeholder {
width: 60px; width: 60px;
fill: var(--lightgrey); fill: var(--lightgrey);
@ -721,7 +717,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
.gh-post-stats-box.grey { .gh-post-stats-box.grey {
border: none; border: none;
background: var(--whitegrey-l2); background: var(--main-color-content-greybg);
} }
.gh-post-stats-title { .gh-post-stats-title {
@ -830,7 +826,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-posts-list-item-labs .gh-list-data { .gh-posts-list-item-labs .gh-list-data {
padding: 2rem; padding: 1.6rem 0 3.2rem;
vertical-align: top; vertical-align: top;
} }
@ -839,21 +835,26 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
} }
.gh-posts-list-item-labs .gh-content-entry-title { .gh-posts-list-item-labs .gh-content-entry-title {
margin: 0 0 1rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
.gh-posts-list-item-labs .gh-content-entry-meta { .gh-posts-list-item-labs .gh-content-entry-meta,
.gh-posts-list-item-labs .gh-content-entry-status {
margin: 2px 0 0 0; margin: 2px 0 0 0;
font-size: 1.35rem; font-size: 1.35rem;
color: var(--midlightgrey-d1); color: var(--midlightgrey-d1);
} }
.gh-posts-list-item-labs .gh-content-status.draft { .gh-content-entry-author,
.gh-content-entry-date {
display: inline-block;
}
.gh-content-entry-status .draft {
color: var(--pink); color: var(--pink);
} }
.gh-posts-list-item-labs .gh-content-status.scheduled { .gh-content-entry-status .scheduled {
color: var(--purple); color: var(--purple);
} }
@ -869,6 +870,10 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
box-shadow: none; box-shadow: none;
} }
.gh-posts-list-item-labs:hover .gh-btn-outline {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.gh-posts-list-item-labs svg.edit { .gh-posts-list-item-labs svg.edit {
color: var(--midgrey); color: var(--midgrey);
} }

52
ghost/admin/app/templates/posts-clicks.hbs
View file

@ -27,34 +27,32 @@
</GhCanvasHeader> </GhCanvasHeader>
<section class="view-container content-list"> <section class="view-container content-list">
<div class="gh-list-sticky"> <ol class="posts-list gh-list {{unless this.postsInfinityModel "no-posts"}} feature-memberAttribution">
<ol class="posts-list gh-list {{unless this.postsInfinityModel "no-posts"}} feature-memberAttribution">
{{#each this.postsInfinityModel as |post|}} {{#each this.postsInfinityModel as |post|}}
<PostsList::ListItemClicks <PostsList::ListItemClicks
@post={{post}} @post={{post}}
data-test-post-id={{post.id}} data-test-post-id={{post.id}}
/> />
{{else}} {{else}}
<li class="no-posts-box"> <li class="no-posts-box">
<div class="no-posts"> <div class="no-posts">
{{#if this.showingAll}} {{#if this.showingAll}}
{{svg-jar "posts-placeholder" class="gh-posts-placeholder"}} {{svg-jar "posts-placeholder" class="gh-posts-placeholder"}}
<h4>Start creating content.</h4> <h4>Start creating content.</h4>
<LinkTo @route="editor.new" @model="post" class="gh-btn gh-btn-green"> <LinkTo @route="editor.new" @model="post" class="gh-btn gh-btn-green">
<span>Write a new post</span> <span>Write a new post</span>
</LinkTo> </LinkTo>
{{else}} {{else}}
<h4>No posts match the current filter</h4> <h4>No posts match the current filter</h4>
<LinkTo @route="posts" @query={{hash type=null author=null tag=null}} class="gh-btn"> <LinkTo @route="posts" @query={{hash type=null author=null tag=null}} class="gh-btn">
<span>Show all posts</span> <span>Show all posts</span>
</LinkTo> </LinkTo>
{{/if}} {{/if}}
</div> </div>
</li> </li>
{{/each}} {{/each}}
</ol> </ol>
</div>
<GhInfinityLoader <GhInfinityLoader
@infinityModel={{this.postsInfinityModel}} @infinityModel={{this.postsInfinityModel}}

2
ghost/core/content/themes/casper

@ -1 +1 @@
Subproject commit 005211ff8f58753cce794d4ef9924b99dfbedd3b Subproject commit 657bb8f98653c5f1aea034a726e53f46ccf83b23