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> </ActionButtons>
</PageHeader> </PageHeader>
<MudPaper Class="pa-4 mt-4"> <MudPaper Elevation="2" Class="pa-6">
<MudGrid> <MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
<MudItem xs="12" sm="6" md="4"> <MudGrid Spacing="3">
<MudText Typo="Typo.subtitle2">Name</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@eventdefinition.Name</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Name</MudText>
</MudItem> <MudText Typo="Typo.body1">@eventdefinition.Name</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Short Name</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@eventdefinition.ShortName</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Short Name</MudText>
</MudItem> <MudText Typo="Typo.body1">@eventdefinition.ShortName</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Event Format</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@eventdefinition.EventFormat</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Event Format</MudText>
</MudItem> <MudText Typo="Typo.body1">@eventdefinition.EventFormat</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Min Team Size</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@eventdefinition.MinTeamSize</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Min Team Size</MudText>
</MudItem> <MudText Typo="Typo.body1">@eventdefinition.MinTeamSize</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Max Team Size</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@eventdefinition.MaxTeamSize</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Max Team Size</MudText>
</MudItem> <MudText Typo="Typo.body1">@eventdefinition.MaxTeamSize</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Chapter Eligibility Count (State)</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@eventdefinition.ChapterEligibilityCountState</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Level of Effort</MudText>
</MudItem> <MudText Typo="Typo.body1">@eventdefinition.LevelOfEffort</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Regional Event</MudText> </MudGrid>
<MudText>@eventdefinition.RegionalEvent</MudText>
</MudItem> <MudDivider Class="my-6" />
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Presubmission Required</MudText> <MudText Typo="Typo.h5" Class="mb-4">Competition Details</MudText>
<MudText>@eventdefinition.Presubmission</MudText> <MudGrid Spacing="3">
</MudItem> <MudItem xs="12" sm="6" md="4">
<MudItem xs="12" sm="6" md="4"> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Chapter Eligibility Count (State)</MudText>
<MudText Typo="Typo.subtitle2">Level of Effort</MudText> <MudText Typo="Typo.body1">@eventdefinition.ChapterEligibilityCountState</MudText>
<MudText>@eventdefinition.LevelOfEffort</MudText> </MudItem>
</MudItem> <MudItem xs="12" sm="6" md="4">
<MudItem xs="12"> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Regional Event</MudText>
<MudText Typo="Typo.subtitle2">Semifinalist Activity</MudText> <MudText Typo="Typo.body1">@eventdefinition.RegionalEvent</MudText>
<MudText>@eventdefinition.SemifinalistActivity</MudText> </MudItem>
</MudItem> <MudItem xs="12" sm="6" md="4">
<MudItem xs="12"> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Presubmission Required</MudText>
<MudText Typo="Typo.subtitle2">Notes</MudText> <MudText Typo="Typo.body1">@eventdefinition.Presubmission</MudText>
<MudText>@eventdefinition.Notes</MudText> </MudItem>
</MudItem> <MudItem xs="12">
<MudItem xs="12"> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Semifinalist Activity</MudText>
<MudText Typo="Typo.subtitle2">Documentation</MudText> <MudText Typo="Typo.body1">@eventdefinition.SemifinalistActivity</MudText>
<MudText>@eventdefinition.Documentation</MudText> </MudItem>
</MudItem> </MudGrid>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2">Eligibility</MudText> <MudDivider Class="my-6" />
<MudText>@eventdefinition.Eligibility</MudText>
</MudItem> <MudText Typo="Typo.h5" Class="mb-4">Additional Information</MudText>
<MudItem xs="12"> <MudGrid Spacing="3">
<MudText Typo="Typo.subtitle2">Theme</MudText> <MudItem xs="12">
<MudText>@eventdefinition.Theme</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Eligibility</MudText>
</MudItem> <MudText Typo="Typo.body1">@eventdefinition.Eligibility</MudText>
<MudItem xs="12"> </MudItem>
<MudText Typo="Typo.subtitle2">Description</MudText> <MudItem xs="12">
<MudText>@eventdefinition.Description</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Theme</MudText>
</MudItem> <MudText Typo="Typo.body1">@eventdefinition.Theme</MudText>
</MudGrid> </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> </MudPaper>
@code { @code {
WebApp/Components/Features/Students/Details.razor
+50 -43
View File
@@ -27,49 +27,56 @@
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
<MudPaper Class="pa-4 mt-4"> <MudPaper Elevation="2" Class="pa-6">
<MudGrid> <MudText Typo="Typo.h5" Class="mb-4">Student Information</MudText>
<MudItem xs="12" sm="6" md="4"> <MudGrid Spacing="3">
<MudText Typo="Typo.subtitle2">First Name</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@student.FirstName</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">First Name</MudText>
</MudItem> <MudText Typo="Typo.body1">@student.FirstName</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Last Name</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@student.LastName</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Last Name</MudText>
</MudItem> <MudText Typo="Typo.body1">@student.LastName</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Grade</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@student.Grade</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Grade</MudText>
</MudItem> <MudText Typo="Typo.body1">@student.Grade</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Email</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@student.Email</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Email</MudText>
</MudItem> <MudText Typo="Typo.body1">@student.Email</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">Phone Number</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@student.PhoneNumber</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Phone Number</MudText>
</MudItem> <MudText Typo="Typo.body1">@student.PhoneNumber</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">TSA Year</MudText> <MudItem xs="12" sm="6" md="4">
<MudText>@student.TsaYear</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">TSA Year</MudText>
</MudItem> <MudText Typo="Typo.body1">@student.TsaYear</MudText>
<MudItem xs="12" sm="6" md="4"> </MudItem>
<MudText Typo="Typo.subtitle2">State ID</MudText> </MudGrid>
<MudText>@student.StateId</MudText>
</MudItem> <MudDivider Class="my-6" />
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Regional ID</MudText> <MudText Typo="Typo.h5" Class="mb-4">TSA IDs</MudText>
<MudText>@student.RegionalId</MudText> <MudGrid Spacing="3">
</MudItem> <MudItem xs="12" sm="6" md="4">
<MudItem xs="12" sm="6" md="4"> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">State ID</MudText>
<MudText Typo="Typo.subtitle2">National ID</MudText> <MudText Typo="Typo.body1">@student.StateId</MudText>
<MudText>@student.NationalId</MudText> </MudItem>
</MudItem> <MudItem xs="12" sm="6" md="4">
<MudItem xs="12" sm="6" md="4"> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Regional ID</MudText>
<MudText Typo="Typo.subtitle2">Officer Role</MudText> <MudText Typo="Typo.body1">@student.RegionalId</MudText>
<MudText>@student.OfficerRole</MudText> </MudItem>
</MudItem> <MudItem xs="12" sm="6" md="4">
</MudGrid> <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> </MudPaper>
@code { @code {
WebApp/Components/Features/Teams/Details.razor
+8 -7
View File
@@ -30,26 +30,27 @@
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
<MudPaper Class="pa-4"> <MudPaper Elevation="2" Class="pa-6">
<MudGrid> <MudText Typo="Typo.h5" Class="mb-4">Team Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6"> <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> <MudText Typo="Typo.body1">@Team.Event.Name</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6"> <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> <MudText Typo="Typo.body1">@Team.Event.EventFormat</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6"> <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> <MudText Typo="Typo.body1">@(Team.Identifier ?? "N/A")</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6"> <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> <MudText Typo="Typo.body1">@(Team.Captain?.FirstNameLastName ?? "N/A")</MudText>
</MudItem> </MudItem>
<MudItem xs="12"> <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" /> <TeamStudents Team="@Team" />
</MudItem> </MudItem>
</MudGrid> </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 **Locations**: Throughout the application
**Current State**: Good theme typography definition, but inconsistent usage. **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 3. ✅ Add table density and hover properties
### Phase 2: Visual Polish (Medium Impact, Medium Effort) ### 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 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. Refine typography hierarchy usage 7. Audit and ensure button hierarchy consistency
8. Enhance event rank visualization 8. Enhance event rank visualization
9. Improve form layout grouping 9. Improve form layout grouping
10. Add micro-interactions and transitions 10. Add micro-interactions and transitions