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

Refactor MudPaper component styling across various features for consistency

Browse Source 
Updated the MudPaper component styling in multiple files to use a consistent padding class of "pa-3 pa-md-6" instead of "pa-6". This change enhances the visual consistency of the UI across the Calendar, Events, Students, and Teams components, improving the overall user experience.
This commit is contained in:
James Kolpack
2026-01-05 14:01:46 -05:00
parent 2aaefb2491
commit 87db67f979
23 changed files with 115 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/Calendar/Import.razor
+2 -2
View File
@@ -19,7 +19,7 @@
<MudGrid>
<MudItem xs="12" md="6">
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Paste Event Occurrence Data</MudText>
<MudStack Spacing="3">
<MudTextField
@@ -53,7 +53,7 @@
</MudItem>
<MudItem xs="12" md="6">
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Parsed Results</MudText>
@if (_isParsing)
WebApp/Components/Features/Calendar/Index.razor
+1 -1
View File
@@ -14,7 +14,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
@if (_calendarItems == null)
{
<MudProgressLinear Indeterminate="true" />
WebApp/Components/Features/Events/CareerMapping.razor
+3 -3
View File
@@ -14,14 +14,14 @@
@if (_isLoading)
{
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudProgressLinear Indeterminate="true" Color="Color.Primary"/>
<MudText Typo="Typo.body1" Class="mt-4">Loading career mapping data...</MudText>
</MudPaper>
}
else if (_networkData == null || !_networkData.Nodes.Any())
{
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h6" Class="mb-4">No Career Field Mappings Found</MudText>
<MudText Typo="Typo.body1" Class="mud-text-secondary">
No events have related careers assigned that match any career fields. Edit events to add related careers.
@@ -30,7 +30,7 @@ else if (_networkData == null || !_networkData.Nodes.Any())
}
else
{
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h6" Class="mb-4">Event-Career Field Relationships</MudText>
<MudText Typo="Typo.body2" Class="mb-4 mud-text-secondary">
This diagram shows the connections between events and their related career fields.
WebApp/Components/Features/Events/Create.razor
+4 -4
View File
@@ -25,7 +25,7 @@
<ValidationErrorDisplay Errors="_validationErrors" />
<MudStack Spacing="4">
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6">
@@ -49,7 +49,7 @@
</MudGrid>
</MudPaper>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Event Details</MudText>
<MudGrid Spacing="3">
<MudItem xs="12">
@@ -67,7 +67,7 @@
</MudGrid>
</MudPaper>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Team Configuration</MudText>
<MudGrid Spacing="3">
<MudItem xs="12">
@@ -88,7 +88,7 @@
</MudGrid>
</MudPaper>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Competition Details</MudText>
<MudGrid Spacing="3">
<MudItem xs="12">
WebApp/Components/Features/Events/Details.razor
+1 -1
View File
@@ -27,7 +27,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4">
WebApp/Components/Features/Events/Edit.razor
+4 -4
View File
@@ -32,7 +32,7 @@
<ValidationErrorDisplay Errors="_validationErrors" />
<MudStack Spacing="4">
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6">
@@ -56,7 +56,7 @@
</MudGrid>
</MudPaper>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Event Details</MudText>
<MudGrid Spacing="3">
<MudItem xs="12">
@@ -74,7 +74,7 @@
</MudGrid>
</MudPaper>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Team Configuration</MudText>
<MudGrid Spacing="3">
<MudItem xs="12">
@@ -95,7 +95,7 @@
</MudGrid>
</MudPaper>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Competition Details</MudText>
<MudGrid Spacing="3">
<MudItem xs="12">
WebApp/Components/Features/Events/Index.razor
+1 -1
View File
@@ -15,7 +15,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudDataGrid T="EventDefinition"
ServerData="ServerReload"
@ref="_dataGrid"
WebApp/Components/Features/MeetingSchedule/Index.razor
+3 -3
View File
@@ -11,9 +11,9 @@
<PageHeader Title="@($"{Configuration["ChapterSettings:Shortname"]} TSA Schedule {Configuration["ChapterSettings:CompetitionYear"]}")" />
<MudPaper Elevation="2" Class="pa-6 mt-4">
<MudPaper Elevation="2" Class="pa-3 pa-md-6 mt-4">
<MudGrid>
<MudItem xs="7" sm="8" lg="9">
<MudItem xs="12" sm="8" lg="9">
<MudText Typo="Typo.h4">Time Slots</MudText>
<MudPaper Class="pa-2 ma-2" Elevation="3">
<MudGrid>
@@ -81,7 +81,7 @@
</RowTemplate>
</MudTable>
</MudItem>
<MudItem xs="5" sm="4" lg="3">
<MudItem xs="12" sm="4" lg="3">
<MudStack>
<StudentTextBoxSelector Students="@_students"
SelectedStudents="_absentStudents"
WebApp/Components/Features/Students/Create.razor
+1 -1
View File
@@ -22,7 +22,7 @@
<ValidationErrorDisplay Errors="_validationErrors" />
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Student Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6">
WebApp/Components/Features/Students/Details.razor
+1 -1
View File
@@ -26,7 +26,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Student Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4">
WebApp/Components/Features/Students/Edit.razor
+1 -1
View File
@@ -32,7 +32,7 @@
<MudGrid>
<MudItem xs="12" sm="7">
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudTextField T="string" Label="First Name" @bind-Value="Student.FirstName" For="@(() => Student.FirstName)"></MudTextField>
<MudTextField T="string" Label="Last Name" @bind-Value="Student.LastName" For="@(() => Student.LastName)"></MudTextField>
<MudTextField T="string" Label="Email Adress" @bind-Value="Student.Email" For="@(() => Student.Email)"></MudTextField>
WebApp/Components/Features/Students/EventRanking.razor
+2 -2
View File
@@ -18,7 +18,7 @@
else
{
<MudStack Spacing="4">
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<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>
@@ -64,7 +64,7 @@ else
</MudTable>
</MudPaper>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<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>
WebApp/Components/Features/Students/Index.razor
+3 -3
View File
@@ -15,7 +15,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudDataGrid T="Student"
ServerData="ServerReload"
@ref="_dataGrid"
@@ -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">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<div class="d-flex align-center flex-wrap" style="gap: 0.25rem;">
<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>
}
</MudStack>
</div>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
TooltipText="Edit"
WebApp/Components/Features/Students/Registration.razor
+5 -4
View File
@@ -19,7 +19,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.body2" Class="mb-2">
<MudIcon Icon="@AppIcons.Captain" Size="Size.Small" /> = Team Captain
</MudText>
@@ -78,8 +78,9 @@
var teamsToDisplay = _showRegionalOnly
? 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)
}
<div class="d-flex flex-wrap" style="gap: 0.25rem;">
@foreach (var team in teamsToDisplay)
{
var isCaptain = team.Captain != null && team.Captain.Equals(context.Item.Student);
var teamMembers = string.Join(", ", team.Students.Select(s => s.FirstName));
@@ -97,7 +98,7 @@
</MudChip>
</MudTooltip>
}
}
</div>
</CellTemplate>
</TemplateColumn>
</Columns>
WebApp/Components/Features/Teams/Assignment.razor
+2 -2
View File
@@ -21,7 +21,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Elevation="2" Class="pa-6 mt-4">
<MudPaper Elevation="2" Class="pa-3 pa-md-6 mt-4">
<MudGrid>
<MudItem Style="width:160px;">
<MudNumericField @bind-Value="_parameters.TeamSizeLimit"
@@ -117,7 +117,7 @@
<MudButton Class="ma-3" OnClick="Solve" Variant="Variant.Filled" Color="Color.Primary" Disabled="@_isSolving">Solve</MudButton>
</MudPaper>
<MudPaper Elevation="2" Class="pa-6 mt-4">
<MudPaper Elevation="2" Class="pa-3 pa-md-6 mt-4">
<MudGrid>
<MudItem xs="12" lg="8">
<MudText Typo="Typo.h5" Class="mb-4">Students</MudText>
WebApp/Components/Features/Teams/Components/TeamStudents.razor
+32 -30
View File
@@ -1,35 +1,37 @@
@using WebApp.Models
@foreach (var student in
Team.Students
.OrderBy(e =>
e.EventRankings
.Find(er => er.EventDefinition == Team.Event)?.Rank ?? 10)
.ThenBy(s => s.Grade + s.TsaYear))
{
var eventRank =
student.EventRankings
.Find(e => e.EventDefinition == Team.Event)?.Rank;
var color = AppIcons.RankedEventColor(eventRank ?? 0);
var captain = Team.Captain != null && Team.Captain.Equals(student);
var rankLabel = eventRank.HasValue ? $"Rank {eventRank}" : "Unranked";
<div class="d-flex flex-wrap" style="gap: 0.25rem;">
@foreach (var student in
Team.Students
.OrderBy(e =>
e.EventRankings
.Find(er => er.EventDefinition == Team.Event)?.Rank ?? 10)
.ThenBy(s => s.Grade + s.TsaYear))
{
var eventRank =
student.EventRankings
.Find(e => e.EventDefinition == Team.Event)?.Rank;
var color = AppIcons.RankedEventColor(eventRank ?? 0);
var captain = Team.Captain != null && Team.Captain.Equals(student);
var rankLabel = eventRank.HasValue ? $"Rank {eventRank}" : "Unranked";
<MudTooltip Text="@rankLabel">
<MudChip T="string"
Size="Size.Medium"
Variant="Variant.Outlined"
Class="mx-1 my-1">
@if (eventRank.HasValue)
{
<span style="@($"display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: {color}; margin-right: 6px;")")></span>
}
@student.FirstName
@if (captain && Team.Event.EventFormat != EventFormat.Individual)
{
<MudIcon Icon="@AppIcons.Captain" Size="Size.Small" Style="margin-left: 4px;" />
}
</MudChip>
</MudTooltip>
}
<MudTooltip Text="@rankLabel">
<MudChip T="string"
Size="Size.Medium"
Variant="Variant.Outlined"
Class="mx-1 my-1">
@if (eventRank.HasValue)
{
<span style="@($"display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: {color}; margin-right: 6px;")")"></span>
}
@student.FirstName
@if (captain && Team.Event.EventFormat != EventFormat.Individual)
{
<MudIcon Icon="@AppIcons.Captain" Size="Size.Small" Style="margin-left: 4px;" />
}
</MudChip>
</MudTooltip>
}
</div>
@code {
[Parameter]
WebApp/Components/Features/Teams/Create.razor
+1 -1
View File
@@ -30,7 +30,7 @@
<MudGrid>
<MudItem xs="12" sm="7">
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudSelect T="EventDefinition" Value="@Team.Event" ValueChanged="OnEventChanged" Label="Event">
@foreach (var evt in _events)
WebApp/Components/Features/Teams/Details.razor
+1 -1
View File
@@ -29,7 +29,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudText Typo="Typo.h5" Class="mb-4">Team Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6">
WebApp/Components/Features/Teams/Edit.razor
+1 -1
View File
@@ -29,7 +29,7 @@
<MudGrid>
<MudItem xs="12" sm="7">
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<StudentToggleSelector Students="@_students"
@bind-SelectedStudents="_selectedStudents"
Title="Students"
WebApp/Components/Features/Teams/Goals.razor
+1 -1
View File
@@ -16,7 +16,7 @@
}
else
{
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
@foreach (var student in _students)
{
<MudContainer Class="pagebreak">
WebApp/Components/Features/Teams/Index.razor
+1 -1
View File
@@ -21,7 +21,7 @@
</ActionButtons>
</PageHeader>
<MudPaper Elevation="2" Class="pa-6">
<MudPaper Elevation="2" Class="pa-3 pa-md-6">
<MudDataGrid T="Team"
ServerData="ServerReload"
@ref="_dataGrid"
WebApp/Components/Shared/Layout/MainLayout.razor
+3 -1
View File
@@ -9,7 +9,9 @@
<MudLayout>
<MudAppBar Class="no-print">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
TSA Chapter Organizer - @Configuration["ChapterSettings:Name"]
<MudText Typo="Typo.h6" Class="text-truncate appbar-title">
TSA Chapter Organizer - @Configuration["ChapterSettings:Name"]
</MudText>
<MudSpacer />
<AuthorizeView>
<form action="Auth/CookieLogout" method="post">
WebApp/wwwroot/app.css
+41
View File
@@ -56,6 +56,19 @@
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.page-header-actions {
width: 100%;
margin-top: 0.5rem;
}
.page-header > div > div:first-of-type {
flex-direction: column;
align-items: flex-start !important;
}
}
.form-actions {
@@ -66,6 +79,17 @@
margin-bottom: 1rem;
}
@media (max-width: 600px) {
.form-actions {
flex-direction: column;
width: 100%;
}
.form-actions > * {
width: 100%;
}
}
.icon-button-hover-error:hover {
color: var(--mud-palette-error) !important;
}
@@ -87,4 +111,21 @@
to {
opacity: 1;
}
}
/* Toolbar title responsive styling */
.appbar-title {
max-width: calc(100vw - 150px);
}
@media (max-width: 600px) {
.appbar-title {
font-size: 0.875rem;
max-width: calc(100vw - 120px);
}
/* Reduce base font size on mobile */
body {
font-size: 0.875rem;
}
}