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

Consistent Typography in Details pages.

Browse Source
This commit is contained in:
James Kolpack
2025-12-26 16:35:09 -05:00
parent 75a64faff0
commit ed9487a5ad
4 changed files with 137 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/Events/Details.razor
+76 -63
View File
@@ -28,69 +28,82 @@
</ActionButtons>
</PageHeader>
<MudPaper Class="pa-4 mt-4">
<MudGrid>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Name</MudText>
<MudText>@eventdefinition.Name</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Short Name</MudText>
<MudText>@eventdefinition.ShortName</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Event Format</MudText>
<MudText>@eventdefinition.EventFormat</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Min Team Size</MudText>
<MudText>@eventdefinition.MinTeamSize</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Max Team Size</MudText>
<MudText>@eventdefinition.MaxTeamSize</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Chapter Eligibility Count (State)</MudText>
<MudText>@eventdefinition.ChapterEligibilityCountState</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Regional Event</MudText>
<MudText>@eventdefinition.RegionalEvent</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Presubmission Required</MudText>
<MudText>@eventdefinition.Presubmission</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Level of Effort</MudText>
<MudText>@eventdefinition.LevelOfEffort</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2">Semifinalist Activity</MudText>
<MudText>@eventdefinition.SemifinalistActivity</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2">Notes</MudText>
<MudText>@eventdefinition.Notes</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2">Documentation</MudText>
<MudText>@eventdefinition.Documentation</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2">Eligibility</MudText>
<MudText>@eventdefinition.Eligibility</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2">Theme</MudText>
<MudText>@eventdefinition.Theme</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2">Description</MudText>
<MudText>@eventdefinition.Description</MudText>
</MudItem>
</MudGrid>
<MudPaper Elevation="2" Class="pa-6">
<MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Name</MudText>
<MudText Typo="Typo.body1">@eventdefinition.Name</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Short Name</MudText>
<MudText Typo="Typo.body1">@eventdefinition.ShortName</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Event Format</MudText>
<MudText Typo="Typo.body1">@eventdefinition.EventFormat</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Min Team Size</MudText>
<MudText Typo="Typo.body1">@eventdefinition.MinTeamSize</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Max Team Size</MudText>
<MudText Typo="Typo.body1">@eventdefinition.MaxTeamSize</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Level of Effort</MudText>
<MudText Typo="Typo.body1">@eventdefinition.LevelOfEffort</MudText>
</MudItem>
</MudGrid>
<MudDivider Class="my-6" />
<MudText Typo="Typo.h5" Class="mb-4">Competition Details</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Chapter Eligibility Count (State)</MudText>
<MudText Typo="Typo.body1">@eventdefinition.ChapterEligibilityCountState</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Regional Event</MudText>
<MudText Typo="Typo.body1">@eventdefinition.RegionalEvent</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Presubmission Required</MudText>
<MudText Typo="Typo.body1">@eventdefinition.Presubmission</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Semifinalist Activity</MudText>
<MudText Typo="Typo.body1">@eventdefinition.SemifinalistActivity</MudText>
</MudItem>
</MudGrid>
<MudDivider Class="my-6" />
<MudText Typo="Typo.h5" Class="mb-4">Additional Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Eligibility</MudText>
<MudText Typo="Typo.body1">@eventdefinition.Eligibility</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Theme</MudText>
<MudText Typo="Typo.body1">@eventdefinition.Theme</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Description</MudText>
<MudText Typo="Typo.body1">@eventdefinition.Description</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Documentation</MudText>
<MudText Typo="Typo.body1">@eventdefinition.Documentation</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Notes</MudText>
<MudText Typo="Typo.body1">@eventdefinition.Notes</MudText>
</MudItem>
</MudGrid>
</MudPaper>
@code {
WebApp/Components/Features/Students/Details.razor
+50 -43
View File
@@ -27,49 +27,56 @@
</ActionButtons>
</PageHeader>
<MudPaper Class="pa-4 mt-4">
<MudGrid>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">First Name</MudText>
<MudText>@student.FirstName</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Last Name</MudText>
<MudText>@student.LastName</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Grade</MudText>
<MudText>@student.Grade</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Email</MudText>
<MudText>@student.Email</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Phone Number</MudText>
<MudText>@student.PhoneNumber</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">TSA Year</MudText>
<MudText>@student.TsaYear</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">State ID</MudText>
<MudText>@student.StateId</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Regional ID</MudText>
<MudText>@student.RegionalId</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">National ID</MudText>
<MudText>@student.NationalId</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Officer Role</MudText>
<MudText>@student.OfficerRole</MudText>
</MudItem>
</MudGrid>
<MudPaper Elevation="2" Class="pa-6">
<MudText Typo="Typo.h5" Class="mb-4">Student Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">First Name</MudText>
<MudText Typo="Typo.body1">@student.FirstName</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Last Name</MudText>
<MudText Typo="Typo.body1">@student.LastName</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Grade</MudText>
<MudText Typo="Typo.body1">@student.Grade</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Email</MudText>
<MudText Typo="Typo.body1">@student.Email</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Phone Number</MudText>
<MudText Typo="Typo.body1">@student.PhoneNumber</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">TSA Year</MudText>
<MudText Typo="Typo.body1">@student.TsaYear</MudText>
</MudItem>
</MudGrid>
<MudDivider Class="my-6" />
<MudText Typo="Typo.h5" Class="mb-4">TSA IDs</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">State ID</MudText>
<MudText Typo="Typo.body1">@student.StateId</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Regional ID</MudText>
<MudText Typo="Typo.body1">@student.RegionalId</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">National ID</MudText>
<MudText Typo="Typo.body1">@student.NationalId</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Officer Role</MudText>
<MudText Typo="Typo.body1">@student.OfficerRole</MudText>
</MudItem>
</MudGrid>
</MudPaper>
@code {
WebApp/Components/Features/Teams/Details.razor
+8 -7
View File
@@ -30,26 +30,27 @@
</ActionButtons>
</PageHeader>
<MudPaper Class="pa-4">
<MudGrid>
<MudPaper Elevation="2" Class="pa-6">
<MudText Typo="Typo.h5" Class="mb-4">Team Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Event</MudText>
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Event</MudText>
<MudText Typo="Typo.body1">@Team.Event.Name</MudText>
</MudItem>
<MudItem xs="12" sm="6">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Event Format</MudText>
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Event Format</MudText>
<MudText Typo="Typo.body1">@Team.Event.EventFormat</MudText>
</MudItem>
<MudItem xs="12" sm="6">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Team Identifier</MudText>
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Team Identifier</MudText>
<MudText Typo="Typo.body1">@(Team.Identifier ?? "N/A")</MudText>
</MudItem>
<MudItem xs="12" sm="6">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Captain</MudText>
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Captain</MudText>
<MudText Typo="Typo.body1">@(Team.Captain?.FirstNameLastName ?? "N/A")</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Team Members</MudText>
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Team Members</MudText>
<TeamStudents Team="@Team" />
</MudItem>
</MudGrid>
docs/plans/style-improvements.md
+3 -3
View File
@@ -94,7 +94,7 @@ This document outlines recommended style improvements to enhance the visual desi
---
### 4. Refine Typography Hierarchy
### 4. Refine Typography Hierarchy ✅ COMPLETED
**Locations**: Throughout the application
**Current State**: Good theme typography definition, but inconsistent usage.
@@ -330,12 +330,12 @@ Consider using MudChip components with rank colors for better visual distinction
3. ✅ Add table density and hover properties
### Phase 2: Visual Polish (Medium Impact, Medium Effort)
4. Audit and ensure button hierarchy consistency
4. ✅ Refine typography hierarchy usage
5. Add loading states to all grids
6. Wrap pages in consistent container styling
### Phase 3: Enhancements (Nice to Have)
7. Refine typography hierarchy usage
7. Audit and ensure button hierarchy consistency
8. Enhance event rank visualization
9. Improve form layout grouping
10. Add micro-interactions and transitions