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

Basic design for dashboard activity

Browse source
This commit is contained in:
Peter Zimon 2021-02-17 16:46:12 +01:00
parent 734674d299
commit cda3bdda62
2 changed files with 78 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
letter-spacing: .2px; letter-spacing: .2px;
margin: -8px 0 4px; margin: -4px 0 4px;
padding: 0; padding: 0;
color: var(--black); color: var(--black);
} }
@ -133,7 +133,7 @@
.gh-dashboard-area.charts .gh-dashboard-box { .gh-dashboard-area.charts .gh-dashboard-box {
border: none; border: none;
border-radius: 0; border-radius: 0;
padding: 16px 0 0 24px; padding: 22px 0 0 24px;
margin: 0; margin: 0;
} }
@ -353,3 +353,52 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.gh-dashboard-activity-feed {
display: flex;
flex-direction: column;
align-items: stretch;
list-style: none;
padding: 0;
margin: 4px 0 0;
width: 100%;
}
.gh-dashboard-activity-feed li {
display: flex;
align-items: baseline;
flex-grow: 1;
width: 100%;
justify-content: space-between;
margin: 8px 0;
padding: 0;
}
.gh-dashboard-activity-feed .activity {
display: flex;
align-items: baseline;
margin-right: 32px;
color: var(--midgrey);
line-height: 1.5em;
font-size: 1.3rem;
}
.gh-dashboard-activity-feed .member {
font-weight: 500;
color: var(--black);
font-size: 1.4rem;
}
.gh-dashboard-activity-feed .activity svg {
width: 12px;
height: 12px;
margin-right: 8px;
margin-top: 1px;
}
.gh-dashboard-activity-feed .time {
white-space: nowrap;
margin-left: 12px;
color: var(--midgrey);
font-size: 1.3rem;
}

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

@ -130,7 +130,32 @@
<div class="gh-dashboard-box grey activity-feed"> <div class="gh-dashboard-box grey activity-feed">
<h4 class="gh-dashboard-header">Activity feed</h4> <h4 class="gh-dashboard-header">Activity feed</h4>
<div class="content"> <div class="content">
Jake subscribed (MRR +$38) / 29 mins ago <ul class="gh-dashboard-activity-feed">
<li>
<div class="activity">
<div>
<span class="member">Kadin Levin</span> subscribed <span class="highlight">(MRR +$38)</span>
</div>
</div>
<span class="time">29 mins ago</span>
</li>
<li>
<div class="activity">
<div>
<span class="member">Terry Stanton</span> subscribed <span class="highlight">(MRR +$38)</span>
</div>
</div>
<span class="time">1 day ago</span>
</li>
<li>
<div class="activity">
<div>
<span class="member">Angel Rhiel Madsen</span> subscribed <span class="highlight">(MRR +$38)</span>
</div>
</div>
<span class="time">3 days ago</span>
</li>
</ul>
</div> </div>
</div> </div>
</section> </section>