TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Fixed up feature flag and narrow width issues with new post and page table designs

Browse Source 
- Made sure feature flag works for new design with table
- Made adjustments to the narrow width look of the table
- Tested across browers and dark mode
This commit is contained in:
James Morris 2022-08-24 12:34:24 +01:00
parent 9bdba0250a
commit 2724bc0feb
5 changed files with 170 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
ghost/admin/app/components/gh-posts-list-item.hbs
View File

@ -47,104 +47,93 @@
</LinkTo>
{{/if}}
{{#unless @hideStatusColumn }}
{{#if (and this.session.user.isContributor @post.isPublished)}}
<a href={{@post.url}} class="permalink gh-list-data gh-post-list-status" target="_blank" rel="noopener noreferrer">
<div class="flex items-center">
{{#if @post.isScheduled}}
<span class="gh-content-status-scheduled gh-badge nowrap" title="Scheduled" data-tooltip="{{capitalize this.scheduledText}} to {{@post.emailSegment}} members">
Scheduled
{{#if @post.newsletter}}
{{svg-jar "email-stroke" class="gh-post-status-email"}}
{{!-- Statuses for when the feature flag for Member Attribution is on only --}}
{{#if this.feature.memberAttribution}}
{{#unless @hideStatusColumn }}
{{#if (and this.session.user.isContributor @post.isPublished)}}
<a href={{@post.url}} class="permalink gh-list-data gh-post-list-status" target="_blank" rel="noopener noreferrer">
<div class="flex items-center">
{{#if @post.isScheduled}}
<span class="gh-content-status-scheduled gh-badge nowrap" title="Scheduled" data-tooltip="{{capitalize this.scheduledText}} to {{@post.emailSegment}} members">
Scheduled
{{#if @post.newsletter}}
{{svg-jar "email-stroke" class="gh-post-status-email"}}
{{/if}}
</span>
{{/if}}
</span>
{{/if}}
{{#if @post.isDraft}}
<span class="gh-content-status-draft gh-badge gh-badge-pink nowrap">
Draft
</span>
{{/if}}
{{#if @post.isPublished}}
<span class="gh-content-status-published nowrap">
Published
{{#if @post.hasEmail}}
{{svg-jar "email-stroke" class="gh-post-status-email"}}
{{#if @post.isDraft}}
<span class="gh-content-status-draft gh-badge gh-badge-pink nowrap">
Draft
</span>
{{/if}}
</span>
{{/if}}
{{#if @post.isSent}}
<span class="gh-content-status-emailed nowrap">
{{svg-jar "email-stroke" class="gh-post-status-email"}}
</span>
{{/if}}
</div>
</a>
{{else}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-status">
<div class="flex items-center">
{{#if @post.isScheduled}}
<span class="gh-content-status-scheduled gh-badge nowrap" title="Scheduled" data-tooltip="To be published {{if @post.newsletter "& sent at "}}{{capitalize this.scheduledText}} to {{@post.emailSegment}} members">
{{#if this.feature.memberAttribution}}
{{#if @post.isPublished}}
<span class="gh-content-status-published nowrap">
Published
{{#if @post.hasEmail}}
{{svg-jar "email-stroke" class="gh-post-status-email"}}
{{/if}}
</span>
{{/if}}
{{#if @post.isSent}}
<span class="gh-content-status-emailed nowrap">
{{svg-jar "email-stroke" class="gh-post-status-email"}}
</span>
{{/if}}
</div>
</a>
{{else}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-status">
<div class="flex items-center">
{{#if @post.isScheduled}}
<span class="gh-content-status-scheduled gh-badge nowrap" title="Scheduled" data-tooltip="To be published {{if @post.newsletter "& sent at "}}{{capitalize this.scheduledText}} to {{@post.emailSegment}} members">
{{svg-jar "clock" class="gh-post-status-icon"}}
Scheduled
</span>
{{/if}}
Scheduled
</span>
{{/if}}
{{#if @post.isDraft}}
<span class="gh-content-status-draft gh-badge gh-badge-pink nowrap">
{{#if this.feature.memberAttribution}}
{{#if @post.isDraft}}
<span class="gh-content-status-draft gh-badge gh-badge-pink nowrap">
{{svg-jar "pen-stroke" class="gh-post-status-icon"}}
Draft
</span>
{{/if}}
Draft
</span>
{{/if}}
{{#if @post.isPublished}}
<span class="gh-content-status-published nowrap">
{{#if this.feature.memberAttribution}}
{{#if @post.isPublished}}
<span class="gh-content-status-published nowrap">
{{svg-jar "check" class="gh-post-status-icon"}}
Published
{{#if @post.hasEmail}}
&amp; Sent
{{/if}}
</span>
{{/if}}
Published
{{#if @post.hasEmail}}
&amp; sent
{{/if}}
</span>
{{/if}}
{{#if @post.isSent}}
<span class="gh-content-status-emailed nowrap">
{{svg-jar "email-stroke" class="gh-post-status-icon"}}
Sent
</span>
{{/if}}
</div>
</LinkTo>
{{/if}}
{{/unless}}
{{#if @post.isSent}}
<span class="gh-content-status-emailed nowrap">
{{svg-jar "email-stroke" class="gh-post-status-icon"}}
Sent
</span>
{{/if}}
</div>
</LinkTo>
{{/if}}
{{/unless}}
{{/if}}
{{#if this.feature.memberAttribution}}
<a href={{@post.url}} class="permalink gh-list-data gh-post-list-signups" target="_blank" rel="noopener noreferrer">
{{#if (not (eq @post.count.signups 0))}}
<span class="darkgrey fw5 gh-content-attribution-stats">{{@post.count.signups}}</span>
<span class="midgrey-l2 fw4 gh-content-attribution-stats-mobile">{{gh-pluralize @post.count.signups "signup"}}</span>
{{else}}
<span class="midlightgrey">0</span>
{{/if}}
<span class="midlightgrey {{if (not (eq @post.count.signups 0)) 'darkgrey'}} fw5 gh-content-attribution-stats">{{@post.count.signups}}</span>
<span class="midgrey-l2 fw4 gh-content-attribution-stats-mobile">{{gh-pluralize @post.count.signups "signup"}}</span>
</a>
{{/if}}
{{#if this.feature.memberAttribution}}
<a href={{@post.url}} class="permalink gh-list-data gh-post-list-conversions" target="_blank" rel="noopener noreferrer">
{{#if (not (eq @post.count.conversions 0))}}
<span class="darkgrey fw5 gh-content-attribution-stats">{{@post.count.conversions}}</span>
<span class="midgrey-l2 fw4 gh-content-attribution-stats-mobile">{{gh-pluralize @post.count.conversions "conversion"}}</span>
{{else}}
<span class="midlightgrey">0</span>
{{/if}}
<span class="midlightgrey {{if (not (eq @post.count.conversions 0)) 'darkgrey'}} fw5 gh-content-attribution-stats">{{@post.count.conversions}}</span>
<span class="midgrey-l2 fw4 gh-content-attribution-stats-mobile">{{gh-pluralize @post.count.conversions "conversion"}}</span>
</a>
{{/if}}
@ -188,4 +177,74 @@
</LinkTo>
{{/if}}
{{/if}}
{{!-- Statuses for without the Member Attribution feature flag --}}
{{#unless this.feature.memberAttribution}}
{{#unless @hideStatusColumn }}
{{#if (and this.session.user.isContributor @post.isPublished)}}
<a href={{@post.url}} class="permalink gh-list-data gh-post-list-status" target="_blank" rel="noopener noreferrer">
<div class="flex items-center">
{{#if @post.isScheduled}}
<span class="gh-content-status-scheduled gh-badge nowrap" title="Scheduled" data-tooltip="{{capitalize this.scheduledText}} to {{@post.emailSegment}} members">
Scheduled
{{#if @post.newsletter}}
{{svg-jar "email-stroke" class="gh-post-status-email"}}
{{/if}}
</span>
{{/if}}
{{#if @post.isDraft}}
<span class="gh-content-status-draft gh-badge gh-badge-pink nowrap">
Draft
</span>
{{/if}}
{{#if @post.isPublished}}
<span class="gh-content-status-published nowrap">
Published
{{#if @post.hasEmail}}
{{svg-jar "email-stroke" class="gh-post-status-email"}}
{{/if}}
</span>
{{/if}}
{{#if @post.isSent}}
<span class="gh-content-status-emailed nowrap">
{{svg-jar "email-stroke" class="gh-post-status-email"}}
</span>
{{/if}}
</div>
</a>
{{else}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-status">
<div class="flex items-center">
{{#if @post.isScheduled}}
<span class="gh-content-status-scheduled gh-badge nowrap" title="Scheduled" data-tooltip="To be published {{if @post.newsletter "& sent at "}}{{capitalize this.scheduledText}} to {{@post.emailSegment}} members">
Scheduled
</span>
{{/if}}
{{#if @post.isDraft}}
<span class="gh-content-status-draft gh-badge gh-badge-pink nowrap">
Draft
</span>
{{/if}}
{{#if @post.isPublished}}
<span class="gh-content-status-published nowrap">
Published
{{svg-jar "email-stroke" class="gh-post-status-icon"}}
</span>
{{/if}}
{{#if @post.isSent}}
<span class="gh-content-status-emailed nowrap">
{{svg-jar "email-stroke" class="gh-post-status-icon"}}
</span>
{{/if}}
</div>
</LinkTo>
{{/if}}
{{/unless}}
{{/unless}}
</li>

33
ghost/admin/app/styles/layouts/content.css
View File

@ -177,12 +177,12 @@
}
.feature-memberAttribution .gh-posts-opens-header {
width: 140px;
width: 150px;
}
/* .gh-posts-status-header {
.gh-list:not(.feature-memberAttribution) .gh-posts-status-header {
width: 140px;
} */
}
.pages-list .gh-posts-conversions-header,
.pages-list .gh-posts-sends-header {
@ -315,12 +315,16 @@
}
.gh-content-status-emailed {
margin: 0px 6px;
margin: 0;
color: var(--midgrey-d1);
background: var(--whitegrey);
border-radius: 999px;
}
.feature-memberAttribution .gh-content-status-emailed {
margin: 0px 6px;
}
.gh-content-status-emailed svg,
.gh-content-status-published svg,
.gh-content-status-scheduled svg {
@ -453,6 +457,23 @@
/* 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 {
padding-left: 0;
padding-right: 0;
}
.gh-content-status-draft,
.gh-content-status-published,
.gh-content-status-scheduled,
.gh-content-status-emailed {
padding-left: 0;
padding-right: 12px;
}
.gh-posts-list-item {
display: flex;
flex-wrap: wrap;
@ -565,7 +586,7 @@
.gh-content-email-stats-mobile {
display: inherit;
padding: 0 0.25em;
padding: 0 0.33em;
}
.gh-content-attribution-stats {
@ -574,7 +595,7 @@
.gh-content-attribution-stats-mobile {
display: inherit;
padding: 0 0.25em;
padding: 0 0.33em;
}
.posts-list .gh-list-nodata {

4
ghost/admin/app/styles/layouts/dashboard.css
View File

@ -1481,8 +1481,8 @@ Dashboard Misc */
}
.gh-dashboard-rate-amount > span {
background: rgb(213,184,255);
background: linear-gradient(90deg, rgba(213,184,255,1) 0%, rgba(142,66,255,1) 100%);
background: #d5b8ff;
background: linear-gradient(90deg,#fb2d8d,#8e42ff);
border-top-right-radius: 2.5px;
border-bottom-right-radius: 2.5px;
position: absolute;

2
ghost/admin/app/templates/pages.hbs
View File

@ -31,11 +31,11 @@
{{#if this.postsInfinityModel}}
<li class="gh-list-row header">
<div class="gh-list-header gh-posts-title-header">Title</div>
<div class="gh-list-header gh-posts-status-header">{{#unless this.feature.memberAttribution}}Status{{/unless}}</div>
{{#if this.feature.memberAttribution}}
<div class="gh-list-header gh-posts-signups-header">Signups</div>
<div class="gh-list-header gh-posts-conversions-header">Conversions</div>
{{/if}}
<div class="gh-list-header gh-posts-status-header">{{#unless this.feature.memberAttribution}}Status{{/unless}}</div>
</li>
{{/if}}

5
ghost/admin/app/templates/posts.hbs
View File

@ -31,8 +31,8 @@
{{#if this.postsInfinityModel}}
<li class="gh-list-row header">
<div class="gh-list-header gh-posts-title-header">Title</div>
<div class="gh-list-header gh-posts-status-header">{{#unless this.feature.memberAttribution}}Status{{/unless}}</div>
{{#if this.feature.memberAttribution}}
<div class="gh-list-header gh-posts-status-header"></div>
<div class="gh-list-header gh-posts-signups-header">Signups</div>
<div class="gh-list-header gh-posts-conversions-header">Paid</div>
{{/if}}
@ -40,6 +40,9 @@
<div class="gh-list-header gh-posts-sends-header">Sends</div>
<div class="gh-list-header gh-posts-opens-header">Opens</div>
{{/if}}
{{#unless this.feature.memberAttribution}}
<div class="gh-list-header gh-posts-status-header">Status</div>
{{/unless}}
</li>
{{/if}}