1
0
mirror of synced 2024-11-13 18:10:52 +01:00

Add scroll to top button to main layout

This commit is contained in:
shiibe 2022-09-10 18:21:14 -04:00
parent 8750436f70
commit 87e61bd77c
4 changed files with 18 additions and 8 deletions

View File

@ -113,10 +113,6 @@
</MudStack>
</MudItem>
</MudGrid>
<MudScrollToTop>
<MudFab Color="Color.Secondary" Icon="@Icons.Filled.ArrowCircleUp"/>
</MudScrollToTop>
}
@code {

View File

@ -26,14 +26,16 @@
else
{
<MudItem xs="12">
<MudTabs Elevation="0" Border="true" Rounded="true" ApplyEffectsToContainer="true" PanelClass="py-6">
<MudTabs Elevation="0" Border="true" Rounded="true" ApplyEffectsToContainer="true" Outlined="true" Class="mb-10">
@foreach (var difficulty in Enum.GetValues<Difficulty>())
{
@if (difficulty is not Difficulty.None)
{
<MudTabPanel Text="@GetDifficultyTitle(difficulty)" Icon="@GetDifficultyIcon(difficulty)">
<MudTabPanel Text="@GetDifficultyTitle(difficulty)"
Icon="@GetDifficultyIcon(difficulty)">
<MudDataGrid Items="@response.SongBestData.Where(data => data.Difficulty == difficulty)"
ColumnResizeMode="ResizeMode.Container">
ColumnResizeMode="ResizeMode.Container" RowsPerPage="25" Elevation="0">
<Columns>
<Column T="SongBestData" Field="@nameof(SongBestData.SongId)" Title="Song" StickyLeft="true" Class="clm-row-large">
<CellTemplate>
@ -75,7 +77,7 @@
</MudTooltip>
</CellTemplate>
</Column>
<Column T="SongBestData" Field="@nameof(SongBestData.BestScoreRank)" Title="Best Rank">
<Column T="SongBestData" Field="@nameof(SongBestData.BestScoreRank)" Title="Best Rank" Sortable="false">
<CellTemplate>
@if (context.Item.BestScoreRank is not ScoreRank.None)
{
@ -96,6 +98,7 @@
<MudDataGridPager T="SongBestData"/>
</PagerContent>
</MudDataGrid>
</MudTabPanel>
}
}

View File

@ -17,6 +17,10 @@
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-8">
@Body
<MudScrollToTop>
<MudFab Color="Color.Secondary" Icon="@Icons.Filled.ArrowCircleUp" />
</MudScrollToTop>
</MudContainer>
</MudMainContent>
</MudLayout>

View File

@ -8,6 +8,13 @@
<base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<style>
.difficulty-tab .mud-badge.mud-badge-top.right {
inset: auto auto calc(100% - 8px) 100%;
font-size: 10px;
height: 18px;
}
</style>
</head>
<body>