Refactor UI components to utilize MudBlazor's layout system

This commit updates several components to replace traditional HTML layout elements with MudBlazor's MudStack component for improved styling and responsiveness. Changes include the CareerMapping.razor, Index.razor, Registration.razor, TeamStudents.razor, and TeamToggleSelector.razor files. These modifications enhance the visual consistency and maintainability of the UI by adhering to the project's design standards.
This commit is contained in:
2026-01-11 09:54:32 -05:00
parent 5e6d61d400
commit e53403c934
6 changed files with 124 additions and 39 deletions
@@ -30,7 +30,7 @@
<PropertyColumn Property="@(e => e.LastName)" Title="Name" Sortable="true">
<CellTemplate>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<div class="d-flex align-center flex-wrap" style="gap: 0.25rem;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Wrap="Wrap.Wrap">
<MudLink Href="@($"/students/details?id={context.Item.Id}&returnUrl=/students")"
Underline="Underline.Hover"
Color="Color.Primary">
@@ -40,7 +40,7 @@
{
<MudChip T="string" Size="Size.Small" Icon="@(AppIcons.OfficerRoleIcon(context.Item.OfficerRole.Value))">@context.Item.OfficerRole</MudChip>
}
</div>
</MudStack>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
@@ -79,7 +79,7 @@
? context.Item.Teams.Where(t => t?.Event is { RegionalEvent: true }).OrderBy(t => t.Event.Name)
: context.Item.Teams.Where(t => t?.Event != null).OrderBy(t => t.Event.Name);
}
<div class="d-flex flex-wrap" style="gap: 0.25rem;">
<MudStack Row="true" Spacing="1" Wrap="Wrap.Wrap">
@foreach (var team in teamsToDisplay)
{
var isCaptain = team.Captain != null && team.Captain.Equals(context.Item.Student);
@@ -98,7 +98,7 @@
</MudChip>
</MudTooltip>
}
</div>
</MudStack>
</CellTemplate>
</TemplateColumn>
</Columns>