mirror of
https://github.com/LBPUnion/ProjectLighthouse.git
synced 2025-08-09 05:18:47 +00:00
Fix UI inconsistencies in checkboxes
This commit is contained in:
parent
7839082c30
commit
07aee8347d
1 changed files with 17 additions and 8 deletions
|
@ -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)");
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue