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

9
output/main.css
View file

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

21
output/main.html
View file

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

18
views/_main-sheet.pug
View file

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