From cda3bdda6265489233a4d29a03cdf9e58875f688 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 17 Feb 2021 16:46:12 +0100
Subject: [PATCH] Basic design for dashboard activity

---
 ghost/admin/app/styles/layouts/dashboard.css | 55 ++++++++++++++++++--
 ghost/admin/app/templates/dashboard.hbs      | 27 +++++++++-
 2 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 2fa72dd764..52740552d0 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -18,7 +18,7 @@
     text-transform: uppercase;
     font-weight: 500;
     letter-spacing: .2px;
-    margin: -8px 0 4px;
+    margin: -4px 0 4px;
     padding: 0;
     color: var(--black);
 }
@@ -133,7 +133,7 @@
 .gh-dashboard-area.charts .gh-dashboard-box {
     border: none;
     border-radius: 0;
-    padding: 16px 0 0 24px;
+    padding: 22px 0 0 24px;
     margin: 0;
 }
 
@@ -265,7 +265,7 @@
 }
 
 .gh-dashboard-top-members {
-    display: flex;  
+    display: flex;
     flex-direction: column;
     align-items: stretch;
     list-style: none;
@@ -352,4 +352,53 @@
     grid-row: 3 / 4;
     padding: 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;
 }
\ No newline at end of file
diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs
index 09213b12a2..807b086054 100644
--- a/ghost/admin/app/templates/dashboard.hbs
+++ b/ghost/admin/app/templates/dashboard.hbs
@@ -130,7 +130,32 @@
             <div class="gh-dashboard-box grey activity-feed">
                 <h4 class="gh-dashboard-header">Activity feed</h4>
                 <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>
         </section>