mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-27 22:49:56 -05:00
Updated post list layouts
Refs https://github.com/TryGhost/Team/issues/1895
This commit is contained in:
Sanne de Vries
parent
4d63034bd2
commit
47903962cc
4 changed files with 97 additions and 78 deletions
|
|
@ -20,7 +20,7 @@
|
|||
in <span class="midgrey-l2 fw5">{{@post.primaryTag.name}}</span>
|
||||
{{/if}}
|
||||
|
||||
•
|
||||
-
|
||||
</span>
|
||||
<span class="gh-content-entry-date">
|
||||
{{#if this.isHovered}}
|
||||
|
|
@ -57,10 +57,10 @@
|
|||
{{#if @post.primaryTag}}
|
||||
in <span class="midgrey-l2 fw5">{{@post.primaryTag.name}}</span>
|
||||
{{/if}}
|
||||
•
|
||||
-
|
||||
</span>
|
||||
<span class="gh-content-entry-date">
|
||||
{{#if this.isHovered}}
|
||||
<span class="gh-content-entry-date {{if this.isDateHovered "is-hovered"}}" {{on "mouseover" (fn (mut this.isDateHovered) true)}} {{on "mouseleave" (fn (mut this.isDateHovered) false)}}>
|
||||
{{#if this.isDateHovered}}
|
||||
{{gh-format-post-time @post.updatedAtUTC "D MMM YYYY"}}
|
||||
{{else}}
|
||||
{{gh-format-post-time @post.updatedAtUTC draft=true}}
|
||||
|
|
@ -69,11 +69,10 @@
|
|||
</p>
|
||||
<p class="gh-content-entry-status">
|
||||
{{#if @post.isScheduled}}
|
||||
<span class="scheduled" title="Scheduled">
|
||||
{{#if this.isHovered}}
|
||||
Scheduled to be published {{if @post.newsletter "and sent "}}{{this.scheduledText}} to {{@post.emailSegment}} subscribers
|
||||
{{else}}
|
||||
Scheduled
|
||||
<span class="scheduled" {{on "mouseover" (fn (mut this.isStateHovered) true)}} {{on "mouseleave" (fn (mut this.isStateHovered) false)}}>
|
||||
Scheduled
|
||||
{{#if this.isStateHovered}}
|
||||
<span class="schedule-details">- to be published {{if @post.newsletter "and sent "}}{{this.scheduledText}} to {{humanize-recipient-filter @post.emailSegment}}</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
|
@ -85,10 +84,10 @@
|
|||
{{/if}}
|
||||
|
||||
{{#if @post.isPublished}}
|
||||
<span class="published">
|
||||
<span class="published" {{on "mouseover" (fn (mut this.isStateHovered) true)}} {{on "mouseleave" (fn (mut this.isStateHovered) false)}}>
|
||||
Published
|
||||
{{#if @post.hasEmail}}
|
||||
{{#if this.isHovered}}
|
||||
{{#if this.isStateHovered}}
|
||||
and sent to 2,467 free subscribers
|
||||
{{else}}
|
||||
and sent
|
||||
|
|
@ -98,8 +97,8 @@
|
|||
{{/if}}
|
||||
|
||||
{{#if @post.isSent}}
|
||||
<span class="sent">
|
||||
{{#if this.isHovered}}
|
||||
<span class="sent" {{on "mouseover" (fn (mut this.isStateHovered) true)}} {{on "mouseleave" (fn (mut this.isStateHovered) false)}}>
|
||||
{{#if this.isStateHovered}}
|
||||
Sent to 2,467 free subscribers
|
||||
{{else}}
|
||||
Sent
|
||||
|
|
@ -117,17 +116,13 @@
|
|||
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens">
|
||||
{{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
|
||||
<div class="flex flex-column">
|
||||
<span class="gh-content-email-stats">
|
||||
{{#if this.isHovered}}
|
||||
1,283
|
||||
<span class="gh-content-email-stats" {{on "mouseover" (fn (mut this.isOpenStatHovered) true)}} {{on "mouseleave" (fn (mut this.isOpenStatHovered) false)}}>
|
||||
{{#if this.isOpenStatHovered}}
|
||||
<strong>1,283</strong> opens
|
||||
{{else}}
|
||||
52%
|
||||
<strong>52%</strong> opens
|
||||
{{/if}}
|
||||
</span>
|
||||
<span class="gh-content-entry-meta">
|
||||
opens
|
||||
</span>
|
||||
<span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{@post.email.openRate}}% opens</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</LinkTo>
|
||||
|
|
@ -136,34 +131,27 @@
|
|||
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-clicks">
|
||||
{{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
|
||||
<div class="flex flex-column">
|
||||
<span class="gh-content-email-stats">
|
||||
{{#if this.isHovered}}
|
||||
444
|
||||
<span class="gh-content-email-stats" {{on "mouseover" (fn (mut this.isClickStatHovered) true)}} {{on "mouseleave" (fn (mut this.isClickStatHovered) false)}}>
|
||||
{{#if this.isClickStatHovered}}
|
||||
<strong>419</strong> clicks
|
||||
{{else}}
|
||||
18%
|
||||
<strong>17%</strong> clicks
|
||||
{{/if}}
|
||||
</span>
|
||||
<span class="gh-content-entry-meta">
|
||||
clicks
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
|
||||
{{!-- 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">
|
||||
{{#if (or @post.isSent @post.isPublished)}}
|
||||
<LinkTo @route="posts.analytics" @model={{@post}} class="gh-btn gh-btn-outline gh-btn-icon">
|
||||
<span>
|
||||
{{svg-jar "stats" class="stats"}} Stats
|
||||
</span>
|
||||
<LinkTo @route="posts.analytics" @model={{@post}} class="gh-post-list-cta {{if this.isHovered "is-hovered"}}">
|
||||
{{svg-jar "stats"}}
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="gh-btn gh-btn-outline gh-btn-icon">
|
||||
<span>
|
||||
{{svg-jar "pen" class="edit"}} Edit
|
||||
</span>
|
||||
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="gh-post-list-cta {{if this.isHovered "is-hovered"}}">
|
||||
{{svg-jar "pen" class="edit"}}
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
</LinkTo>
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ export default helper(function humanizeRecipientFilter([filter = '']/*, hash*/)
|
|||
const parts = filter.split(',');
|
||||
|
||||
if (parts.includes('status:free') && parts.includes('status:-free')) {
|
||||
return 'All members';
|
||||
return 'All subscribers';
|
||||
}
|
||||
|
||||
let outputParts = [];
|
||||
|
||||
if (parts.includes('status:free')) {
|
||||
outputParts.push('Free members');
|
||||
outputParts.push('Free subscribers');
|
||||
} else if (parts.includes('status:-free')) {
|
||||
outputParts.push('Paid members');
|
||||
outputParts.push('Paid subscribers');
|
||||
}
|
||||
|
||||
const labelsArrayRegex = /labels:\[(.*?)\]/;
|
||||
|
|
|
|||
|
|
@ -841,13 +841,15 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
|
|||
|
||||
.gh-posts-list-item-labs .gh-content-entry-title {
|
||||
margin: 0 0 3px;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-content-entry-meta,
|
||||
.gh-posts-list-item-labs .gh-content-entry-status {
|
||||
max-width: max-content;
|
||||
font-size: 1.35rem;
|
||||
color: var(--midlightgrey-d1);
|
||||
color: var(--midlightgrey-d2);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-content-entry-status .draft {
|
||||
|
|
@ -884,41 +886,70 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
|
|||
background: var(--green);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .schedule-details {
|
||||
margin-left: 3px;
|
||||
color: var(--midlightgrey-d1);
|
||||
}
|
||||
|
||||
.gh-content-entry-author,
|
||||
.gh-content-entry-date {
|
||||
display: inline-block;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.gh-content-entry-date.is-hovered {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-post-list-clicks,
|
||||
.gh-posts-list-item-labs .gh-post-list-opens,
|
||||
.gh-posts-list-item-labs .gh-post-list-cta {
|
||||
width: 104px;
|
||||
.gh-posts-list-item-labs .gh-post-list-opens {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-content-email-stats {
|
||||
margin: 0 0 3px;
|
||||
color: var(--midlightgrey-d2);
|
||||
font-size: 1.35rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-content-email-stats strong {
|
||||
color: var(--black);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-btn-outline {
|
||||
min-width: 86px;
|
||||
background: var(--white);
|
||||
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 a.gh-post-list-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: max-content;
|
||||
margin: -6px 16px 0 0;
|
||||
padding: 8px 16px;
|
||||
color: var(--midgrey);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs svg.stats {
|
||||
color: var(--green);
|
||||
.gh-posts-list-item-labs a.gh-post-list-cta.is-hovered {
|
||||
background: var(--white);
|
||||
color: var(--midgrey-d2);
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs svg path {
|
||||
stroke-width: 2;
|
||||
.gh-posts-list-item-labs a.gh-post-list-cta.is-hovered:hover {
|
||||
color: var(--darkgrey);
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-post-list-cta svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-post-list-cta svg.edit {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-post-list-cta svg path {
|
||||
stroke-width: 1.8;
|
||||
}
|
||||
|
|
@ -7,39 +7,39 @@ import {setupRenderingTest} from 'ember-mocha';
|
|||
describe('Integration: Helper: humanize-recipient-filter', function () {
|
||||
setupRenderingTest();
|
||||
|
||||
it('handles all members', async function () {
|
||||
it('handles all subscribers', async function () {
|
||||
await render(hbs`{{humanize-recipient-filter "status:free,status:-free"}}`);
|
||||
expect(this.element.textContent.trim()).to.equal('All members');
|
||||
expect(this.element.textContent.trim()).to.equal('All subscribers');
|
||||
});
|
||||
|
||||
it('handles free members', async function () {
|
||||
it('handles free subscribers', async function () {
|
||||
await render(hbs`{{humanize-recipient-filter "status:free"}}`);
|
||||
expect(this.element.textContent.trim()).to.equal('Free members');
|
||||
expect(this.element.textContent.trim()).to.equal('Free subscribers');
|
||||
});
|
||||
|
||||
it('handles paid members', async function () {
|
||||
it('handles paid subscribers', async function () {
|
||||
await render(hbs`{{humanize-recipient-filter "status:-free"}}`);
|
||||
expect(this.element.textContent.trim()).to.equal('Paid members');
|
||||
expect(this.element.textContent.trim()).to.equal('Paid subscribers');
|
||||
});
|
||||
|
||||
it('handles free members and labels array', async function () {
|
||||
it('handles free subscribers and labels array', async function () {
|
||||
await render(hbs`{{humanize-recipient-filter "status:free,labels:[one,two]"}}`);
|
||||
expect(this.element.textContent.trim()).to.equal('Free members & Labels: One, Two');
|
||||
expect(this.element.textContent.trim()).to.equal('Free subscribers & Labels: One, Two');
|
||||
});
|
||||
|
||||
it('handles free members and individual labels', async function () {
|
||||
it('handles free subscribers and individual labels', async function () {
|
||||
await render(hbs`{{humanize-recipient-filter "status:free,label:one,label:two"}}`);
|
||||
expect(this.element.textContent.trim()).to.equal('Free members & Labels: One, Two');
|
||||
expect(this.element.textContent.trim()).to.equal('Free subscribers & Labels: One, Two');
|
||||
});
|
||||
|
||||
it('handles paid members and labels array', async function () {
|
||||
it('handles paid subscribers and labels array', async function () {
|
||||
await render(hbs`{{humanize-recipient-filter "status:-free,labels:[one,two]"}}`);
|
||||
expect(this.element.textContent.trim()).to.equal('Paid members & Labels: One, Two');
|
||||
expect(this.element.textContent.trim()).to.equal('Paid subscribers & Labels: One, Two');
|
||||
});
|
||||
|
||||
it('handles paid members and individual labels', async function () {
|
||||
it('handles paid subscribers and individual labels', async function () {
|
||||
await render(hbs`{{humanize-recipient-filter "status:-free,label:one,label:two"}}`);
|
||||
expect(this.element.textContent.trim()).to.equal('Paid members & Labels: One, Two');
|
||||
expect(this.element.textContent.trim()).to.equal('Paid subscribers & Labels: One, Two');
|
||||
});
|
||||
|
||||
it('handles just labels', async function () {
|
||||
|
|
@ -47,14 +47,14 @@ describe('Integration: Helper: humanize-recipient-filter', function () {
|
|||
expect(this.element.textContent.trim()).to.equal('Labels: One, Two');
|
||||
});
|
||||
|
||||
it('handles paid members and products array', async function () {
|
||||
it('handles paid subscribers and products array', async function () {
|
||||
await render(hbs`{{humanize-recipient-filter "status:-free,products:[one,two]"}}`);
|
||||
expect(this.element.textContent.trim()).to.equal('Paid members & Products: One, Two');
|
||||
expect(this.element.textContent.trim()).to.equal('Paid subscribers & Products: One, Two');
|
||||
});
|
||||
|
||||
it('handles paid members and individual products', async function () {
|
||||
it('handles paid subscribers and individual products', async function () {
|
||||
await render(hbs`{{humanize-recipient-filter "status:-free,product:one,product:two"}}`);
|
||||
expect(this.element.textContent.trim()).to.equal('Paid members & Products: One, Two');
|
||||
expect(this.element.textContent.trim()).to.equal('Paid subscribers & Products: One, Two');
|
||||
});
|
||||
|
||||
it('handles just products', async function () {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue