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

- 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

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

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

ghost/admin/app/styles/layouts/content.css

@@ -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 {

ghost/admin/app/styles/layouts/dashboard.css

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

ghost/admin/app/templates/pages.hbs

@@ -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}}
 

ghost/admin/app/templates/posts.hbs

@@ -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}}