brister/jsmr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Updated tags/creators page styling.
All checks were successful
ci / build-test (push) Successful in 2m30s
Details
ci / publish-image (push) Successful in 1m42s
Details

Browse Source
This commit is contained in:
Brian Bicknell
2026-04-21 00:41:31 -04:00
parent da33973229
commit 6bc91b293d
2 changed files with 75 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
JSMR.UI.Blazor/Pages/Creators.razor
View File

@@ -11,37 +11,46 @@
<PageTitle>Creators</PageTitle> <PageTitle>Creators</PageTitle>
<h1>Creators</h1> @* <h1>Creators</h1>
<MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" /> <MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
*@
<AntDesign.Card Title=@("Creators") Class="ant-blurred-card">
<AntDesign.Table DataSource="@(searchResults?.Items ?? Enumerable.Empty<CreatorSearchItem>())" <Extra>
Total="@(searchResults?.TotalItems ?? 0)" <AntDesign.Input TValue="string" Value="Keywords" ValueChanged="OnKeywordsChanged" DebounceMilliseconds="500" Placeholder="Filter">
TItem="CreatorSearchItem" <Prefix>
Loading="LoadingData" <AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" />
HidePagination="@true" </Prefix>
RemoteDataSource="@true" </AntDesign.Input>
RowKey="x=>x.CreatorId" </Extra>
OnChange="HandleTableChange"> <Body>
<ColumnDefinitions> <AntDesign.Table DataSource="@(searchResults?.Items ?? Enumerable.Empty<CreatorSearchItem>())"
<AntDesign.PropertyColumn Property="c => c.Name" Title="Name" Sortable="true" SorterMultiple="4" /> Total="@(searchResults?.TotalItems ?? 0)"
<AntDesign.PropertyColumn Property="c => c.VoiceWorkCount" Title="Voice Works" Format="n0" HeaderStyle="width: 10em" Sortable="true" SorterMultiple="4"> TItem="CreatorSearchItem"
<AntDesign.Button Size="AntDesign.ButtonSize.Small" Type="AntDesign.ButtonType.Link" OnClick="@(e => NavigateToVoiceWorkSearch(context))" Style="display:flex;justify-self:flex-end;">@context.VoiceWorkCount.ToString("n0")</AntDesign.Button> Loading="LoadingData"
</AntDesign.PropertyColumn> HidePagination="@true"
<AntDesign.PropertyColumn Property="c => c.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable="true" SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="4"> RemoteDataSource="@true"
@if (context.Favorite) RowKey="x=>x.CreatorId"
{ OnChange="HandleTableChange">
<AntDesign.Tag Color="AntDesign.TagColor.PurpleInverse">Favorite</AntDesign.Tag> <ColumnDefinitions>
} <AntDesign.PropertyColumn Property="c => c.Name" Title="Name" Sortable="true" SorterMultiple="4" />
</AntDesign.PropertyColumn> <AntDesign.PropertyColumn Property="c => c.VoiceWorkCount" Title="Voice Works" Format="n0" HeaderStyle="width: 10em" Sortable="true" SorterMultiple="4">
<AntDesign.PropertyColumn Property="c => c.Blacklisted" Title="Blacklisted" HeaderStyle="width: 8em" Sortable="true" SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="4"> <AntDesign.Button Size="AntDesign.ButtonSize.Small" Type="AntDesign.ButtonType.Link" OnClick="@(e => NavigateToVoiceWorkSearch(context))" Style="display:flex;justify-self:flex-end;">@context.VoiceWorkCount.ToString("n0")</AntDesign.Button>
@if (context.Blacklisted) </AntDesign.PropertyColumn>
{ <AntDesign.PropertyColumn Property="c => c.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable="true" SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="4">
<AntDesign.Tag Color="AntDesign.TagColor.RedInverse">Blacklisted</AntDesign.Tag> @if (context.Favorite)
} {
</AntDesign.PropertyColumn> <AntDesign.Tag Color="AntDesign.TagColor.PurpleInverse">Favorite</AntDesign.Tag>
@* <AntDesign.ActionColumn HeaderStyle="width: 2em"> }
</AntDesign.PropertyColumn>
<AntDesign.PropertyColumn Property="c => c.Blacklisted" Title="Blacklisted" HeaderStyle="width: 9em" Sortable="true" SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="4">
@if (context.Blacklisted)
{
<AntDesign.Tag Color="AntDesign.TagColor.RedInverse">Blacklisted</AntDesign.Tag>
}
</AntDesign.PropertyColumn>
@* <AntDesign.ActionColumn HeaderStyle="width: 2em">
<AntDesign.Dropdown Trigger="@(new AntDesign.Trigger[] { AntDesign.Trigger.Click })"> <AntDesign.Dropdown Trigger="@(new AntDesign.Trigger[] { AntDesign.Trigger.Click })">
<Overlay> <Overlay>
<AntDesign.Menu> <AntDesign.Menu>
@@ -55,8 +64,10 @@
</ChildContent> </ChildContent>
</AntDesign.Dropdown> </AntDesign.Dropdown>
</AntDesign.ActionColumn> *@ </AntDesign.ActionColumn> *@
</ColumnDefinitions> </ColumnDefinitions>
</AntDesign.Table> </AntDesign.Table>
</Body>
</AntDesign.Card>
<JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" /> <JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
@@ -65,6 +76,25 @@
table-layout: fixed; table-layout: fixed;
} }
body {
background-image: url(https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ETkNSJ-oUGwAAAAAQ_AAAAgAegCCAQ/original);
background-size: cover;
}
.ant-blurred-card {
background-color: color-mix(in srgb, #141414 70%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.ant-table {
/* background: inherit; */
}
.ant-table table {
table-layout: fixed;
}
.j-pager { .j-pager {
position: fixed; position: fixed;
bottom: 0; bottom: 0;

17
JSMR.UI.Blazor/Pages/Tags.razor
View File

@@ -72,6 +72,7 @@
</Body> </Body>
</AntDesign.Card> </AntDesign.Card>
<Pagination Current="PageNumber" OnChange="OnPaginationChange" PageSize="PageSize" Total="TotalItems" ShowTotal="ShowTotal"></Pagination>
<JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" /> <JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
</div> </div>
@@ -80,9 +81,9 @@
table-layout: fixed; table-layout: fixed;
} }
.mud-main-content { body {
background-image: url(https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ETkNSJ-oUGwAAAAAQ_AAAAgAegCCAQ/original); background-image: url(https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ETkNSJ-oUGwAAAAAQ_AAAAgAegCCAQ/original);
background-size: contain; background-size: cover;
} }
.ant-blurred-card { .ant-blurred-card {
@@ -120,6 +121,8 @@
public int PageSize { get; set; } = 100; public int PageSize { get; set; } = 100;
public int TotalItems => searchResults?.TotalItems ?? 0; public int TotalItems => searchResults?.TotalItems ?? 0;
Func<PaginationTotalContext, string> ShowTotal = ctx => $"{ctx.Range.from} - {ctx.Range.to} of {ctx.Total} items";
public bool LoadingData { get; set; } public bool LoadingData { get; set; }
SearchResult<TagSearchItem>? searchResults; SearchResult<TagSearchItem>? searchResults;
@@ -135,6 +138,16 @@
await UpdateDataAsync(true); await UpdateDataAsync(true);
} }
public async Task OnPaginationChange(PaginationEventArgs args)
{
bool resetPageNumber = PageSize != args.PageSize;
PageNumber = args.Page;
PageSize = args.PageSize;
await UpdateDataAsync(resetPageNumber);
}
public async Task OnPageNumberChanged(int newPageNumber) public async Task OnPageNumberChanged(int newPageNumber)
{ {
PageNumber = newPageNumber; PageNumber = newPageNumber;