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