timothy/ersatztv
1
0
Fork 0
Code Issues 51 Pull Requests 5 Actions Packages Projects Releases 9 Wiki Activity

improve mobile layout for some pages with tables (#2130)

Browse Source
This commit is contained in:
Jason Dove
2025-07-10 14:38:17 +00:00
committed by GitHub
parent 28a65e74bb
commit 5dfaa1a7ad
4 changed files with 250 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ErsatzTV/Pages/Channels.razor
+16 -9
View File
@@ -10,15 +10,22 @@
@inject NavigationManager NavigationManager
@inject IFFmpegSegmenterService SegmenterService
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudForm Style="max-height: 100%">
<MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" StartIcon="@Icons.Material.Filled.Add" Href="channels/add">
Add Channel
</MudButton>
</MudPaper>
<div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudText Typo="Typo.h5" Class="mb-2">Channels</MudText>
<MudDivider Class="mb-6"/>
<MudTable Hover="true"
@bind-RowsPerPage="@_rowsPerPage"
ServerData="@(new Func<TableState, CancellationToken, Task<TableData<ChannelViewModel>>>(ServerReload))"
@ref="_table">
<ToolBarContent>
<MudText Typo="Typo.h6">Channels</MudText>
</ToolBarContent>
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col style="width: 60px;"/>
<col/>
<col style="width: 15%"/>
@@ -26,6 +33,7 @@
<col style="width: 15%"/>
<col style="width: 15%"/>
<col style="width: 240px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>
@@ -107,10 +115,9 @@
<MudTablePager/>
</PagerContent>
</MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="channels/add" Class="mt-4">
Add Channel
</MudButton>
</MudContainer>
</MudContainer>
</div>
</MudForm>
@code {
private readonly CancellationTokenSource _cts = new();
@@ -209,7 +216,7 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Channel", parameters, options);
DialogResult result = await dialog.Result;
if (!result.Canceled)
if (result is { Canceled: false })
{
await Mediator.Send(new DeleteChannel(channel.Id), _cts.Token);
if (_table != null)
ErsatzTV/Pages/FFmpeg.razor
+16 -9
View File
@@ -5,17 +5,25 @@
@inject IMediator Mediator
@inject NavigationManager NavigationManager
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudForm Style="max-height: 100%">
<MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" StartIcon="@Icons.Material.Filled.Add" Href="ffmpeg/add">
Add Profile
</MudButton>
</MudPaper>
<div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudText Typo="Typo.h5" Class="mb-2">FFmpeg Profiles</MudText>
<MudDivider Class="mb-6"/>
<MudTable Hover="true" Items="_ffmpegProfiles">
<ToolBarContent>
<MudText Typo="Typo.h6">FFmpeg Profiles</MudText>
</ToolBarContent>
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/>
<col/>
<col/>
<col/>
<col style="width: 180px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
@@ -59,10 +67,9 @@
</MudTd>
</RowTemplate>
</MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="ffmpeg/add" Class="mt-4">
Add Profile
</MudButton>
</MudContainer>
</MudContainer>
</div>
</MudForm>
@code {
private readonly CancellationTokenSource _cts = new();
@@ -87,7 +94,7 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete FFmpeg Profile", parameters, options);
DialogResult result = await dialog.Result;
if (!result.Canceled)
if (result is { Canceled: false })
{
await Mediator.Send(new DeleteFFmpegProfile(ffmpegProfile.Id), _cts.Token);
await LoadFFmpegProfilesAsync(_cts.Token);
ErsatzTV/Pages/Watermarks.razor
+17 -10
View File
@@ -5,17 +5,25 @@
@inject IMediator Mediator
@inject NavigationManager NavigationManager
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudForm Style="max-height: 100%">
<MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" StartIcon="@Icons.Material.Filled.Add" Href="watermarks/add">
Add Watermark
</MudButton>
</MudPaper>
<div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudText Typo="Typo.h5" Class="mb-2">Watermarks</MudText>
<MudDivider Class="mb-6"/>
<MudTable Hover="true" Items="_watermarks">
<ToolBarContent>
<MudText Typo="Typo.h6">Watermarks</MudText>
</ToolBarContent>
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/>
<col/>
<col/>
<col/>
<col style="width: 180px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
@@ -63,10 +71,9 @@
</MudTd>
</RowTemplate>
</MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="watermarks/add" Class="mt-4">
Add Watermark
</MudButton>
</MudContainer>
</MudContainer>
</div>
</MudForm>
@code {
private readonly CancellationTokenSource _cts = new();
@@ -91,7 +98,7 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Watermark", parameters, options);
DialogResult result = await dialog.Result;
if (!result.Canceled)
if (result is { Canceled: false })
{
await Mediator.Send(new DeleteWatermark(watermark.Id), _cts.Token);
await LoadWatermarksAsync();
@@ -105,7 +112,7 @@
IDialogReference dialog = await Dialog.ShowAsync<CopyWatermarkDialog>("Copy Watermark", parameters, options);
DialogResult dialogResult = await dialog.Result;
if (!dialogResult.Canceled && dialogResult.Data is WatermarkViewModel data)
if (dialogResult is { Canceled: false, Data: WatermarkViewModel data })
{
NavigationManager.NavigateTo($"/watermarks/{data.Id}");
}
ErsatzTV/wwwroot/css/site.css
+4
View File
@@ -159,3 +159,7 @@
.form-field-stack div.mud-input-control {
max-width: 500px;
}
.mud-table-smalldevices-sortselect {
display: none !important;
}