pimhwang
/
ErsatzTV
mirror of https://github.com/ErsatzTV/ErsatzTV.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/2131/head
Jason Dove 1 month ago committed by GitHub
parent
28a65e74bb
commit
5dfaa1a7ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 250 additions and 225 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      ErsatzTV/Pages/Channels.razor
  2. 25
      ErsatzTV/Pages/FFmpeg.razor
  3. 27
      ErsatzTV/Pages/Watermarks.razor
  4. 4
      ErsatzTV/wwwroot/css/site.css

25
ErsatzTV/Pages/Channels.razor
Unescape View File

@ -10,15 +10,22 @@
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
@inject IFFmpegSegmenterService SegmenterService @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" <MudTable Hover="true"
@bind-RowsPerPage="@_rowsPerPage" @bind-RowsPerPage="@_rowsPerPage"
ServerData="@(new Func<TableState, CancellationToken, Task<TableData<ChannelViewModel>>>(ServerReload))" ServerData="@(new Func<TableState, CancellationToken, Task<TableData<ChannelViewModel>>>(ServerReload))"
@ref="_table"> @ref="_table">
<ToolBarContent>
<MudText Typo="Typo.h6">Channels</MudText>
</ToolBarContent>
<ColGroup> <ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col style="width: 60px;"/> <col style="width: 60px;"/>
<col/> <col/>
<col style="width: 15%"/> <col style="width: 15%"/>
@ -26,6 +33,7 @@
<col style="width: 15%"/> <col style="width: 15%"/>
<col style="width: 15%"/> <col style="width: 15%"/>
<col style="width: 240px;"/> <col style="width: 240px;"/>
</MudHidden>
</ColGroup> </ColGroup>
<HeaderContent> <HeaderContent>
<MudTh> <MudTh>
@ -107,10 +115,9 @@
<MudTablePager/> <MudTablePager/>
</PagerContent> </PagerContent>
</MudTable> </MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="channels/add" Class="mt-4"> </MudContainer>
Add Channel </div>
</MudButton> </MudForm>
</MudContainer>
@code { @code {
private readonly CancellationTokenSource _cts = new(); private readonly CancellationTokenSource _cts = new();
@ -209,7 +216,7 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Channel", parameters, options); IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Channel", parameters, options);
DialogResult result = await dialog.Result; DialogResult result = await dialog.Result;
if (!result.Canceled) if (result is { Canceled: false })
{ {
await Mediator.Send(new DeleteChannel(channel.Id), _cts.Token); await Mediator.Send(new DeleteChannel(channel.Id), _cts.Token);
if (_table != null) if (_table != null)

25
ErsatzTV/Pages/FFmpeg.razor
Unescape View File

@ -5,17 +5,25 @@
@inject IMediator Mediator @inject IMediator Mediator
@inject NavigationManager NavigationManager @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"> <MudTable Hover="true" Items="_ffmpegProfiles">
<ToolBarContent>
<MudText Typo="Typo.h6">FFmpeg Profiles</MudText>
</ToolBarContent>
<ColGroup> <ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/> <col/>
<col/> <col/>
<col/> <col/>
<col/> <col/>
<col style="width: 180px;"/> <col style="width: 180px;"/>
</MudHidden>
</ColGroup> </ColGroup>
<HeaderContent> <HeaderContent>
<MudTh>Name</MudTh> <MudTh>Name</MudTh>
@ -59,10 +67,9 @@
</MudTd> </MudTd>
</RowTemplate> </RowTemplate>
</MudTable> </MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="ffmpeg/add" Class="mt-4"> </MudContainer>
Add Profile </div>
</MudButton> </MudForm>
</MudContainer>
@code { @code {
private readonly CancellationTokenSource _cts = new(); private readonly CancellationTokenSource _cts = new();
@ -87,7 +94,7 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete FFmpeg Profile", parameters, options); IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete FFmpeg Profile", parameters, options);
DialogResult result = await dialog.Result; DialogResult result = await dialog.Result;
if (!result.Canceled) if (result is { Canceled: false })
{ {
await Mediator.Send(new DeleteFFmpegProfile(ffmpegProfile.Id), _cts.Token); await Mediator.Send(new DeleteFFmpegProfile(ffmpegProfile.Id), _cts.Token);
await LoadFFmpegProfilesAsync(_cts.Token); await LoadFFmpegProfilesAsync(_cts.Token);

27
ErsatzTV/Pages/Watermarks.razor
Unescape View File

@ -5,17 +5,25 @@
@inject IMediator Mediator @inject IMediator Mediator
@inject NavigationManager NavigationManager @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"> <MudTable Hover="true" Items="_watermarks">
<ToolBarContent>
<MudText Typo="Typo.h6">Watermarks</MudText>
</ToolBarContent>
<ColGroup> <ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/> <col/>
<col/> <col/>
<col/> <col/>
<col/> <col/>
<col style="width: 180px;"/> <col style="width: 180px;"/>
</MudHidden>
</ColGroup> </ColGroup>
<HeaderContent> <HeaderContent>
<MudTh>Name</MudTh> <MudTh>Name</MudTh>
@ -63,10 +71,9 @@
</MudTd> </MudTd>
</RowTemplate> </RowTemplate>
</MudTable> </MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="watermarks/add" Class="mt-4"> </MudContainer>
Add Watermark </div>
</MudButton> </MudForm>
</MudContainer>
@code { @code {
private readonly CancellationTokenSource _cts = new(); private readonly CancellationTokenSource _cts = new();
@ -91,7 +98,7 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Watermark", parameters, options); IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Watermark", parameters, options);
DialogResult result = await dialog.Result; DialogResult result = await dialog.Result;
if (!result.Canceled) if (result is { Canceled: false })
{ {
await Mediator.Send(new DeleteWatermark(watermark.Id), _cts.Token); await Mediator.Send(new DeleteWatermark(watermark.Id), _cts.Token);
await LoadWatermarksAsync(); await LoadWatermarksAsync();
@ -105,7 +112,7 @@
IDialogReference dialog = await Dialog.ShowAsync<CopyWatermarkDialog>("Copy Watermark", parameters, options); IDialogReference dialog = await Dialog.ShowAsync<CopyWatermarkDialog>("Copy Watermark", parameters, options);
DialogResult dialogResult = await dialog.Result; 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}"); NavigationManager.NavigateTo($"/watermarks/{data.Id}");
} }

4
ErsatzTV/wwwroot/css/site.css
Unescape View File

@ -159,3 +159,7 @@
.form-field-stack div.mud-input-control { .form-field-stack div.mud-input-control {
max-width: 500px; max-width: 500px;
} }
.mud-table-smalldevices-sortselect {
display: none !important;
}
Write Preview
Loading…
Cancel
Save