Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Updated recent mentions dashboard widget design

Browse source 
refs https://github.com/TryGhost/Team/issues/2608
This commit is contained in:
Djordje Vlaisavljevic 2023-03-01 23:15:39 +00:00
parent a911366dae
commit 5e9fe95443
2 changed files with 46 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
ghost/admin/app/styles/layouts/dashboard.css
View file

@ -2620,8 +2620,11 @@ Dashboard Mentions */
}
.gh-dashboard-mentions {
box-shadow: var(--box-shadow-m);
min-width: 300px;
max-width: 400px;
padding: 20px;
border-radius: 3px;
}
.gh-dashboard-mentions-header {
@ -2629,7 +2632,9 @@ Dashboard Mentions */
align-items: center;
justify-content: space-between;
line-height: 1;
margin-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid var(--whitegrey);
padding-bottom: 16px;
}
.gh-dashboard-mentions {
@ -2664,23 +2669,26 @@ Dashboard Mentions */
}
.gh-dashboard-mention {
display: flex;
/* display: flex;
flex-direction: column;
align-items: flex-start;
align-items: flex-start; */
/* display: grid; */
/* grid-template-columns: 20px min-content min-content min-content;
grid-template-rows: 20px auto auto auto;
grid-column-gap: 4px; */
display: block;
padding: 4px 0;
padding: 6px 0;
font-size: 1.4rem;
line-height: 1;
line-height: 1.2;
}
.gh-dashboard-mention-content {
display: flex;
width: 100%;
display: grid;
grid-template-columns: 20px min-content 16px auto;
grid-template-rows: 20px auto auto auto;
/* grid-column-gap: 4px; */
align-items: center;
color: var(--midlightgrey);
font-weight: 500;
}
.gh-dashboard-mention-title {
@ -2690,6 +2698,11 @@ Dashboard Mentions */
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 4px;
margin-left: 8px;
}
.gh-dashboard-mention-content .gh-mention-link-icon {
margin: 0;
}
.gh-dashboard-mention-timestamp {
@ -2702,11 +2715,13 @@ Dashboard Mentions */
}
.gh-dashboard-mention-target {
color: var(--darkgrey);
/* color: var(--darkgrey); */
color: #7c8b9a;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 4px;
font-weight: 400;
}
.gh-dashboard-mentions .gh-dashboard-list-footer {

38
ghost/admin/app/templates/dashboard.hbs
View file

@ -29,22 +29,28 @@
<LinkTo @route="mentions" class="gh-dashboard-mentions-see-all">View all mentions &rarr;</LinkTo>
</div>
<div>
{{#each this.mentions as |mention|}}
<a href="{{mention.source}}" class="gh-dashboard-mention" rel="noreferrer noopener" target="_blank">
<div class="gh-dashboard-mention-content">
<img src="{{ or mention.sourceFavicon 'assets/img/orb-squircle.png'}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0">
<span class="gh-dashboard-mention-title">{{or mention.sourceTitle mention.sourceSiteTitle}}</span>
<span>mentioned</span>
{{#if (gt mention.mentions.length 1) }}
<span class="gh-dashboard-mention-target">{{mention.mentions.length}} links</span>
{{else}}
<span class="gh-dashboard-mention-target">{{if mention.resource mention.resource.name 'a link'}}</span>
{{/if}}
</div>
<span class="gh-dashboard-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
</a>
{{/each}}
{{#if this.mentions}}
{{#each this.mentions as |mention|}}
<a href="{{mention.source}}" class="gh-dashboard-mention" rel="noreferrer noopener" target="_blank">
<div class="gh-dashboard-mention-content">
<img src="{{ or mention.sourceFavicon 'assets/img/orb-squircle.png'}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0">
<span class="gh-dashboard-mention-title">{{or mention.sourceSiteTitle mention.sourceSiteTitle}}</span>
{{!-- <span>mentioned</span> --}}
<div class="gh-mention-link-icon">
{{svg-jar "twitter-link"}}
</div>
{{#if (gt mention.mentions.length 1) }}
<span class="gh-dashboard-mention-target">{{mention.mentions.length}} links</span>
{{else}}
<span class="gh-dashboard-mention-target">{{if mention.resource mention.resource.name 'a link'}}</span>
{{/if}}
<span class="gh-dashboard-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
</div>
</a>
{{/each}}
{{else}}
Empty state
{{/if}}
</div>
</div>
</dropdown.Content>