Fix UI inconsistencies in checkboxes

This commit is contained in:
FeTetra 2024-09-26 01:07:10 -04:00
commit 07aee8347d

View file

@ -61,30 +61,30 @@ function onSubmit(){
<textarea name="description" id="description" spellcheck="false" placeholder="Description">@HttpUtility.HtmlDecode(Model.Slot.Description)</textarea> <textarea name="description" id="description" spellcheck="false" placeholder="Description">@HttpUtility.HtmlDecode(Model.Slot.Description)</textarea>
</div> </div>
<div class="ui divider"></div> <div class="ui divider"></div>
<label class="ui red label" for="initiallyLocked"> <label class="ui button label" id="labelInitiallyLocked" for="checkboxInitiallyLocked">
<i class="lock icon"></i> <i class="lock icon"></i>
Locked Locked
<input type="checkbox" name="initiallyLocked" id="initiallyLocked" style="margin-left: 5px;" @(Model.Slot.InitiallyLocked ? "checked" : "") value="true"> <input type="checkbox" name="initiallyLocked" id="checkboxInitiallyLocked" style="margin-left: 5px;" onchange="onCheckboxChange(this)" @(Model.Slot.InitiallyLocked ? "checked" : "") value="true">
</label> </label>
<label class="ui green label" for="shareable"> <label class="ui button label" id="labelShareable" for="checkboxShareable">
<i class="check icon"></i> <i class="check icon"></i>
Copyable Copyable
<input type="checkbox" name="shareable" id="shareable" style="margin-left: 5px;" @(Model.Slot.Shareable == 1 ? "checked" : "") value="1"> <input type="checkbox" name="shareable" id="checkboxShareable" style="margin-left: 5px;" onchange="onCheckboxChange(this)" @(Model.Slot.Shareable == 1 ? "checked" : "") value="1">
</label> </label>
@if (Model.Slot.GameVersion != GameVersion.LittleBigPlanet1) @if (Model.Slot.GameVersion != GameVersion.LittleBigPlanet1)
{ {
<label class="ui blue label" for="subLevel"> <label class="ui button label" id="labelSubLevel" for="checkboxSubLevel">
<i class="arrow circle down icon"></i> <i class="arrow circle down icon"></i>
Sub Level Sub Level
<input type="checkbox" name="subLevel" id="subLevel" style="margin-left: 5px;" @(Model.Slot.SubLevel ? "checked" : "") value="true"> <input type="checkbox" name="subLevel" id="checkboxSubLevel" style="margin-left: 5px;" onchange="onCheckboxChange(this)" @(Model.Slot.SubLevel ? "checked" : "") value="true">
</label> </label>
} }
else else
{ {
<label class="ui yellow label" for="lbp1Only"> <label class="ui button label" id="labelLbp1Only" for="checkboxLbp1Only">
<i class="eye icon"></i> <i class="eye icon"></i>
LBP1 Only LBP1 Only
<input type="checkbox" name="lbp1Only" id="lbp1Only" style="margin-left: 5px;" @(Model.Slot.Lbp1Only ? "checked" : "") value="true"> <input type="checkbox" name="lbp1Only" id="checkboxLbp1Only" style="margin-left: 5px;" onchange="onCheckboxChange(this)" @(Model.Slot.Lbp1Only ? "checked" : "") value="true">
</label> </label>
} }
<div class="ui divider fitted hidden"></div> <div class="ui divider fitted hidden"></div>
@ -134,6 +134,15 @@ function onSubmit(){
function onHoverStart(btn){ function onHoverStart(btn){
generateRandomSkew(btn); generateRandomSkew(btn);
} }
function onCheckboxChange(checkbox) {
const labelId = checkbox.id.replace('checkbox', 'label');
const label = document.getElementById(labelId);
if (checkbox.checked) {
label.classList.add('selected');
} else {
label.classList.remove('selected');
}
}
function generateRandomSkew(element){ function generateRandomSkew(element){
let rand = Math.random() * 6 - 3; let rand = Math.random() * 6 - 3;
element.style.setProperty("--skew", "rotate(" + rand + "deg)"); element.style.setProperty("--skew", "rotate(" + rand + "deg)");