From 7af8ef0c10f6a4c2dbd9abfabc851e4d064faac8 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 2 Aug 2022 18:11:44 +0100
Subject: [PATCH] Tidied up the comments post title style for events

- Following styling from email events
- Includes other tweaks to bring consistency
- Added in text truncating for member activity page

refs https://github.com/TryGhost/Team/issues/1731
---
 .../components/dashboard/charts/recents.hbs   |  9 +++++---
 .../app/components/member/activity-feed.hbs   | 14 +++++------
 .../components/members-activity/table-row.hbs |  3 +++
 ghost/admin/app/styles/layouts/dashboard.css  |  7 +++++-
 .../app/styles/layouts/member-activity.css    |  2 +-
 ghost/admin/app/styles/layouts/members.css    | 23 +++++++++++++++----
 6 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/charts/recents.hbs b/ghost/admin/app/components/dashboard/charts/recents.hbs
index 4937739b7a..eb7d77d3e6 100644
--- a/ghost/admin/app/components/dashboard/charts/recents.hbs
+++ b/ghost/admin/app/components/dashboard/charts/recents.hbs
@@ -91,10 +91,10 @@
                             {{#if eventsFetcher.data}}
                                 {{#each eventsFetcher.data as |event|}}
                                     {{#let (parse-member-event event eventsFetcher.hasMultipleNewsletters) as |parsedEvent|}}
-                                        <LinkTo class="gh-dashboard-list-item member-details" @route="member" @model="{{parsedEvent.memberId}}" data-test-dashboard-member-activity-item>
+                                        <div class="gh-dashboard-list-item member-details">
                                             <div class="gh-dashboard-list-item-sub">
                                                 <GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w8 h8 mr3 flex-shrink-0" />
-                                                <span class="gh-dashboard-list-text">{{parsedEvent.subject}}</span>
+                                                <LinkTo class="gh-dashboard-list-text" @route="member" @model="{{parsedEvent.memberId}}" data-test-dashboard-member-activity-item>{{parsedEvent.subject}}</LinkTo>
                                             </div>
                                             <div class="gh-dashboard-list-item-sub">
                                                 {{svg-jar parsedEvent.icon}}
@@ -102,12 +102,15 @@
                                                     {{capitalize-first-letter parsedEvent.action}}
                                                     {{parsedEvent.object}}
                                                     {{parsedEvent.info}}
+                                                    {{#if parsedEvent.subtitle}}
+                                                        "<a class="ghost-memebrs-activity-subtitle" href="{{parsedEvent.url}}" target="_blank" rel="noopener noreferrer">{{parsedEvent.subtitle}}</a>"
+                                                    {{/if}}
                                                 </span>
                                             </div>
                                             <div class="gh-dashboard-list-item-sub">
                                                 <span class="gh-dashboard-list-subtext">{{moment-format parsedEvent.timestamp "DD MMM YYYY HH:mm"}}</span>
                                             </div>
-                                        </LinkTo>
+                                        </div>
                                     {{/let}}
                                 {{/each}}
                             {{else}}
diff --git a/ghost/admin/app/components/member/activity-feed.hbs b/ghost/admin/app/components/member/activity-feed.hbs
index daee7699b8..0473afdbd3 100644
--- a/ghost/admin/app/components/member/activity-feed.hbs
+++ b/ghost/admin/app/components/member/activity-feed.hbs
@@ -23,8 +23,8 @@
                                             </div>
                                             <div class="gh-member-feed-detail">
                                                 <div class="gh-member-feed-event">
-                                                    <div>
-                                                         <span class="gh-members-activity-description">
+                                                    <span class="gh-member-feed-event-inner">
+                                                        <span class="gh-members-activity-description">
                                                             {{capitalize-first-letter event.action}}
                                                             {{event.object}}
                                                         </span>
@@ -32,12 +32,10 @@
                                                             "<GhEmailPreviewLink @data={{event.email}} />"
                                                         {{/if}}
                                                         {{event.info}}
-                                                    </div>
-                                                    {{#if event.subtitle}}
-                                                        <a class="ghost-memebrs-activity-subtitle" href="{{event.url}}">
-                                                            {{event.subtitle}}
-                                                        </a>
-                                                    {{/if}}
+                                                        {{#if event.subtitle}}
+                                                            "<a class="ghost-memebrs-activity-subtitle" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.subtitle}}</a>"
+                                                        {{/if}}
+                                                    </span>
                                                 </div>
                                                 <div class="gh-member-feed-time">
                                                     {{moment-from-now event.timestamp}}
diff --git a/ghost/admin/app/components/members-activity/table-row.hbs b/ghost/admin/app/components/members-activity/table-row.hbs
index 89a3f0f806..8a890dea19 100644
--- a/ghost/admin/app/components/members-activity/table-row.hbs
+++ b/ghost/admin/app/components/members-activity/table-row.hbs
@@ -27,6 +27,9 @@
                         "<GhEmailPreviewLink @data={{event.email}} />"
                     {{/if}}
                     <span class="highlight">{{event.info}}</span>
+                    {{#if event.subtitle}}
+                        "<a class="ghost-memebrs-activity-subtitle" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.subtitle}}</a>"
+                    {{/if}}
                 </div>
             </div>
         </div>
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 64b6f2f7c1..832b02a0c2 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -713,6 +713,11 @@ Dashboard List */
     overflow: hidden;
 }
 
+.gh-dashboard-list-subtext > a {
+    color: var(--black);
+    font-weight: 600;
+}
+
 .gh-dashboard-list-item svg {
     width: 20px;
     min-width: 20px;
@@ -1184,7 +1189,7 @@ Dashboard Recents */
 
 .gh-dashboard-recents-activity .gh-dashboard-list-header,
 .gh-dashboard-recents-activity .gh-dashboard-list-item {
-    grid-template-columns: 35% 35% 30%;
+    grid-template-columns: 30% 40% 30%;
 }
 
 .gh-dashboard-recents-activity .gh-dashboard-list-title:nth-child(2),
diff --git a/ghost/admin/app/styles/layouts/member-activity.css b/ghost/admin/app/styles/layouts/member-activity.css
index d7fbb2a7d6..87d2d02103 100644
--- a/ghost/admin/app/styles/layouts/member-activity.css
+++ b/ghost/admin/app/styles/layouts/member-activity.css
@@ -158,7 +158,7 @@
 }
 
 .gh-members-activity-event > a {
-    font-weight: 500;
+    font-weight: 600;
     color: var(--black);
 }
 
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 3714ae2191..87e3b37338 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1131,6 +1131,7 @@ textarea.gh-member-details-textarea {
     display: flex;
     flex-grow: 1;
     justify-content: space-between;
+    width: 0;
 }
 
 @media (max-width: 600px) {
@@ -1140,13 +1141,24 @@ textarea.gh-member-details-textarea {
 }
 
 .gh-member-feed-event {
-    display: inline-block;
-    color: var(--middarkgrey);
-    font-weight: 500;
-    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
 }
 
-.gh-member-feed-event:first-letter {
+.gh-member-feed-event-inner {
+    color: var(--middarkgrey);
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden; 
+    padding-right: 1rem;
+}
+
+.gh-member-feed-event-inner:first-letter {
     text-transform: uppercase;
 }
 
@@ -1171,6 +1183,7 @@ textarea.gh-member-details-textarea {
     font-weight: 400;
     font-size: 13px;
     color: var(--midgrey);
+    white-space: nowrap;
 }
 
 .gh-member-feed-footer {