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