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

UI style updates.

Browse Source
This commit is contained in:
Brian Bicknell
2025-12-06 15:59:17 -05:00
parent 53228ed658
commit 14f9eb1235
6 changed files with 61 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
JSMR.UI.Blazor/Components/VoiceWorkFilters.razor
View File

@@ -167,26 +167,37 @@
</div>
<div class="search-filter-control-span-2"></div>
<div class="search-filter-control-span-1">
<BitDropdown Label="Age Ratings"
MultiSelect
<BitDropdown MultiSelect
Items="ageRatings"
Placeholder="Select..."
TItem="BitDropdownItem<AgeRating>"
TValue="AgeRating"
Values="@Value.AgeRatings"
ValuesChanged="@(values => Update(Value with { AgeRatings = [.. values] }))" />
ValuesChanged="@(values => Update(Value with { AgeRatings = [.. values] }))">
<PrefixTemplate>
<InputPrefix Graphic="Graphic.Age" Tooltip="Age Rating"></InputPrefix>
</PrefixTemplate>
</BitDropdown>
</div>
<div class="search-filter-control-span-1">
<BitDatePicker Label="Release Date Start"
<BitDatePicker IconLocation="BitIconLocation.Left"
ShowClearButton="true"
Value="@ToDto(Value.ReleaseDateStart)"
ValueChanged="@(value => Update(Value with { ReleaseDateStart = FromDto(value) }))" />
ValueChanged="@(value => Update(Value with { ReleaseDateStart = FromDto(value) }))">
<IconTemplate>
<InputPrefix Graphic="Graphic.Calendar" Tooltip="Release Date Start"></InputPrefix>
</IconTemplate>
</BitDatePicker>
</div>
<div class="search-filter-control-span-1">
<BitDatePicker Label="Release Date End"
<BitDatePicker IconLocation="BitIconLocation.Left"
ShowClearButton="true"
Value="@ToDto(Value.ReleaseDateEnd)"
ValueChanged="@(value => Update(Value with { ReleaseDateEnd = FromDto(value) }))" />
ValueChanged="@(value => Update(Value with { ReleaseDateEnd = FromDto(value) }))">
<IconTemplate>
<InputPrefix Graphic="Graphic.Calendar" Tooltip="Release Date End"></InputPrefix>
</IconTemplate>
</BitDatePicker>
</div>
@* <div class="search-filter-control-span-1">
<BitSlider Label="Downloads" Min="0" Max="100000" Value="MinDownloads" ValueChanged="OnMinDownloadsChanged" />

4
JSMR.UI.Blazor/Enums/Graphic.cs
View File

@@ -16,5 +16,7 @@ public enum Graphic
Tag,
Person,
Sort,
Grid
Grid,
Age,
Calendar
}

4
JSMR.UI.Blazor/Layout/MainLayout.razor
View File

@@ -10,12 +10,12 @@
<MudDrawer @bind-Open="@_open" ClipMode="_clipMode" Breakpoint="@_breakpoint" Elevation="1" Variant="@DrawerVariant.Mini">
<MudNavMenu>
<MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home" href="/">Home</MudNavLink>
<MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Tag" href="tags">Tags</MudNavLink>
<MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Headphones" href="voiceworks">Voice Works</MudNavLink>
<MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Circle" href="circles">Circles</MudNavLink>
<MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Tag" href="tags">Tags</MudNavLink>
<MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Person" href="creators">Creators</MudNavLink>
<MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.SatelliteAlt" href="scanner">Scanner</MudNavLink>
<MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.StackedLineChart" href="analytics">Analytics</MudNavLink>
<MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Headphones" href="voiceworks">Voice Works</MudNavLink>
</MudNavMenu>
</MudDrawer>
<MudMainContent Class="pt-18 px-8">

4
JSMR.UI.Blazor/wwwroot/css/app.css
View File

@@ -704,6 +704,10 @@ code {
mask-image: url("../svg/grid-view.svg");
}
.j-icon-age {
mask-image: url("../svg/age-rating.svg");
}
.j-icon-2 {
background-repeat: no-repeat;
background-position: center;

36
JSMR.UI.Blazor/wwwroot/css/bit-blazor.css
View File

@@ -1,15 +1,19 @@
.bit-tfl {
.bit-tfl,
.bit-dtp {
width: 100%;
}
.bit-tfl-inp {
.bit-tfl-inp,
.bit-dtp,
.bit-dtp-inp,
.bit-dtp-cal {
font-family: var(--font-family);
font-size: 1rem;
}
.bit-tfl-inp,
.bit-drp-wrp,
.bit-dtp-wrp {
.bit-dtp-icn {
border: 1px solid var(--input-border-color);
background-color: var(--input-background-color);
transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
@@ -72,13 +76,35 @@
}
.bit-drp-sch .bit-drp-tcn {
padding: 0;
padding: 0 calc(var(--bit-spa-scaling-factor)*1);
align-items: center;
}
.bit-drp-pre, .bit-drp-suf {
background: rgb(57, 79, 94);
}
.bit-dtp-icn {
padding: 0;
}
.bit-dtp-cac {
background: #1f2d40;
}
.bit-pvti {
color: #fff9;
}
.bit-pvt-lnk .bit-pvti:hover {
background-color: inherit;
}
.bit-pvti.bit-pvti-sel {
color: var(--bit-clr-fg-pri);
font-weight: inherit;
}
.bit-pvt-cct {
font-weight: inherit;
font-size: inherit;

3
JSMR.UI.Blazor/wwwroot/svg/age-rating.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
<path d="M340-360h60v-240H280v60h60v180Zm160 0h100q17 0 28.5-11.5T640-400v-160q0-17-11.5-28.5T600-600H500q-17 0-28.5 11.5T460-560v160q0 17 11.5 28.5T500-360Zm20-40v-60h60v60h-60Zm0-100v-60h60v60h-60ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 475 B