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> </ActionButtons>
</PageHeader> </PageHeader>
<MudDataGrid T="EventDefinition" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="50" > <MudPaper Elevation="2" Class="pa-4">
<Columns> <MudDataGrid T="EventDefinition"
<PropertyColumn Property="@(e => e.Name)" Title="Event Name" Sortable="true"> ServerData="ServerReload"
<CellTemplate> @ref="_dataGrid"
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1"> Filterable="true"
<MudLink Href="@($"/events/details?id={context.Item.Id}")" RowsPerPage="50"
Underline="Underline.Hover" Dense="true"
Color="Color.Primary"> Striped="true"
@context.Item.Name Hover="true">
</MudLink> <Columns>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1"> <PropertyColumn Property="@(e => e.Name)" Title="Event Name" Sortable="true">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit" <CellTemplate>
TooltipText="Edit" <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
Href="@($"/events/edit?id={context.Item.Id}")" /> <MudLink Href="@($"/events/details?id={context.Item.Id}")"
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete" Underline="Underline.Hover"
TooltipText="Delete" Color="Color.Primary">
HoverColor="Color.Error" @context.Item.Name
OnClick="() => DeleteEventDefinition(context.Item!)" /> </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>
</MudStack> </CellTemplate>
</CellTemplate> </PropertyColumn>
</PropertyColumn> <PropertyColumn Property="@(e => e.EventFormat)" Title="Event Format" />
<PropertyColumn Property="@(e => e.EventFormat)" Title="Event Format" />
<TemplateColumn Title="Team Size" CellStyle="white-space:nowrap"> <TemplateColumn Title="Team Size" CellStyle="white-space:nowrap">
<CellTemplate> <CellTemplate>
<MudTooltip Text="@context.Item.Eligibility"> <MudTooltip Text="@context.Item.Eligibility">
[@context.Item.MinTeamSize&nbsp;-&nbsp;@context.Item.MaxTeamSize] [@context.Item.MinTeamSize&nbsp;-&nbsp;@context.Item.MaxTeamSize]
</MudTooltip> </MudTooltip>
</CellTemplate> </CellTemplate>
</TemplateColumn> </TemplateColumn>
<PropertyColumn Property="@(e => e.ChapterEligibilityCountState)" Title="State#" /> <PropertyColumn Property="@(e => e.ChapterEligibilityCountState)" Title="State#" />
<TemplateColumn Title="Attributes" Sortable="false"> <TemplateColumn Title="Attributes" Sortable="false">
<CellTemplate> <CellTemplate>
<EventAttributes EventDefinition="context.Item"></EventAttributes> <EventAttributes EventDefinition="context.Item"></EventAttributes>
</CellTemplate> </CellTemplate>
</TemplateColumn> </TemplateColumn>
<PropertyColumn Property="@(e => e.LevelOfEffort)" Title="Level of Effort" /> <PropertyColumn Property="@(e => e.LevelOfEffort)" Title="Level of Effort" />
</Columns> </Columns>
<PagerContent> <PagerContent>
<MudDataGridPager T="EventDefinition"></MudDataGridPager> <MudDataGridPager T="EventDefinition"></MudDataGridPager>
</PagerContent> </PagerContent>
</MudDataGrid> </MudDataGrid>
</MudPaper>
@code { @code {
MudDataGrid<EventDefinition> _dataGrid = null!; MudDataGrid<EventDefinition> _dataGrid = null!;
WebApp/Components/Features/Students/Index.razor
+46 -37
View File
@@ -15,44 +15,53 @@
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
<MudDataGrid T="Student" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="25"> <MudPaper Elevation="2" Class="pa-4">
<Columns> <MudDataGrid T="Student"
<PropertyColumn Property="@(e => e.LastName)" Title="Name" Sortable="true"> ServerData="ServerReload"
<CellTemplate> @ref="_dataGrid"
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1"> Filterable="true"
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1"> RowsPerPage="25"
<MudLink Href="@($"/students/details?id={context.Item.Id}&returnUrl=/students")" Dense="true"
Underline="Underline.Hover" Striped="true"
Color="Color.Primary"> Hover="true">
@context.Item.LastNameFirstName <Columns>
</MudLink> <PropertyColumn Property="@(e => e.LastName)" Title="Name" Sortable="true">
@if (context.Item.OfficerRole != null) <CellTemplate>
{ <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<MudChip T="string" Size="Size.Small" Icon="@(AppIcons.OfficerRoleIcon(context.Item.OfficerRole.Value))">@context.Item.OfficerRole</MudChip> <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>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1"> </CellTemplate>
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit" </PropertyColumn>
TooltipText="Edit" <PropertyColumn Property="@(e => e.Grade)" Title="Grade (TSA Year)" Sortable="true">
Href="@($"/students/edit?id={context.Item.Id}&returnUrl=/students")" /> <CellTemplate>
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete" @context.Item.Grade (@context.Item.TsaYear)
TooltipText="Delete" </CellTemplate>
HoverColor="Color.Error" </PropertyColumn>
OnClick="() => DeleteStudent(context.Item!)" /> </Columns>
</MudStack> <PagerContent>
</MudStack> <MudDataGridPager T="Student"></MudDataGridPager>
</CellTemplate> </PagerContent>
</PropertyColumn> </MudDataGrid>
<PropertyColumn Property="@(e => e.Grade)" Title="Grade (TSA Year)" Sortable="true"> </MudPaper>
<CellTemplate>
@context.Item.Grade (@context.Item.TsaYear)
</CellTemplate>
</PropertyColumn>
</Columns>
<PagerContent>
<MudDataGridPager T="Student"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
@code { @code {
MudDataGrid<Student> _dataGrid = null!; MudDataGrid<Student> _dataGrid = null!;
WebApp/Components/Features/Teams/Index.razor
+45 -36
View File
@@ -14,43 +14,52 @@
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
<MudDataGrid T="Team" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="35"> <MudPaper Elevation="2" Class="pa-4">
<Columns> <MudDataGrid T="Team"
<TemplateColumn Title="Event" Sortable="true" SortBy="@(t => t.Event.Name)"> ServerData="ServerReload"
<CellTemplate> @ref="_dataGrid"
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1"> Filterable="true"
<MudLink Href="@($"/teams/details?id={context.Item.Id}")" RowsPerPage="35"
Underline="Underline.Hover" Dense="true"
Color="Color.Primary"> Striped="true"
@context.Item.ToString() Hover="true">
</MudLink> <Columns>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1"> <TemplateColumn Title="Event" Sortable="true" SortBy="@(t => t.Event.Name)">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit" <CellTemplate>
TooltipText="Edit" <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
Href="@($"/teams/edit?id={context.Item.Id}")" /> <MudLink Href="@($"/teams/details?id={context.Item.Id}")"
<IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete" Underline="Underline.Hover"
TooltipText="Delete" Color="Color.Primary">
HoverColor="Color.Error" @context.Item.ToString()
OnClick="() => DeleteTeam(context.Item!)" /> </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>
</MudStack> </CellTemplate>
</CellTemplate> </TemplateColumn>
</TemplateColumn> <TemplateColumn Title="Attributes">
<TemplateColumn Title="Attributes"> <CellTemplate>
<CellTemplate> <EventAttributes EventDefinition="@context.Item.Event"></EventAttributes>
<EventAttributes EventDefinition="@context.Item.Event"></EventAttributes> </CellTemplate>
</CellTemplate> </TemplateColumn>
</TemplateColumn> <TemplateColumn Title="Students">
<TemplateColumn Title="Students"> <CellTemplate>
<CellTemplate> <TeamStudents Team="@context.Item"></TeamStudents>
<TeamStudents Team="@context.Item"></TeamStudents> </CellTemplate>
</CellTemplate> </TemplateColumn>
</TemplateColumn> </Columns>
</Columns> <PagerContent>
<PagerContent> <MudDataGridPager T="Team"></MudDataGridPager>
<MudDataGridPager T="Team"></MudDataGridPager> </PagerContent>
</PagerContent> </MudDataGrid>
</MudDataGrid> </MudPaper>
@code { @code {
MudDataGrid<Team> _dataGrid = null!; 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 **Locations**: All MudDataGrid components
**Current State**: Tables lack visual distinction between rows and don't have optimal spacing. **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) ### Phase 1: Quick Wins (High Impact, Low Effort)
1. ✅ Fix logout button (MudBlazor consistency) 1. ✅ Fix logout button (MudBlazor consistency)
2. Add elevation to data grids and content containers 2. ✅ Add elevation to data grids and content containers
3. Add table density and hover properties 3. ✅ Add table density and hover properties
### Phase 2: Visual Polish (Medium Impact, Medium Effort) ### Phase 2: Visual Polish (Medium Impact, Medium Effort)
4. Audit and ensure button hierarchy consistency 4. Audit and ensure button hierarchy consistency