From 4a70e4393099e54ce9789ac5c7ca423e93aa92ee Mon Sep 17 00:00:00 2001
From: Lexi <git@nordgedanken.dev>
Date: Thu, 2 May 2024 17:37:14 +0200
Subject: Improve the heatmap layout

---
 MatrixUtils.Web/Pages/Tools/PolicyListActivity.razor.css | 12 ++++++++++++
 MatrixUtils.Web/Shared/ActivityGraph.razor               |  9 ++++-----
 MatrixUtils.Web/Shared/ActivityGraph.razor.css           |  8 +++++++-
 3 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 MatrixUtils.Web/Pages/Tools/PolicyListActivity.razor.css

diff --git a/MatrixUtils.Web/Pages/Tools/PolicyListActivity.razor.css b/MatrixUtils.Web/Pages/Tools/PolicyListActivity.razor.css
new file mode 100644
index 0000000..443fdb5
--- /dev/null
+++ b/MatrixUtils.Web/Pages/Tools/PolicyListActivity.razor.css
@@ -0,0 +1,12 @@
+h3 {
+    font-weight: bold;
+    margin-top: 3rem;
+}
+
+h3:first-child {
+    margin-top: 1rem;
+}
+
+h5 {
+    margin-top: 1.5rem;
+}
diff --git a/MatrixUtils.Web/Shared/ActivityGraph.razor b/MatrixUtils.Web/Shared/ActivityGraph.razor
index 51fb539..fa648c7 100644
--- a/MatrixUtils.Web/Shared/ActivityGraph.razor
+++ b/MatrixUtils.Web/Shared/ActivityGraph.razor
@@ -5,7 +5,7 @@
 @if (Data is { Count: > 0 })
 {
     @*                                                      12*5=60 *@
-    <div style="display: grid; grid-template-columns: 35px repeat(60, 1.5em); grid-template-rows: 1.5em repeat(7, 1.5em); gap: 0;">
+    <div class="activity-graph" style="display: grid; grid-template-columns: 35px repeat(55, 1.5em); grid-template-rows: 1.5em repeat(7, 1.5em); gap: 0;">
         @* row 0: month labels with colspan *@
         @* @foreach (var month in Enumerable.Range(1, 12)) *@
         @* { *@
@@ -62,7 +62,7 @@
             var needsLeftBorder = date.Day <= 7;
 
             <div class="activity-cell-container"
-                 style="grid-row: @((int)date.DayOfWeek + 2); border-@(needsLeftBorder ? "left" : "right"): @(needsBorder ? "2px solid white" : "none"); border-top: @(needsTopBorder ? "2px solid white" : "none");">
+                style="grid-row: @((int)date.DayOfWeek + 2); border-@(needsLeftBorder ? "left" : "right"): @(needsBorder ? "2px solid #aaa" : "none"); border-top: @(needsTopBorder ? "2px solid #aaa" : "none");">
                 @if (hasData)
                 {
                     <div class="activity-cell"
@@ -72,8 +72,7 @@
                 }
                 else
                 {
-                    <div class="activity-cell"
-                         title="@($"No data on {date.ToString("D")}")">
+                    <div class="activity-cell" style="background-color: #1c1c1c;" title="@($"No data on {date.ToString("D")}")">
                     </div>
                 }
             </div>
@@ -145,4 +144,4 @@
         }
     }
 
-}
\ No newline at end of file
+}
diff --git a/MatrixUtils.Web/Shared/ActivityGraph.razor.css b/MatrixUtils.Web/Shared/ActivityGraph.razor.css
index d8e543c..b5c01bd 100644
--- a/MatrixUtils.Web/Shared/ActivityGraph.razor.css
+++ b/MatrixUtils.Web/Shared/ActivityGraph.razor.css
@@ -13,4 +13,10 @@
 
 .day-label {
     grid-column: 1;
-}
\ No newline at end of file
+}
+
+.activity-graph {
+    width: fit-content;
+    grid-template-columns: 35px repeat(55, 1.5em) !important;
+    padding: 0.75rem;
+}
-- 
cgit 1.4.1