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>
</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>
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 class="ui green label" for="shareable">
<label class="ui button label" id="labelShareable" for="checkboxShareable">
<i class="check icon"></i>
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>
@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>
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>
}
else
{
<label class="ui yellow label" for="lbp1Only">
<label class="ui button label" id="labelLbp1Only" for="checkboxLbp1Only">
<i class="eye icon"></i>
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>
}
<div class="ui divider fitted hidden"></div>
@ -134,6 +134,15 @@ function onSubmit(){
function onHoverStart(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){
let rand = Math.random() * 6 - 3;
element.style.setProperty("--skew", "rotate(" + rand + "deg)");