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

Updated UI with BitBlazor components.

Browse Source
This commit is contained in:
Brian Bicknell
2025-11-22 14:42:29 -05:00
parent 2418bd0a8f
commit 8490b49354
22 changed files with 552 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -150,6 +150,11 @@ code {
grid-column: span 4;
}
.search-filter-control {
display: flex;
align-items: center;
}
.items-container {
display: grid;
grid-column-gap: 1.2em;
@@ -335,6 +340,16 @@ code {
background-image: var(--card-background-image);
}
/* Input */
.j-input {
background: rgb(0,20,34);
border: 1px solid #304562;
}
.j-textbox {
}
/* Image */
.j-image-container {
@@ -357,6 +372,7 @@ code {
}
.j-voice-work-card {
position: relative;
display: flex;
gap: 1rem;
background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(39, 59, 73));
@@ -367,6 +383,36 @@ code {
border-right-color: rgb(72, 88, 99);
}
.j-voice-work-card[class*="type-sale"]::before {
background-image: url(../images/web/common/icon_sale_status_01.png);
width: 72px;
height: 72px;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 2;
content: "";
background-position: 0 -432px;
background-size: cover;
pointer-events: none;
}
.j-voice-work-card[class*="type-new"]::before {
background-image: url(../images/web/common/icon_sale_status_01.png);
width: 72px;
height: 72px;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 2;
content: "";
background-position: 0 -504px;
background-size: cover;
pointer-events: none;
}
.j-voice-work-image-container {
width: 240px;
width: 300px;
@@ -482,6 +528,29 @@ code {
height: 16px;
}
.j-product-indicators {
display: flex;
gap: .5rem;
}
.j-product-indicator {
border-width: 1px;
border-style: solid;
border-image: none;
padding: 0.5rem;
border-radius: 100%;
border-color: var(--product-title-text-color);
}
.j-product-indicator-favorite {
border-color: #f04885;
background: #f048852b;
}
.j-product-indicator-favorite > .j-icon {
background-color: #f04885;
}
/* Tags */
.j-tags {
display: flex;
@@ -542,6 +611,22 @@ code {
mask-image: url("../svg/headphones.svg");
}
.j-icon-heart {
mask-image: url("../svg/heart.svg");
}
.j-icon-heart-fill {
mask-image: url("../svg/heart-fill.svg");
}
.j-icon-warning {
mask-image: url("../svg/warning.svg");
}
.j-icon-warning-fill {
mask-image: url("../svg/warning-fill.svg");
}
.j-icon-2 {
background-repeat: no-repeat;
background-position: center;

41
JSMR.UI.Blazor/wwwroot/css/bit-blazor.css Normal file
View File

@@ -0,0 +1,41 @@
.bit-tfl-inp,
.bit-drp-wrp,
.bit-dtp-wrp {
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;
padding: .25rem .5rem;
}
.bit-tfl-fgp {
border: 1px solid var(--input-border-color);
}
.bit-tfl-inp:hover,
.bit-drp-wrp:hover {
border: 1px solid var(--input-hover-border-color);
background-color: var(--input-background-color);
}
.bit-tfl-inp:focus,
.bit-drp-wrp:focus {
background-color: var(--input-background-color);
border: 1px solid var(--input-focus-border-color);
box-shadow: var(--input-focus-box-shadow);
}
/* DropDownList */
.bit-drp-cal {
background-color: var(--input-background-color);
}
.bit-drp-itm:hover {
color: #ffffffde;
background: rgba(255,255,255,.03);
}
.bit-drp-sel,
.bit-drp-sel:hover {
color: #ffffffde;
background: rgba(100,181,246,.16);
}

0
JSMR.UI.Blazor/wwwroot/css/jsmr-mud-blazor.css → JSMR.UI.Blazor/wwwroot/css/mud-blazor.css
View File

48
JSMR.UI.Blazor/wwwroot/css/radzen.css Normal file
View File

@@ -0,0 +1,48 @@
.rz-timespanpicker > .rz-inputtext.j-input,
.rz-colorpicker.j-input,
.rz-lookup-search input.j-input,
.rz-numeric.j-input,
.rz-datepicker > .rz-inputtext.j-input,
.rz-multiselect, .rz-dropdown.j-input,
.mask.j-input,
.rz-textarea.j-input,
.rz-textbox.j-input {
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;
padding: .25rem .5rem;
}
.j-input.rz-form-field:hover .rz-form-field-content,
.j-input.rz-autocomplete:hover:not(.rz-state-disabled),
.j-input.rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-numeric:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-multiselect:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-dropdown:not(:disabled):not(.rz-state-disabled):hover,
.j-input.mask:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-textarea:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-textbox:not(:disabled):not(.rz-state-disabled):hover {
border: 1px solid var(--input-hover-border-color);
background-color: var(--input-background-color);
}
.j-input.rz-form-field.rz-state-focused .rz-form-field-content,
.j-input.rz-numeric:focus-within:not(.rz-state-disabled),
.j-input.rz-autocomplete:focus-within:not(.rz-state-disabled),
.j-input.rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-numeric:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-multiselect:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus,
.j-input.mask:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-textarea:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
background-color: var(--input-background-color);
border: 1px solid var(--input-focus-border-color);
box-shadow: var(--input-focus-box-shadow);
}

2
JSMR.UI.Blazor/wwwroot/css/theme-base.css
View File

@@ -5,5 +5,5 @@ body {
}
label {
font-weight: 600;
font-weight: 500;
}

5
JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
View File

@@ -34,6 +34,11 @@
--card-border-left-color: #212630;
--card-border-right-color: #212531;
--card-border-bottom-color: #212530;
--input-border-color: #304562;
--input-hover-border-color: #64b5f6;
--input-background-color: rgb(0,20,34);
--input-focus-border-color: #64b5f6;
--input-focus-box-shadow: 0 0 0 1px #93cbf9;
}
/*

10
JSMR.UI.Blazor/wwwroot/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" bit-theme-system>
<head>
<meta charset="utf-8" />
@@ -16,9 +16,14 @@
<!-- Important: Increment the version parameter whenever you update MudBlazor to prevent caching issues -->
<script src="_content/MudBlazor/MudBlazor.min.js?v=1"></script>
<script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js"></script>
<script src="js/site.js"></script>
<link rel="stylesheet" href="css/jsmr-mud-blazor.css" />
<link rel="stylesheet" href="css/mud-blazor.css" />
<link rel="stylesheet" href="css/radzen.css" />
<link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bit-blazor.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/theme-base.css" />
<link rel="stylesheet" href="css/theme-frozen.css" />
@@ -46,6 +51,7 @@
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.min.js"></script>
</body>
</html>

3
JSMR.UI.Blazor/wwwroot/svg/warning-fill.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

4
JSMR.UI.Blazor/wwwroot/svg/warning.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 636 B