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

Wrap pages in consistent container styling

Browse Source 
Remove Back to List
This commit is contained in:
James Kolpack
2025-12-26 23:45:32 -05:00
parent 4c05188867
commit 58cae98357
11 changed files with 112 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/Events/Index.razor
+6 -5
View File
@@ -44,6 +44,11 @@
</MudStack>
</CellTemplate>
</PropertyColumn>
<TemplateColumn Title="Attributes" Sortable="false">
<CellTemplate>
<EventAttributes EventDefinition="context.Item"></EventAttributes>
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="@(e => e.EventFormat)" Title="Event Format" />
<TemplateColumn Title="Team Size" CellStyle="white-space:nowrap">
@@ -54,11 +59,7 @@
</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>
WebApp/Components/Features/MeetingSchedule/Index.razor
+1 -1
View File
@@ -11,7 +11,7 @@
<PageHeader Title="@($"{Configuration["ChapterSettings:Shortname"]} TSA Schedule {Configuration["ChapterSettings:CompetitionYear"]}")" />
<MudPaper Class="pa-4 mt-5">
<MudPaper Elevation="2" Class="pa-4 mt-4">
<MudGrid>
<MudItem xs="7" sm="8" lg="9">
<MudText Typo="Typo.h4">Time Slots</MudText>
WebApp/Components/Features/Students/Details.razor
-1
View File
@@ -22,7 +22,6 @@
OnClick="PrintPage"
Variant="Variant.Outlined">Print</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}&returnUrl={ReturnUrl ?? "/students"}")" Variant="Variant.Outlined">Edit</MudButton>
<MudButton Href="@(ReturnUrl ?? "/students")" Variant="Variant.Text">Back to List</MudButton>
</div>
</ActionButtons>
</PageHeader>
WebApp/Components/Features/Students/EventRanking.razor
+16 -9
View File
@@ -2,7 +2,6 @@
@attribute [Authorize]
@using Microsoft.EntityFrameworkCore
@using WebApp.Models
@using WebApp.Components.Shared.Components
@using Core.Validation
@inject AppDbContext Context
@inject ValidationService ValidationService
@@ -18,8 +17,10 @@
}
else
{
<MudTable Items="_students" Hover="true" Breakpoint="Breakpoint.Sm" LoadingProgressColor="Color.Info">
<MudStack Spacing="4">
<MudPaper Elevation="2" Class="pa-4">
<MudText Typo="Typo.h5" Class="mb-4">Students by Rank</MudText>
<MudTable Items="_students" Hover="true" Striped="true" Breakpoint="Breakpoint.Sm" LoadingProgressColor="Color.Info">
<HeaderContent>
<MudTh>Name</MudTh>
@@ -58,10 +59,14 @@ else
}
</MudTd>
}
</RowTemplate>
</MudTable>
<MudTable Items="_eventStudentRankings" Hover="true" Breakpoint="Breakpoint.Sm" LoadingProgressColor="Color.Info">
</RowTemplate>
</MudTable>
</MudPaper>
<MudPaper Elevation="2" Class="pa-4">
<MudText Typo="Typo.h5" Class="mb-4">Events by Student</MudText>
<MudTable Items="_eventStudentRankings" Hover="true" Striped="true" Breakpoint="Breakpoint.Sm" LoadingProgressColor="Color.Info">
<HeaderContent>
<MudTh>Event</MudTh>
<MudTh>Level of Effort</MudTh>
@@ -96,8 +101,10 @@ else
}
</MudTd>
}
</RowTemplate>
</MudTable>
</RowTemplate>
</MudTable>
</MudPaper>
</MudStack>
}
@code {
private Student[]? _students;
WebApp/Components/Features/Students/EventRankingEdit.razor
+46 -42
View File
@@ -3,39 +3,44 @@
@using Microsoft.EntityFrameworkCore
@using BlazorSortableList
@using WebApp.Models
@using WebApp.Components.Shared.Components
@inject AppDbContext Context
@inject NavigationManager NavigationManager
@inject ISnackbar Snackbar
@inject ILogger<EventRankingEdit> Logger
<PageTitle>Student Event Ranks - TSA Chapter Organizer</PageTitle>
@if (_student == null)
{
<p><em>Loading...</em></p>
}
else
{
<PageHeader
Title="Student Event Ranks"
Subtitle="@_student.Name"
Icon="@AppIcons.EventRank"
ShowBackButton="true"
BackButtonUrl="/students/event-ranking">
<ActionButtons>
<MudButton StartIcon="@Icons.Material.Filled.Save"
OnClick="Save"
Color="Color.Primary"
Variant="Variant.Filled">
Save Rankings
</MudButton>
</ActionButtons>
</PageHeader>
<MudText Typo="Typo.h3"><MudIcon Icon="@AppIcons.EventRank"></MudIcon> Student Event Ranks</MudText>
<div>
@if (_student == null)
{
<p><em>Loading...</em></p>
}
else
{
<MudText Typo="Typo.h4" Class="mb-2">@_student.Name</MudText>
<div class="mb-4">
<MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="students/event-ranking" Variant="Variant.Outlined" Class="mr-2">Back</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.Save" OnClick="Save" Color="Color.Primary" Variant="Variant.Filled">Save Rankings</MudButton>
</div>
@* https://github.com/AlexNek/BlazorSortableList *@
<MudGrid Class="mt-2">
<MudItem xs="12" md="6" xl="4">
<MudPaper Class="pa-3 mb-3" Elevation="0">
<div class="d-flex align-center mb-1">
<MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" Class="mr-2" Color="Color.Primary" />
<MudText Typo="Typo.h6" Color="Color.Primary">Ranked Events</MudText>
</div>
<MudText Typo="Typo.caption" Color="Color.Secondary">Drag events here in order of preference</MudText>
</MudPaper>
@* https://github.com/AlexNek/BlazorSortableList *@
<MudGrid Class="mt-2">
<MudItem xs="12" md="6" xl="4">
<MudPaper Class="pa-3 mb-3" Elevation="2">
<div class="d-flex align-center mb-1">
<MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" Class="mr-2" Color="Color.Primary" />
<MudText Typo="Typo.h6" Color="Color.Primary">Ranked Events</MudText>
</div>
<MudText Typo="Typo.caption" Color="Color.Secondary">Drag events here in order of preference</MudText>
</MudPaper>
<SortableList
Group="GroupId" Id="ListId1" Context="item"
Items="_rankedEvents" OnRemove="RankedEventsRemove" OnUpdate="Update">
@@ -56,16 +61,16 @@
</MudCardContent>
</MudCard>
</SortableItemTemplate>
</SortableList>
</MudItem>
<MudItem xs="12" md="6" xl="4">
<MudPaper Class="pa-3 mb-3" Elevation="0">
<div class="d-flex align-center mb-1">
<MudIcon Icon="@AppIcons.Events" Class="mr-2" />
<MudText Typo="Typo.h6">Available Events</MudText>
</div>
<MudText Typo="Typo.caption" Color="Color.Secondary">Drag events to rank them</MudText>
</MudPaper>
</SortableList>
</MudItem>
<MudItem xs="12" md="6" xl="4">
<MudPaper Class="pa-3 mb-3" Elevation="2">
<div class="d-flex align-center mb-1">
<MudIcon Icon="@AppIcons.Events" Class="mr-2" />
<MudText Typo="Typo.h6">Available Events</MudText>
</div>
<MudText Typo="Typo.caption" Color="Color.Secondary">Drag events to rank them</MudText>
</MudPaper>
<SortableList
Group="GroupId" Id="ListId2" Context="item"
Items="_availableEvents" OnRemove="AvailableEventsRemove" Sort="false">
@@ -79,11 +84,10 @@
</MudCardContent>
</MudCard>
</SortableItemTemplate>
</SortableList>
</MudItem>
</MudGrid>
}
</div>
</SortableList>
</MudItem>
</MudGrid>
}
@code {
WebApp/Components/Features/Students/Index.razor
+1 -1
View File
@@ -53,7 +53,7 @@
</PropertyColumn>
<PropertyColumn Property="@(e => e.Grade)" Title="Grade (TSA Year)" Sortable="true">
<CellTemplate>
@context.Item.Grade (@context.Item.TsaYear)
@((MarkupString)AppIcons.GetOrdinalSuperscript(context.Item.Grade)) (@context.Item.TsaYear)
</CellTemplate>
</PropertyColumn>
</Columns>
WebApp/Components/Features/Students/Registration.razor
+26 -19
View File
@@ -19,30 +19,37 @@
</ActionButtons>
</PageHeader>
<MudText Typo="Typo.body2" Style="margin-top: 8px; margin-bottom: 4px;">
<MudIcon Icon="@AppIcons.Captain" Size="Size.Small" /> = Team Captain
</MudText>
<MudPaper Elevation="2" Class="pa-4">
<MudText Typo="Typo.body2" Class="mb-2">
<MudIcon Icon="@AppIcons.Captain" Size="Size.Small" /> = Team Captain
</MudText>
<MudText Typo="Typo.body2" Style="margin-bottom: 8px;">
<strong>Show Columns:</strong>
<MudCheckBox Value="_showGrade" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showGrade), val, v => _showGrade = v)" Label="Grade" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showRegionalId" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showRegionalId), val, v => _showRegionalId = v)" Label="Regional ID" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showStateId" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showStateId), val, v => _showStateId = v)" Label="State ID" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showNationalId" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showNationalId), val, v => _showNationalId = v)" Label="National ID" Dense="true" Size="Size.Small" />
</MudText>
<MudText Typo="Typo.body2" Class="mb-3">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
<strong>Show Columns:</strong>
<MudCheckBox Value="_showGrade" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showGrade), val, v => _showGrade = v)" Label="Grade" Dense="true" Size="Size.Small"/>
<MudCheckBox Value="_showRegionalId" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showRegionalId), val, v => _showRegionalId = v)" Label="Regional ID" Dense="true" Size="Size.Small"/>
<MudCheckBox Value="_showStateId" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showStateId), val, v => _showStateId = v)" Label="State ID" Dense="true" Size="Size.Small"/>
<MudCheckBox Value="_showNationalId" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showNationalId), val, v => _showNationalId = v)" Label="National ID" Dense="true" Size="Size.Small"/>
</MudStack>
</MudText>
<MudDataGrid T="StudentTeamInfo" ServerData="ServerReload" @ref="_dataGrid" @key="_gridKey" Filterable="true" RowsPerPage="35">
<MudDataGrid T="StudentTeamInfo" ServerData="ServerReload" @ref="_dataGrid" @key="_gridKey" Filterable="true" RowsPerPage="35" Dense="true" Striped="true" Hover="true">
<Columns>
<PropertyColumn Property="@(e => e.Student.LastName)" Title="Student" Sortable="true">
<CellTemplate>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
@context.Item.Student.LastNameFirstName
<MudTooltip Text="Edit">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Size="Size.Small"
Href="@($"/students/edit?id={context.Item.Student.Id}&returnUrl=/students/teams")"
Style="margin-left: 4px;" />
Style="margin-left: 4px;"/>
</MudTooltip>
</MudStack>
</CellTemplate>
</PropertyColumn>
<TemplateColumn Title="Warnings" Sortable="false">
<CellTemplate>
@@ -67,10 +74,9 @@
}
<TemplateColumn Title="Events">
<CellTemplate>
@if (context.Item.Teams != null)
{
@{
var teamsToDisplay = _showRegionalOnly
? context.Item.Teams.Where(t => t?.Event != null && t.Event.RegionalEvent).OrderBy(t => t.Event.Name)
? 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);
foreach (var team in teamsToDisplay)
@@ -95,10 +101,11 @@
</CellTemplate>
</TemplateColumn>
</Columns>
<PagerContent>
<MudDataGridPager T="StudentTeamInfo" PageSizeOptions="new int[] { 10, 25, 35, 50, 100 }"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
<PagerContent>
<MudDataGridPager T="StudentTeamInfo" PageSizeOptions="new int[] { 10, 25, 35, 50, 100 }"></MudDataGridPager>
</PagerContent>
</MudDataGrid>
</MudPaper>
@code {
MudDataGrid<StudentTeamInfo> _dataGrid = null!;
WebApp/Components/Features/Teams/Assignment.razor
+13 -11
View File
@@ -21,7 +21,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Class="pa-4 mt-5">
<MudPaper Elevation="2" Class="pa-4 mt-4">
<MudGrid>
<MudItem Style="width:160px;">
<MudNumericField @bind-Value="_parameters.TeamSizeLimit"
@@ -117,9 +117,10 @@
<MudButton Class="ma-3" OnClick="Solve" Variant="Variant.Filled" Color="Color.Primary" Disabled="@_isSolving">Solve</MudButton>
</MudPaper>
<MudGrid>
<MudItem xs="12" lg="8">
<MudText Typo="Typo.h4">Students</MudText>
<MudPaper Elevation="2" Class="pa-4 mt-4">
<MudGrid>
<MudItem xs="12" lg="8">
<MudText Typo="Typo.h5" Class="mb-4">Students</MudText>
<MudTable T="StudentEventStatistics" ServerData="ReloadStatistics" @ref="_statisticData" >
<ColGroup>
@@ -232,10 +233,10 @@
</td></MudTr>
</ChildRowContent>
</MudTable>
</MudItem>
<MudItem xs="12" lg="4">
<MudText Typo="Typo.h4">Teams</MudText>
<MudTable T="Team" ServerData="SolveAssignments" @ref="_teamData">
</MudItem>
<MudItem xs="12" lg="4">
<MudText Typo="Typo.h5" Class="mb-4">Teams</MudText>
<MudTable T="Team" ServerData="SolveAssignments" @ref="_teamData">
<ColGroup>
<col style="width: 200px;" />
<col style="width: 40px; white-space:nowrap" />
@@ -287,9 +288,10 @@
<LoadingContent>
<MudText>Loading...</MudText>
</LoadingContent>
</MudTable>
</MudItem>
</MudGrid>
</MudTable>
</MudItem>
</MudGrid>
</MudPaper>
@if (_hasExistingTeams)
{
WebApp/Components/Features/Teams/Details.razor
-1
View File
@@ -25,7 +25,6 @@
<MudButton StartIcon="@Icons.Material.Filled.Edit"
Href="@($"/teams/edit?id={Team.Id}&returnUrl={ReturnUrl ?? "/teams"}")"
Variant="Variant.Outlined">Edit</MudButton>
<MudButton Href="@(ReturnUrl ?? "/teams")" Variant="Variant.Text">Back to List</MudButton>
</div>
</ActionButtons>
</PageHeader>
WebApp/Components/Features/Teams/Goals.razor
+2 -2
View File
@@ -16,7 +16,7 @@
}
else
{
<MudContainer>
<MudPaper Elevation="2" Class="pa-4">
@foreach (var student in _students)
{
<MudContainer Class="pagebreak">
@@ -52,7 +52,7 @@ else
}
</MudContainer>
}
</MudContainer>
</MudPaper>
}
@code {
docs/plans/style-improvements.md
+1 -1
View File
@@ -332,7 +332,7 @@ Consider using MudChip components with rank colors for better visual distinction
### Phase 2: Visual Polish (Medium Impact, Medium Effort)
4. ✅ Refine typography hierarchy usage
5. Add loading states to all grids
6. Wrap pages in consistent container styling
6. ✅ Wrap pages in consistent container styling
### Phase 3: Enhancements (Nice to Have)
7. Audit and ensure button hierarchy consistency