kira
/
exciting-aftermath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The RangeEditor looks sick now.

This commit is contained in:
Kira Jiroux 2025-06-11 16:24:54 -04:00
parent b1a9567d31
commit da30a2b0d5
2 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor
View File

@ -4,7 +4,7 @@
@attribute [StreamRendering]
@rendermode InteractiveServer
<div class="position-relative" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@
<div class="container" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@
<!-- Base number line -->
@* <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div> *@
@ -22,23 +22,72 @@
} *@
<!-- Color pickers for each range -->
<div class="container">
<div class="card rounded-3 w-50 mx-auto">
<div class="card-header mb-3 text-center fw-bold">
Temperature Blanket Colors
</div>
@for (int i = 0; i < TempRanges.Count; i++)
{
var localIndex = i;
@* if (i == 0)
{
<div class="row align-items-center mb-2">
<div class="col-6 text-end pe-2">
<label class="form-label mb-0">
@TempRanges[i].Max&deg;
</label>
</div>
<div class="col-6 ps-2">
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
</div>
</div>
}
else if (i == 10)
{
<div class="row align-items-center mb-2">
<div class="col-6 text-end pe-2">
<label class="form-label mb-0">
@TempRanges[i].Min&deg; +
</label>
</div>
<div class="col-6 ps-2">
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
</div>
</div>
}
else
{
<div class="row align-items-center mb-2">
<div class="col-6 text-end pe-2">
<label class="form-label mb-0">
@TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
</label>
</div>
<div class="col-6 ps-2">
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
</div>
</div>
} *@
<div class="d-flex justify-content-between align-items-center mb-2 gx-2">
<div class="col-10">
<label class="form-label mb-0 me-2">
@TempRanges[i].Min&deg; - @TempRanges[i].Max&deg;
<div class="row align-items-center mb-2">
<div class="col-6 text-end pe-2">
<label class="form-label mb-0">
@TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
</label>
</div>
<div class="col">
<div class="col-6 ps-2">
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
</div>
</div>
</div>
}
</div>
</div>

6
Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor.css Normal file
View File

@ -0,0 +1,6 @@
input[type="color"] {
width: 2.5rem;
height: 2rem;
padding: 0;
border: none;
}