Fix unclickable labels in onboarding

This commit is contained in:
Kevin Froman 2020-08-20 01:29:29 -05:00
parent 6089cc3c98
commit 2cf7a8c8b3
2 changed files with 28 additions and 10 deletions

View File

@ -144,7 +144,7 @@
<div class="box"> <div class="box">
<nav class="level"> <nav class="level">
<div class="level-left"> <div class="level-left">
<div class="level-item"><i class="icon fas fa-eye"></i> <input type="checkbox" name="state" checked></div> <div class="level-item"><i class="icon fas fa-eye" for="state"></i> <input type="checkbox" name="state" checked></div>
<label for="state">Mass surveillance</label> <label for="state">Mass surveillance</label>
</div> </div>
<div class="level-right"> <div class="level-right">
@ -157,7 +157,7 @@
<nav class="level"> <nav class="level">
<div class="level-left"> <div class="level-left">
<div class="level-item"> <div class="level-item">
<i class="icon fas fa-university"></i> <input type="checkbox" name="stateTarget"> <i class="icon fas fa-university" for="stateTarget"></i> <input type="checkbox" name="stateTarget">
</div> </div>
<label for="stateTarget">State actor (direct target)</label> <label for="stateTarget">State actor (direct target)</label>
</div> </div>
@ -166,7 +166,7 @@
</div> </div>
<div class="column is-4"> <div class="column is-4">
<div class="box"> <div class="box">
<i class="icon fas fa-binoculars"></i> <input type="checkbox" name="local"> <label for="local">Nearby threat</label> <i class="icon fas fa-binoculars" for="local"></i> <input type="checkbox" name="local"> <label for="local">Nearby threat</label>
</div> </div>
</div> </div>
</div> </div>
@ -179,7 +179,7 @@
<div class="box"> <div class="box">
<nav class="level"> <nav class="level">
<div class="level-left"> <div class="level-left">
<i class="icon fas fa-envelope"></i> <input type="checkbox" name="useMail" checked> <label for="useMail">Use OnionrMail</label> <i class="icon fas fa-envelope" for="useMail"></i> <input type="checkbox" name="useMail" checked> <label for="useMail">Use OnionrMail</label>
</div> </div>
<div class="level-right"> <div class="level-right">
</div> </div>
@ -190,7 +190,7 @@
<div class="box"> <div class="box">
<nav class="level"> <nav class="level">
<div class="level-left"> <div class="level-left">
<i class="icon fas fa-comments"></i> <input type="checkbox" name="useCircles" checked> <label for="useMail">Use Circles (message board system)</label> <i class="icon fas fa-comments" for="useCircles"></i> <input type="checkbox" name="useCircles" checked> <label for="useCircles">Use Circles (message board system)</label>
</div> </div>
<div class="level-right"> <div class="level-right">
</div> </div>
@ -207,7 +207,7 @@
<div class="box"> <div class="box">
<nav class="level"> <nav class="level">
<div class="level-left"> <div class="level-left">
<i class="icon fas fa-palette"></i> <input type="checkbox" name="useDarkTheme" checked> <label for="useDark">Use Dark Theme</label> <i class="icon fas fa-palette" for="useDarkTheme"></i> <input type="checkbox" name="useDarkTheme" checked> <label for="useDarkTheme">Use Dark Theme</label>
</div> </div>
<div class="level-right"> <div class="level-right">
</div> </div>
@ -219,7 +219,7 @@
<nav class="level"> <nav class="level">
<div class="level-left"> <div class="level-left">
<div class="level-item"> <div class="level-item">
<i class="icon fas fa-dollar-sign"></i> <input type="checkbox" name="donate"> <label for="donate">Donating the price of a coffee to fund development</label> <i class="icon fas fa-dollar-sign" for="donate"></i> <input type="checkbox" name="donate"> <label for="donate">Donating the price of a coffee to fund development</label>
</div> </div>
</div> </div>
</nav> </nav>
@ -236,7 +236,7 @@
<nav class="level"> <nav class="level">
<div class="level-left"> <div class="level-left">
<div class="level-item"> <div class="level-item">
<i class="icon fas fa-book-open"></i> <input checked type="checkbox" name="networkContributionPlain"> <label for="networkContributionPlain">Storing plaintext data</label> <i class="icon fas fa-book-open" for="networkContributionPlain"></i> <input checked type="checkbox" name="networkContributionPlain"> <label for="networkContributionPlain">Storing plaintext data</label>
</div> </div>
</div> </div>
<div class="level-right"> <div class="level-right">
@ -249,7 +249,7 @@
<nav class="level"> <nav class="level">
<div class="level-left"> <div class="level-left">
<div class="level-item"> <div class="level-item">
<i class="icon fas fa-network-wired"></i> <input checked type="checkbox" name="networkContribution"> <label for="networkContribution">Participating in data storage & sharing</label> <i class="icon fas fa-network-wired" for="networkContribution"></i> <input checked type="checkbox" name="networkContribution"> <label for="networkContribution">Participating in data storage & sharing</label>
</div> </div>
</div> </div>
</nav> </nav>

View File

@ -66,3 +66,21 @@ document.getElementById('onboardingForm').onsubmit = function(e){
e.preventDefault() e.preventDefault()
} }
/* Fix label clicking since bulma is weird */
let labelClickFix = function(labels) {
for (i = 0; i < labels.length; i++){
labels[i].onclick = function(event){
document.getElementsByName(event.target.getAttribute("for"))[0].checked ^= 1
}
}
}
let setupLabelFix = function(){
var labels = document.getElementsByTagName('label')
var icons = document.getElementsByTagName('i')
labelClickFix(labels)
labelClickFix(icons)
}
setupLabelFix()