Improve Table Density and Spacing

This commit is contained in:
2025-12-26 16:02:55 -05:00
parent 768b46da2d
commit 75a64faff0
4 changed files with 145 additions and 118 deletions
+11 -2
View File
@@ -14,7 +14,15 @@
</ActionButtons>
</PageHeader>
<MudDataGrid T="EventDefinition" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="50" >
<MudPaper Elevation="2" Class="pa-4">
<MudDataGrid T="EventDefinition"
ServerData="ServerReload"
@ref="_dataGrid"
Filterable="true"
RowsPerPage="50"
Dense="true"
Striped="true"
Hover="true">
<Columns>
<PropertyColumn Property="@(e => e.Name)" Title="Event Name" Sortable="true">
<CellTemplate>
@@ -57,7 +65,8 @@
<PagerContent>
<MudDataGridPager T="EventDefinition"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</MudDataGrid>
</MudPaper>
@code {
MudDataGrid<EventDefinition> _dataGrid = null!;
@@ -15,7 +15,15 @@
</ActionButtons>
</PageHeader>
<MudDataGrid T="Student" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="25">
<MudPaper Elevation="2" Class="pa-4">
<MudDataGrid T="Student"
ServerData="ServerReload"
@ref="_dataGrid"
Filterable="true"
RowsPerPage="25"
Dense="true"
Striped="true"
Hover="true">
<Columns>
<PropertyColumn Property="@(e => e.LastName)" Title="Name" Sortable="true">
<CellTemplate>
@@ -52,7 +60,8 @@
<PagerContent>
<MudDataGridPager T="Student"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</MudDataGrid>
</MudPaper>
@code {
MudDataGrid<Student> _dataGrid = null!;
+11 -2
View File
@@ -14,7 +14,15 @@
</ActionButtons>
</PageHeader>
<MudDataGrid T="Team" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="35">
<MudPaper Elevation="2" Class="pa-4">
<MudDataGrid T="Team"
ServerData="ServerReload"
@ref="_dataGrid"
Filterable="true"
RowsPerPage="35"
Dense="true"
Striped="true"
Hover="true">
<Columns>
<TemplateColumn Title="Event" Sortable="true" SortBy="@(t => t.Event.Name)">
<CellTemplate>
@@ -50,7 +58,8 @@
<PagerContent>
<MudDataGridPager T="Team"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</MudDataGrid>
</MudPaper>
@code {
MudDataGrid<Team> _dataGrid = null!;
+3 -3
View File
@@ -60,7 +60,7 @@ This document outlines recommended style improvements to enhance the visual desi
---
### 3. Improve Table Density and Spacing
### 3. Improve Table Density and Spacing ✅ COMPLETED
**Locations**: All MudDataGrid components
**Current State**: Tables lack visual distinction between rows and don't have optimal spacing.
@@ -326,8 +326,8 @@ Consider using MudChip components with rank colors for better visual distinction
### Phase 1: Quick Wins (High Impact, Low Effort)
1. ✅ Fix logout button (MudBlazor consistency)
2. Add elevation to data grids and content containers
3. Add table density and hover properties
2. Add elevation to data grids and content containers
3. Add table density and hover properties
### Phase 2: Visual Polish (Medium Impact, Medium Effort)
4. Audit and ensure button hierarchy consistency