From 7f6aa78c010361a047c6f2d9850e3846158721c3 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 23 Aug 2022 12:22:46 +0100
Subject: [PATCH] Tweaking styles for post and pages to work better with more
 data

refs https://github.com/TryGhost/Team/issues/1818
---
 .../app/components/gh-posts-list-item.hbs     | 18 +++++++---
 ghost/admin/app/styles/components/lists.css   | 25 +++++++------
 ghost/admin/app/styles/layouts/content.css    | 36 +++++++++++++++++--
 3 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/ghost/admin/app/components/gh-posts-list-item.hbs b/ghost/admin/app/components/gh-posts-list-item.hbs
index 000aed93f8..fddecdebde 100644
--- a/ghost/admin/app/components/gh-posts-list-item.hbs
+++ b/ghost/admin/app/components/gh-posts-list-item.hbs
@@ -56,6 +56,8 @@
                             <span class="darkgrey fw5 gh-content-email-stats">{{format-number @post.email.emailCount}}</span>
                             <span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{gh-pluralize @post.email.emailCount "send"}}</span>
                         </span>
+                    {{else}}
+                        {{#if this.feature.memberAttribution}}<span class="gh-list-nodata">&mdash;</span>{{/if}}
                     {{/if}}
                 </div>
             </LinkTo>
@@ -72,20 +74,28 @@
                         </span>
                         <span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{@post.email.openRate}}% opens</span>
                     </div>
+                {{else}}
+                    {{#if this.feature.memberAttribution}}<span class="gh-list-nodata">&mdash;</span>{{/if}}
                 {{/if}}
             </LinkTo>
         {{/if}}
     {{/if}}
 
     {{#if this.feature.memberAttribution}}
-        <a href={{@post.url}} class="permalink gh-list-data gh-post-list-status" target="_blank" rel="noopener noreferrer">
-          {{@post.count.signups}}
+        <a href={{@post.url}} class="permalink gh-list-data gh-post-list-signups" target="_blank" rel="noopener noreferrer">
+            <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>
+            {{!-- TODO: How to show this when there is no data?
+            <span class="gh-list-nodata">&mdash;</span> --}}
         </a>
     {{/if}}
 
     {{#if this.feature.memberAttribution}}
-        <a href={{@post.url}} class="permalink gh-list-data gh-post-list-status" target="_blank" rel="noopener noreferrer">
-          {{@post.count.conversions}}
+        <a href={{@post.url}} class="permalink gh-list-data gh-post-list-conversions" target="_blank" rel="noopener noreferrer">
+            <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>
+            {{!-- TODO: How to show this when there is no data?
+            <span class="gh-list-nodata">&mdash;</span> --}}
         </a>
     {{/if}}
 
diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css
index 560200bd84..26caaabfc2 100644
--- a/ghost/admin/app/styles/components/lists.css
+++ b/ghost/admin/app/styles/components/lists.css
@@ -184,11 +184,20 @@ ul.nostyle li {
     color: var(--black);
 }
 
+.gh-list-nodata {
+    font-size: 1.5rem;
+    letter-spacing: 0;
+    text-decoration: none;
+    min-width: 54px;
+    color: var(--lightgrey);
+    font-weight: 500;
+}
+
 
 /* Helpers for smaller sizes
 /* --------------------------------------------------- */
 
-@media (max-width: 1000px) {
+@media (max-width: 1200px) {
     .gh-list {
         border-bottom: none;
     }
@@ -201,6 +210,10 @@ ul.nostyle li {
     .gh-list-hidecell-m {
         display: none;
     }
+
+    .gh-list .gh-list-nodata {
+        display: none;
+    }
 }
 
 @media (max-width: 800px) {
@@ -447,13 +460,3 @@ ul.nostyle li {
         height: calc(100vh - 96px);
     }
 }
-
-
-.gh-list-nodata {
-    font-size: 1.5rem;
-    letter-spacing: 0;
-    text-decoration: none;
-    min-width: 54px;
-    color: var(--lightgrey);
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index 6cf0b291a7..9945fde3ec 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -205,7 +205,9 @@
 .gh-post-list-updated,
 .gh-post-list-author,
 .gh-post-list-recipients,
-.gh-post-list-opens {
+.gh-post-list-opens,
+.gh-post-list-signups,
+.gh-post-list-conversions {
     color: var(--middarkgrey);
     font-size: 1.3rem;
 }
@@ -251,6 +253,10 @@
     display: none;
 }
 
+.gh-content-attribution-stats-mobile {
+    display: none;
+}
+
 .gh-content-status-draft,
 .gh-content-status-published,
 .gh-content-status-scheduled,
@@ -348,7 +354,7 @@
 }
 
 /* Mobile style of post list */
-@media (max-width: 1000px) {
+@media (max-width: 1200px) {
     .gh-posts-list-item {
         display: flex;
         flex-wrap: wrap;
@@ -389,7 +395,9 @@
 
     .gh-post-list-status,
     .gh-post-list-recipients,
-    .gh-post-list-opens {
+    .gh-post-list-opens,
+    .gh-post-list-signups,
+    .gh-post-list-conversions {
         display: inline-block;
         border: none;
         padding: 0 4px 20px 0;
@@ -412,6 +420,14 @@
         order: 5;
     }
 
+    .gh-post-list-signups {
+        order: 6;
+    }
+
+    .gh-post-list-conversions {
+        order: 7;
+    }
+
     .gh-post-list-updated {
         display: inline-block;
         order: 6;
@@ -451,6 +467,20 @@
 
     .gh-content-email-stats-mobile {
         display: inherit;
+        padding: 0 0.25em;
+    }
+
+    .gh-content-attribution-stats {
+        display: none;
+    }
+
+    .gh-content-attribution-stats-mobile {
+        display: inherit;
+        padding: 0 0.25em;
+    }
+
+    .posts-list .gh-list-nodata {
+        display: none;
     }
 }