diff options
| author | Lexi <git@nordgedanken.dev> | 2024-05-02 17:37:14 +0200 |
|---|---|---|
| committer | Rory& <root@rory.gay> | 2024-05-03 19:42:29 +0200 |
| commit | 4a70e4393099e54ce9789ac5c7ca423e93aa92ee (patch) | |
| tree | e16a7046bb66f377ddfb89d87b05e010eb13c1aa | |
| parent | All kinds of changes (diff) | |
| download | MatrixUtils-4a70e4393099e54ce9789ac5c7ca423e93aa92ee.tar.xz | |
Improve the heatmap layout
| -rw-r--r-- | MatrixUtils.Web/Pages/Tools/PolicyListActivity.razor.css | 12 | ||||
| -rw-r--r-- | MatrixUtils.Web/Shared/ActivityGraph.razor | 9 | ||||
| -rw-r--r-- | MatrixUtils.Web/Shared/ActivityGraph.razor.css | 8 |
3 files changed, 23 insertions, 6 deletions
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; +} |