0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00

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
This commit is contained in:
James Morris 2022-08-02 18:11:44 +01:00
parent 577a749e12
commit 7af8ef0c10
6 changed files with 40 additions and 18 deletions

View file

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

View file

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

View file

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

View file

@ -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),

View file

@ -158,7 +158,7 @@
}
.gh-members-activity-event > a {
font-weight: 500;
font-weight: 600;
color: var(--black);
}

View file

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