Maverick/SR6_Roll20_Sheet
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Refactor Radio Inputs to Labels for hit tracker

Browse source
This commit is contained in:
Sebastian Fischlmayr 2022-09-14 13:52:46 +02:00
parent 3458f39973
commit 395bfa1616
Signed by: Maverick
GPG key ID: 6379E413924A4E77
4 changed files with 37 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

30
components/_healthBox.css
View file

@ -14,6 +14,7 @@
margin: -1px;
}
/* TODO: Refactor to use Labels !!!! */
label {
&.healthTrackerBox {
cursor: pointer;
@ -27,6 +28,7 @@
width: 6rem;
height: 6rem;
border-radius: 3px;
padding: 0px;
&.reset {
order: 2;
@ -39,21 +41,19 @@
top: 2px;
right: 4px;
}
&:checked {
position: absolute;
opacity: 0;
z-index: 0;
}
&:checked ~ .healthTrackerBox {
order: 3;
background-color: #444444;
}
&:focus {
outline: none;
}
}
}
input:checked {
& + .healthTrackerBox {
position: absolute;
opacity: 0;
z-index: 0;
}
& ~ .healthTrackerBox {
order: 3;
background-color: #444444;
}
}
}

9
output/main.css
View file

@ -31,6 +31,7 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
border: 2px solid #500;
border-radius: 3px;
order: 1;
padding: 0;
position: relative;
}
@ -46,21 +47,17 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
right: 4px;
}
.healthWrapper > .healthContainer > label.healthTrackerBox:checked {
.healthWrapper > .healthContainer > input:checked + .healthTrackerBox {
opacity: 0;
z-index: 0;
position: absolute;
}
.healthWrapper > .healthContainer > label.healthTrackerBox:checked ~ .healthTrackerBox {
.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox {
background-color: #444;
order: 3;
}
.healthWrapper > .healthContainer > label.healthTrackerBox:focus {
outline: none;
}
.abilityBox {
height: -webkit-fit-content;
height: -moz-fit-content;

21
output/main.html
View file

@ -90,20 +90,17 @@
</div>
<div class="healthBox">
<h2>Health</h2>
<input type="number" name="attr_physicalhealth" disabled="true" value="@{physicalHealth}">
<div class="healthWrapper">
<div class="healthContainer">
<label class="healthTrackerBox reset">
<input class="hidden vis" type="radio" name="attr_physicalHealth" value="0" checked="checked">
</label>
<label class="healthTrackerBox">
<input class="hidden vis" type="radio" name="attr_physicalHealth" value="1">
</label>
<label class="healthTrackerBox">
<input class="hidden vis" type="radio" name="attr_physicalHealth" value="2">
</label>
<label class="healthTrackerBox">
<input class="hidden vis" type="radio" name="attr_physicalHealth" value="3">
</label>
<input class="hidden disp" id="physK0" type="radio" name="attr_physicalHealth" value="0" checked="checked">
<label class="healthTrackerBox reset" for="physK0"></label>
<input class="hidden disp" id="physK1" type="radio" name="attr_physicalHealth" value="1">
<label class="healthTrackerBox" for="physK1"></label>
<input class="hidden disp" id="physK2" type="radio" name="attr_physicalHealth" value="2">
<label class="healthTrackerBox" for="physK2"></label>
<input class="hidden disp" id="physK3" type="radio" name="attr_physicalHealth" value="3">
<label class="healthTrackerBox" for="physK3"></label>
</div>
</div>
</div>

18
views/_main-sheet.pug
View file

@ -5,14 +5,16 @@
include .././components/_abilityBox
.healthBox
h2 Health
input(type="number" name="attr_physicalhealth" disabled="true" value="@{physicalHealth}")
.healthWrapper
.healthContainer
label.healthTrackerBox.reset
input.hidden.vis(type="radio" name="attr_physicalHealth" value="0" checked="checked")
label.healthTrackerBox
input.hidden.vis(type="radio" name="attr_physicalHealth" value="1")
label.healthTrackerBox
input.hidden.vis(type="radio" name="attr_physicalHealth" value="2")
label.healthTrackerBox
input.hidden.vis(type="radio" name="attr_physicalHealth" value="3")
input.hidden.disp(id="physK0" type="radio" name="attr_physicalHealth" value="0" checked="checked")
label.healthTrackerBox.reset(for="physK0")
input.hidden.disp(id="physK1" type="radio" name="attr_physicalHealth" value="1")
label.healthTrackerBox(for="physK1")
input.hidden.disp(id="physK2" type="radio" name="attr_physicalHealth" value="2")
label.healthTrackerBox(for="physK2")
input.hidden.disp(id="physK3" type="radio" name="attr_physicalHealth" value="3")
label.healthTrackerBox(for="physK3")