Fixed up the post analytics page so it didn't break at narrower viewports

- Some layout problems at narrower viewports
- Followed dashboard convention with stacking metrics when narrow
- Stacking resources too

refs https://github.com/TryGhost/Team/issues/1937

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

@@ -621,6 +621,10 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     .pages-list .gh-list-nodata {
         display: none;
     }
+
+    .gh-post-analytics-item .hide-when-small {
+        display: none;
+    }
 }
 
 @media (max-width: 800px) {
@@ -738,10 +742,9 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 
 .gh-post-analytics-box {
     position: relative;
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     margin: 0 0 2.4rem;
-    padding: 2.4rem;
+    padding: 2.8rem 2.4rem;
     background: var(--main-color-content-greybg);
     border-radius: var(--border-radius);
 }
@@ -752,8 +755,9 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 }
 
 .gh-post-analytics-box.resources {
-    grid-template-columns: 1fr 1fr;
+    display: flex;
-    grid-gap: 24px;
+    flex-direction: row;
+    gap: 24px;
 }
 
 .gh-post-analytics-resource {
@@ -777,6 +781,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 }
 
 .gh-post-analytics-resource {
+    flex: 1;
     display: grid;
     grid-template-columns: 2fr 3fr;
     grid-gap: 24px;
@@ -811,8 +816,11 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 }
 
 .gh-post-analytics-item {
-    border-left: 1px solid var(--whitegrey-d2);
+    flex: 1;
+    border-left: 1px solid var(--whitegrey-d1);
     padding-left: 2rem;
+    padding-right: 2rem;
+    white-space: nowrap;
 }
 
 .gh-post-analytics-item:first-child {
@@ -821,15 +829,21 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 }
 
 .gh-post-analytics-item h3 {
-    margin: 0 0 10px;
+    margin: 0 0 4px;
     color: var(--black);
-    font-size: 2.2rem;
+    font-size: 2.4rem;
     font-weight: 700;
     letter-spacing: -.4px;
     line-height: 1em;
     white-space: nowrap;
 }
 
+.gh-post-analytics-item h3 sup {
+    top: -0.2em;
+    font-size: 1.7rem;
+    margin: 0 0 0 2px;
+}
+
 .gh-post-analytics-item p {
     margin: 0;
     color: var(--midgrey);
@@ -842,6 +856,10 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     font-weight: 600;
 }
 
+.gh-post-analytics-item p:first-letter {
+    text-transform: uppercase;
+}
+
 .gh-links-list {
     margin: 0;
     padding: 20px;
@@ -1027,4 +1045,43 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 
 .gh-posts-list-item-labs .gh-post-list-cta svg path {
     stroke-width: 2;
+}
+
+@media screen and (max-width: 1080px) {
+    .gh-post-analytics-box.resources {
+        flex-direction: column;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .gh-post-analytics-box {
+        flex-direction: column;
+    }
+
+    .gh-post-analytics-item {
+        border-left: 0 none;
+        border-bottom: 1px solid var(--whitegrey-d1);
+        padding-left: 0;
+        padding-bottom: 2rem;
+        padding-top: 2rem;      
+    }
+
+    .gh-post-analytics-item:first-child {
+        padding-top: 0;
+    }
+
+    .gh-post-analytics-item:last-child {
+        padding-bottom: 0;
+        border-bottom: 0 none;
+    }
+
+    .gh-post-analytics-item h3 {
+        font-size: 2.8rem;
+        margin-bottom: 2px;
+    }
+
+    .gh-post-analytics-item h3 sup {
+        top: -0.3em;
+        font-size: 1.8rem;
+    }
 }

ghost/admin/app/templates/posts/analytics.hbs

@@ -30,7 +30,7 @@
                 on
                 {{moment-format publishedAt "D MMM YYYY"}}
                 at
-                {{moment-format publishedAt "HH:mm"}}.
+                {{moment-format publishedAt "HH:mm"}}
             {{/let}}
         </p>
     </GhCanvasHeader>
@@ -44,20 +44,20 @@
             <p>Sent</p>
         </div>
         <div class="gh-post-analytics-item">
-            <h3>{{this.post.email.openRate}}%</h3>
+            <h3>{{this.post.email.openRate}}<sup>%</sup></h3>
             <p><strong>{{format-number this.post.email.openedCount}}</strong> opened</p>
         </div>
         <div class="gh-post-analytics-item">
-            <h3>{{this.post.clickRate}}%</h3>
+            <h3>{{this.post.clickRate}}<sup>%</sup></h3>
             <p><strong>{{format-number this.post.count.clicks}}</strong> clicked</p>
         </div>
         <div class="gh-post-analytics-item">
             <h3>{{format-number this.post.count.signups}}</h3>
-            <p>Free {{gh-pluralize this.post.count.signups "signup" without-count=true}}</p>
+            <p><span class="hide-when-small">Free </span>{{gh-pluralize this.post.count.signups "signup" without-count=true}}</p>
         </div>
         <div class="gh-post-analytics-item">
             <h3>{{format-number this.post.count.conversions}}</h3>
-            <p>Paid {{gh-pluralize this.post.count.conversions "conversion" without-count=true}}</p>
+            <p><span class="hide-when-small">Paid </span>{{gh-pluralize this.post.count.conversions "conversion" without-count=true}}</p>
         </div>
     </div>