mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
Tweaks to recents box for new Dashboard based on feedback
refs: https://github.com/TryGhost/Team/issues/1531 - made whole row clickable - added in hover state based on posts table style - added in event icons for activity - increased row spacing - other subtle tweaks based on feedback
This commit is contained in:
James Morris
parent
adeef741fb
commit
692c7619ef
@ -21,11 +21,9 @@
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-body">
|
||||
{{#each this.posts as |post|}}
|
||||
<div class="gh-dashboard5-list-item">
|
||||
<LinkTo class="gh-dashboard5-list-item permalink" @route="editor.edit" @models={{array post.displayName post.id}}>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
<LinkTo class="gh-dashboard5-list-post permalink" @route="editor.edit" @models={{array post.displayName post.id}}>
|
||||
{{post.title}}
|
||||
</LinkTo>
|
||||
<span class="gh-dashboard5-list-text">{{post.title}}</span>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
{{!-- DEMO <span class="gh-dashboard5-metric-minivalue">{{format-number 3294}}</span> --}}
|
||||
@ -39,7 +37,7 @@
|
||||
<span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
<div class="gh-dashboard5-list-empty">
|
||||
<p>No published posts yet.</p>
|
||||
@ -76,26 +74,23 @@
|
||||
{{#if eventsFetcher.data}}
|
||||
{{#each eventsFetcher.data as |event|}}
|
||||
{{#let (parse-member-event event eventsFetcher.hasMultipleNewsletters) as |parsedEvent|}}
|
||||
<div class="gh-dashboard5-list-item" data-test-dashboard-member-activity-item>
|
||||
<LinkTo class="gh-dashboard5-list-item member-details" @route="member" @model="{{parsedEvent.memberId}}" data-test-dashboard-member-activity-item>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
<LinkTo class="member-details" @route="member" @model="{{parsedEvent.memberId}}">
|
||||
<GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w8 h8 mr3 flex-shrink-0" />
|
||||
{{parsedEvent.subject}}
|
||||
</LinkTo>
|
||||
<GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w8 h8 mr3 flex-shrink-0" />
|
||||
<span class="gh-dashboard5-list-text">{{parsedEvent.subject}}</span>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
{{!-- ICON {{svg-jar parsedEvent.icon}} --}}
|
||||
<span>
|
||||
{{svg-jar parsedEvent.icon}}
|
||||
<span class="gh-dashboard5-list-subtext">
|
||||
{{capitalize-first-letter parsedEvent.action}}
|
||||
{{parsedEvent.object}}
|
||||
{{parsedEvent.info}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
{{!-- FROM TIME <span class="gh-dashboard5-list-date">{{moment-from-now parsedEvent.timestamp}}</span> --}}
|
||||
{{moment-format event.timestamp "D MMM YYYY HH:mm"}}
|
||||
<span class="gh-dashboard5-list-subtext">{{moment-format event.timestamp "D MMM YYYY HH:mm"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</LinkTo>
|
||||
{{/let}}
|
||||
{{/each}}
|
||||
{{else}}
|
||||
|
||||
@ -1151,4 +1151,8 @@ kbd {
|
||||
.gh-dashboard5-staff-picks .gh-dashboard5-resource-body,
|
||||
.gh-dashboard5-resource-box.is-secondary .gh-dashboard5-resource-footer {
|
||||
border-color: #2c2e32;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-item:hover {
|
||||
background: #1c1e21;
|
||||
}
|
||||
|
||||
@ -608,6 +608,8 @@ Dashboard v5 Metric */
|
||||
.gh-dashboard5-metric-minivalue {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--darkgrey);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-dashboard5-metric-extra {
|
||||
@ -673,18 +675,35 @@ Dashboard v5 List */
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-item a {
|
||||
|
||||
.gh-dashboard5-list-item:hover {
|
||||
background: linear-gradient(315deg,#fafafb 60%,#fff);
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-text {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
color: var(--darkgrey);
|
||||
padding: 0 64px 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-subtext {
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
color: var(--middarkgrey);
|
||||
text-decoration: none;
|
||||
padding: 0 64px 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-item svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 0.5rem 0 -4px;
|
||||
}
|
||||
|
||||
@ -991,8 +1010,15 @@ Dashboard v5 Recents */
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-body {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-item {
|
||||
height: 100%;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-item a > span {
|
||||
@ -1038,7 +1064,7 @@ Dashboard v5 Recents */
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-loading {
|
||||
min-height: 200px;
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -1059,10 +1085,6 @@ Dashboard v5 Recents */
|
||||
margin-left: -4px; /* grid layout adjustments */
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents-activity .gh-dashboard5-list-item-sub:nth-child(2) > span {
|
||||
color: #626d79;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 What's New */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user