TSA/chapter-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Table Density and Spacing

Browse Source
This commit is contained in:
James Kolpack
2025-12-26 16:02:55 -05:00
parent 768b46da2d
commit 75a64faff0
4 changed files with 145 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/Events/Index.razor
+51 -42
View File
@@ -14,50 +14,59 @@
</ActionButtons>
</PageHeader>
<MudDataGrid T="EventDefinition" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="50" >
<Columns>
<PropertyColumn Property="@(e => e.Name)" Title="Event Name" Sortable="true">
<CellTemplate>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<MudLink Href="@($"/events/details?id={context.Item.Id}")"
Underline="Underline.Hover"
Color="Color.Primary">
@context.Item.Name
</MudLink>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
Href="@($"/events/edit?id={context.Item.Id}")" />
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
TooltipText="Delete"
HoverColor="Color.Error"
OnClick="() => DeleteEventDefinition(context.Item!)" />
<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>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<MudLink Href="@($"/events/details?id={context.Item.Id}")"
Underline="Underline.Hover"
Color="Color.Primary">
@context.Item.Name
</MudLink>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
Href="@($"/events/edit?id={context.Item.Id}")" />
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
TooltipText="Delete"
HoverColor="Color.Error"
OnClick="() => DeleteEventDefinition(context.Item!)" />
</MudStack>
</MudStack>
</MudStack>
</CellTemplate>
</PropertyColumn>
<PropertyColumn Property="@(e => e.EventFormat)" Title="Event Format" />
</CellTemplate>
</PropertyColumn>
<PropertyColumn Property="@(e => e.EventFormat)" Title="Event Format" />
<TemplateColumn Title="Team Size" CellStyle="white-space:nowrap">
<CellTemplate>
<MudTooltip Text="@context.Item.Eligibility">
[@context.Item.MinTeamSize&nbsp;-&nbsp;@context.Item.MaxTeamSize]
</MudTooltip>
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="@(e => e.ChapterEligibilityCountState)" Title="State#" />
<TemplateColumn Title="Attributes" Sortable="false">
<CellTemplate>
<EventAttributes EventDefinition="context.Item"></EventAttributes>
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="@(e => e.LevelOfEffort)" Title="Level of Effort" />
</Columns>
<PagerContent>
<MudDataGridPager T="EventDefinition"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
<TemplateColumn Title="Team Size" CellStyle="white-space:nowrap">
<CellTemplate>
<MudTooltip Text="@context.Item.Eligibility">
[@context.Item.MinTeamSize&nbsp;-&nbsp;@context.Item.MaxTeamSize]
</MudTooltip>
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="@(e => e.ChapterEligibilityCountState)" Title="State#" />
<TemplateColumn Title="Attributes" Sortable="false">
<CellTemplate>
<EventAttributes EventDefinition="context.Item"></EventAttributes>
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="@(e => e.LevelOfEffort)" Title="Level of Effort" />
</Columns>
<PagerContent>
<MudDataGridPager T="EventDefinition"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</MudPaper>
@code {
MudDataGrid<EventDefinition> _dataGrid = null!;
WebApp/Components/Features/Students/Index.razor
+46 -37
View File
@@ -15,44 +15,53 @@
</ActionButtons>
</PageHeader>
<MudDataGrid T="Student" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="25">
<Columns>
<PropertyColumn Property="@(e => e.LastName)" Title="Name" Sortable="true">
<CellTemplate>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<MudLink Href="@($"/students/details?id={context.Item.Id}&returnUrl=/students")"
Underline="Underline.Hover"
Color="Color.Primary">
@context.Item.LastNameFirstName
</MudLink>
@if (context.Item.OfficerRole != null)
{
<MudChip T="string" Size="Size.Small" Icon="@(AppIcons.OfficerRoleIcon(context.Item.OfficerRole.Value))">@context.Item.OfficerRole</MudChip>
}
<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>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<MudLink Href="@($"/students/details?id={context.Item.Id}&returnUrl=/students")"
Underline="Underline.Hover"
Color="Color.Primary">
@context.Item.LastNameFirstName
</MudLink>
@if (context.Item.OfficerRole != null)
{
<MudChip T="string" Size="Size.Small" Icon="@(AppIcons.OfficerRoleIcon(context.Item.OfficerRole.Value))">@context.Item.OfficerRole</MudChip>
}
</MudStack>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
Href="@($"/students/edit?id={context.Item.Id}&returnUrl=/students")" />
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
TooltipText="Delete"
HoverColor="Color.Error"
OnClick="() => DeleteStudent(context.Item!)" />
</MudStack>
</MudStack>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
Href="@($"/students/edit?id={context.Item.Id}&returnUrl=/students")" />
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
TooltipText="Delete"
HoverColor="Color.Error"
OnClick="() => DeleteStudent(context.Item!)" />
</MudStack>
</MudStack>
</CellTemplate>
</PropertyColumn>
<PropertyColumn Property="@(e => e.Grade)" Title="Grade (TSA Year)" Sortable="true">
<CellTemplate>
@context.Item.Grade (@context.Item.TsaYear)
</CellTemplate>
</PropertyColumn>
</Columns>
<PagerContent>
<MudDataGridPager T="Student"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</CellTemplate>
</PropertyColumn>
<PropertyColumn Property="@(e => e.Grade)" Title="Grade (TSA Year)" Sortable="true">
<CellTemplate>
@context.Item.Grade (@context.Item.TsaYear)
</CellTemplate>
</PropertyColumn>
</Columns>
<PagerContent>
<MudDataGridPager T="Student"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</MudPaper>
@code {
MudDataGrid<Student> _dataGrid = null!;
WebApp/Components/Features/Teams/Index.razor
+45 -36
View File
@@ -14,43 +14,52 @@
</ActionButtons>
</PageHeader>
<MudDataGrid T="Team" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="35">
<Columns>
<TemplateColumn Title="Event" Sortable="true" SortBy="@(t => t.Event.Name)">
<CellTemplate>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<MudLink Href="@($"/teams/details?id={context.Item.Id}")"
Underline="Underline.Hover"
Color="Color.Primary">
@context.Item.ToString()
</MudLink>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
Href="@($"/teams/edit?id={context.Item.Id}")" />
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
TooltipText="Delete"
HoverColor="Color.Error"
OnClick="() => DeleteTeam(context.Item!)" />
<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>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<MudLink Href="@($"/teams/details?id={context.Item.Id}")"
Underline="Underline.Hover"
Color="Color.Primary">
@context.Item.ToString()
</MudLink>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
Href="@($"/teams/edit?id={context.Item.Id}")" />
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
TooltipText="Delete"
HoverColor="Color.Error"
OnClick="() => DeleteTeam(context.Item!)" />
</MudStack>
</MudStack>
</MudStack>
</CellTemplate>
</TemplateColumn>
<TemplateColumn Title="Attributes">
<CellTemplate>
<EventAttributes EventDefinition="@context.Item.Event"></EventAttributes>
</CellTemplate>
</TemplateColumn>
<TemplateColumn Title="Students">
<CellTemplate>
<TeamStudents Team="@context.Item"></TeamStudents>
</CellTemplate>
</TemplateColumn>
</Columns>
<PagerContent>
<MudDataGridPager T="Team"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</CellTemplate>
</TemplateColumn>
<TemplateColumn Title="Attributes">
<CellTemplate>
<EventAttributes EventDefinition="@context.Item.Event"></EventAttributes>
</CellTemplate>
</TemplateColumn>
<TemplateColumn Title="Students">
<CellTemplate>
<TeamStudents Team="@context.Item"></TeamStudents>
</CellTemplate>
</TemplateColumn>
</Columns>
<PagerContent>
<MudDataGridPager T="Team"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</MudPaper>
@code {
MudDataGrid<Team> _dataGrid = null!;
docs/plans/style-improvements.md
+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