From f464bfe0857f5195269117cca13d90d22435e5d2 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 18 Feb 2021 12:27:29 +0100
Subject: [PATCH] Applied mobile styles to Dashboard

---
 ghost/admin/app/styles/layouts/dashboard.css | 35 ++++++++++++++++++--
 ghost/admin/app/templates/dashboard.hbs      |  5 ++-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 52740552d0..3d410fd1a4 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -59,7 +59,7 @@
 
 .gh-dashboard-container.col-2 {
     grid-template-columns: 1fr 1fr;
-    grid-gap: 32px;
+    grid-gap: var(--dashboard-gap);
 }
 
 /* Generic box containers */
@@ -70,7 +70,7 @@
     border: 1px solid var(--whitegrey);
     border-radius: 3px;
     padding: 24px;
-    margin-bottom: 32px;
+    margin-bottom: var(--dashboard-gap);
 }
 
 .gh-dashboard-box.grey {
@@ -401,4 +401,35 @@
     margin-left: 12px;
     color: var(--midgrey);
     font-size: 1.3rem;
+}
+
+@media (max-width: 1240px) {
+    .gh-dashboard {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .gh-dashboard-area.charts {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .gh-dashboard-summary {
+        flex-basis: 140px;
+    }
+
+    .gh-dashboard-summary:not(.small) .data {
+        font-size: 3.4rem;
+    }
+
+    .gh-dashboard-summary:not(.small) .growth {
+        font-size: 1.5rem;
+    }
+
+    .gh-dashboard-container.col-2 {
+        grid-template-columns: 1fr;
+        grid-gap: 0;
+    }
+
+    .gh-dashboard-area.charts {
+        min-height: 240px;
+    }
 }
\ No newline at end of file
diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs
index 807b086054..9218014950 100644
--- a/ghost/admin/app/templates/dashboard.hbs
+++ b/ghost/admin/app/templates/dashboard.hbs
@@ -8,7 +8,10 @@
     <div class="view-container gh-dashboard">
         <section class="gh-dashboard-area charts">
             <div class="gh-dashboard-box mrr">
-                <h4 class="gh-dashboard-header">MRR</h4>
+                <div class="flex items-center justify-between">
+                    <h4 class="gh-dashboard-header">MRR</h4>
+                    <h4 class="gh-dashboard-header secondary">30 days</h4>
+                </div>
                 <div class="gh-dashboard-chart-container">
                     <div class="gh-dashboard-summary">
                         <div class="data">$359</div>