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

Updated CI for Blazor WebAssembly. Added styles for product cards.
All checks were successful
ci / build-test (push) Successful in 2m16s
Details
ci / publish-image (push) Has been skipped
Details

Browse Source
This commit is contained in:
Brian Bicknell
2025-11-15 02:34:15 -05:00
parent 76284f2fab
commit 634050c06f
13 changed files with 289 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
JSMR.UI.Blazor/Pages/Circles.razor
View File

@@ -40,11 +40,13 @@ else
@foreach (var item in searchResults.Items)
{
<div class="circle-item">
@* <JImage @key="item.CircleId" ContainerClass="j-circle-image-container" ImageClass="j-circle-image" Source="@ImageUrlProvider.GetImageURL(item.LatestProductId, item.LatestVoiceWorkHasImage ?? false, item.LatestVoiceWorkSalesDate, "main")" /> *@
<JImage @key="item.CircleId" ContainerClass="j-circle-image-container-2" ImageClass="j-circle-image-2" Source="@ImageUrlProvider.GetImageURL(item.LatestProductId, item.LatestVoiceWorkHasImage ?? false, item.LatestVoiceWorkSalesDate, "main")" />
<div class="fdfs">
<div class="circle-name">@item.Name</div>
<div>@item.MakerId</div>
</div>
@if (item.Favorite)
{
<MudChip T="string" Label="true" Color="Color.Info" Style="width: 100%" Variant="Variant.Outlined">Favorite</MudChip>
@@ -195,7 +197,7 @@ else
.circle-item {
display: flex;
align-items: center;
padding: 1rem;
padding: .5rem;
border-width: 2px;
border-top-color: #353B4C;
border-left-color: #212630;
@@ -204,8 +206,23 @@ else
border-radius: 30px;
background-image: linear-gradient(0deg, #1C2029, #1C1F28);
display: grid;
grid-template-columns: 1fr 100px 100px 100px 100px;
grid-column-gap: 2rem;
grid-template-columns: auto 1fr 100px 100px 100px 100px;
grid-column-gap: 1rem;
}
.j-circle-image-container-2 {
height: auto;
}
.j-circle-image-2 {
display: block;
object-fit: cover;
background-color: black;
border: 1px solid #949494;
box-sizing: border-box;
border-radius: 100%;
width: 70px;
height: 70px;
}
.circle-name {

118
JSMR.UI.Blazor/Pages/Home.razor
View File

@@ -1,70 +1,84 @@
@page "/"
@inject VoiceWorksClient Client
@using JSMR.Application.VoiceWorks.Queries.Search
@using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Services
<PageTitle>Home</PageTitle>
<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
<MudTabPanel Text="Available" Icon="@Icons.Material.Filled.Home">
@if (availableVoiceWorks is null)
{
<p>Loading…</p>
}
else if (availableVoiceWorks.Length == 0)
{
<p>No results.</p>
}
else
{
<ul>
@foreach (var v in availableVoiceWorks)
{
<li>@v.ProductId – @v.ProductName</li>
}
</ul>
}
<JProductCollection Products="availableVoiceWorks"></JProductCollection>
</MudTabPanel>
<MudTabPanel Text="Upcoming" Icon="@Icons.Material.Filled.ArrowUpward">
@if (upcomingVoiceWorks is null)
{
<p>Loading…</p>
}
else if (upcomingVoiceWorks.Length == 0)
{
<p>No results.</p>
}
else
{
<ul>
@foreach (var v in upcomingVoiceWorks)
{
<li>@v.ProductId – @v.ProductName</li>
}
</ul>
}
<JProductCollection Products="upcomingVoiceWorks"></JProductCollection>
</MudTabPanel>
<MudTabPanel Text="Announcements" Icon="@Icons.Material.Filled.Home">
@if (announcedVoiceWorks is null)
{
<p>Loading…</p>
}
else if (announcedVoiceWorks.Length == 0)
{
<p>No results.</p>
}
else
{
<ul>
@foreach (var v in announcedVoiceWorks)
{
<li>@v.ProductId – @v.ProductName</li>
}
</ul>
}
<JProductCollection Products="announcedVoiceWorks"></JProductCollection>
</MudTabPanel>
</MudTabs>
<style>
.j-product-items-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.j-voice-work-card {
display: flex;
gap: 1rem;
background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(39, 59, 73));
border-color: rgb(63, 78, 88);
background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(57, 79, 94));
}
.j-voice-work-image-container {
width: 240px;
width: 300px;
}
.j-voice-work-card > .j-voice-work-image-container {
flex-shrink: 0;
}
.j-voice-work-image {
border-radius: 20px;
}
.j-voice-work-content {
display: flex;
flex-direction: column;
gap: .5rem;
}
.j-voice-work-card > .j-voice-work-content {
flex-grow: 1;
}
.j-product-title {
font-size: 1.25rem;
font-weight: 600;
font-family: "Poppins", "M+ 1p";
color: #d2dce6;
text-shadow: 1px 1px 2px black;
}
.j-product-description {
/* color: #7C8099; */
font-size: 1rem;
font-family: "Poppins", "M+ 1p";
}
.j-voice-work-info {
width: 240px;
}
.j-voice-work-card > .j-voice-work-info {
flex-shrink: 0;
}
</style>
@code {
VoiceWorkSearchResult[]? availableVoiceWorks;
VoiceWorkSearchResult[]? upcomingVoiceWorks;
@@ -143,7 +157,7 @@
},
SortOptions =
[
//new(VoiceWorkSortField.Fa, Application.Common.Search.SortDirection.Ascending),
new(VoiceWorkSortField.FavoriteCircle, Application.Common.Search.SortDirection.Ascending),
new(VoiceWorkSortField.WishlistCount, Application.Common.Search.SortDirection.Descending)
]
}

29
JSMR.UI.Blazor/Pages/VoiceWorks.razor
View File

@@ -1,5 +1,6 @@
@page "/voiceworks"
@using JSMR.Application.VoiceWorks.Queries.Search
@using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Services
@inject VoiceWorksClient Client
@@ -7,26 +8,10 @@
<h3>VoiceWorks</h3>
@if (items is null)
{
<p>Loading…</p>
}
else if (items.Count == 0)
{
<p>No results.</p>
}
else
{
<ul>
@foreach (var v in items)
{
<li>@v.ProductId – @v.ProductName</li>
}
</ul>
}
<JProductCollection Products="items"></JProductCollection>
@code {
List<VoiceWorkSearchResult>? items;
VoiceWorkSearchResult[]? items;
protected override async Task OnInitializedAsync()
{
@@ -36,12 +21,6 @@ else
var result = await Client.SearchAsync(request);
// if (result.Ok)
// {
// items = result.Value!.Results.Items.ToList();
// }
//items = result.Value?.Results.Items ?? [];
items = result.Results.Items.ToList();
items = result?.Results.Items ?? [];
}
}