Wrap pages in consistent container styling

Remove Back to List
This commit is contained in:
2025-12-26 23:45:32 -05:00
parent 4c05188867
commit 58cae98357
11 changed files with 112 additions and 93 deletions
@@ -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 {