Commit d768e033 authored by Aral Balkan's avatar Aral Balkan

Make radio button labels unselectable (usability; esp for touch)

Also make custom amount handling consistent regardless of whether it is focused by button or by text input.
parent f436eb15
......@@ -144,15 +144,30 @@ input[name="donationType"] {
display: none;
}
label {
position: relative;
}
input[name="donationType"] + label {
border: 2px solid #eee;
}
input[name="donationType"]:checked + label {
background-color: #D2D8ED;
color: #422D50;
.selectButton:checked + label:before {
box-sizing: border-box;
border: 2px solid #AAB5D6;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border-radius: 6px;
content:" ";
border: 2px solid #76BCC7;
}
.selectButton:checked + label {
background-color: #AFE1E8;
color: #154652;
}
/* only add right margin to first button
......@@ -205,13 +220,6 @@ input[name="donationAmount"] + label
border: 2px solid #eee;
}
input[name="donationAmount"]:checked + label
{
color: #154652;
background-color: #AFE1E8;
border: 2px solid #76BCC7;
}
#otherDonationLabel
{
font-size: 16px;
......@@ -263,14 +271,20 @@ input[name="donationAmount"]:checked + label
border-radius: 5px;
cursor: pointer;
color: #004E48;
background-color: #E3F9A8;
}
#donateButton:hover
{
background-color: #CBE89B;
/* border: 2px solid #A4C776; */
}
#donateButton:disabled
{
color: #ccc;
background-color: #eee;
border: 2px solid #eee;
/* border: 2px solid #eee; */
}
@media only screen and (min-width: 380px) {
......@@ -297,3 +311,13 @@ input[name="donationAmount"]:checked + label
height:1px;
overflow:hidden;
}
/* Courtesy: https://stackoverflow.com/a/2310809 */
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
\ No newline at end of file
......@@ -34,24 +34,24 @@
<fieldset>
<legend class='hidden'>Type of donation</legend>
<input type='radio' name='donationType' value='monthly' id='monthlyDonation' checked>
<label class='donationTypeButtonLabel' for='monthlyDonation'>Monthly</label>
<input type='radio' name='donationType' value='oneTime' id='oneTimeDonation'>
<label class='donationTypeButtonLabel' for='oneTimeDonation'>One time</label>
<input type='radio' name='donationType' value='monthly' id='monthlyDonation' class='selectButton' checked>
<label class='donationTypeButtonLabel unselectable' for='monthlyDonation'>Monthly</label>
<input type='radio' name='donationType' value='oneTime' id='oneTimeDonation' class='selectButton'>
<label class='donationTypeButtonLabel unselectable' for='oneTimeDonation'>One time</label>
</fieldset>
<fieldset>
<legend class='hidden'>Amount of donation</legend>
<input type='radio' name='donationAmount' value='5' class='hidden' id='tier1'><label class='donationTierButtonLabel' for='tier1'>€5</label>
<input type='radio' name='donationAmount' value='10' class='hidden' id='tier2' checked><label class='donationTierButtonLabel' for='tier2'>€10</label>
<input type='radio' name='donationAmount' value='20' class='hidden' id='tier3'><label class='donationTierButtonLabel' for='tier3'>€20</label>
<input type='radio' name='donationAmount' value='25' class='hidden' id='tier4'><label class='donationTierButtonLabel' for='tier4'>€25</label>
<input type='radio' name='donationAmount' value='50' class='hidden' id='tier5'><label class='donationTierButtonLabel' for='tier5'>€50</label>
<input type='radio' name='donationAmount' value='100' class='hidden' id='tier6'><label class='donationTierButtonLabel' for='tier6'>€100</label>
<input type='radio' name='donationAmount' value='250' class='hidden' id='tier7'><label class='donationTierButtonLabel' for='tier7'>€250</label>
<input type='radio' name='donationAmount' value='3' class='hidden selectButton' id='tier1' checked><label class='donationTierButtonLabel unselectable' for='tier1'>€3</label>
<input type='radio' name='donationAmount' value='5' class='hidden selectButton' id='tier2'><label class='donationTierButtonLabel unselectable' for='tier2'>€5</label>
<input type='radio' name='donationAmount' value='10' class='hidden selectButton' id='tier3'><label class='donationTierButtonLabel unselectable' for='tier3'>€10</label>
<input type='radio' name='donationAmount' value='20' class='hidden selectButton' id='tier4'><label class='donationTierButtonLabel unselectable' for='tier4'>€20</label>
<input type='radio' name='donationAmount' value='30' class='hidden selectButton' id='tier5'><label class='donationTierButtonLabel unselectable' for='tier5'>€30</label>
<input type='radio' name='donationAmount' value='50' class='hidden selectButton' id='tier6'><label class='donationTierButtonLabel unselectable' for='tier6'>€50</label>
<input type='radio' name='donationAmount' value='100' class='hidden selectButton' id='tier7'><label class='donationTierButtonLabel unselectable' for='tier7'>€100</label>
<!-- Unfortunately can’t use an input type='number' here because the events are not fired consistently across major browsers. -->
<input type='radio' name='donationAmount' value='0' class='hidden' id='tier8'><label class='donationTierButtonLabel' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='text' title='Custom donation amount'></input></label>
<input type='radio' name='donationAmount' value='0' class='hidden' id='tier8'><label class='donationTierButtonLabel unselectable' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='text' title='Custom donation amount'></input></label>
</fieldset>
<button id='donateButton'>Become a patron</button>
......
......@@ -28,21 +28,37 @@ document.querySelectorAll('input[name="donationType"]').forEach(function(element
})
})
document.querySelector('#otherDonationAmount').addEventListener('focus', e => {
document.querySelector('#tier8').click()
})
function handleCustomDonationTier() {
// Focus the other donation amount text field to save the person another click.
const otherDonationAmountTextInput = document.getElementById('otherDonationAmount')
otherDonationAmountTextInput.style.opacity = 1
otherDonationAmountTextInput.focus()
// If it’s a custom amount, we’ll enable the donation button
// once the person has entered a valid amount in the other donation amount text field.
donateButtonDisabled = !isOtherDonationAmountValid()
document.getElementById('donateButton').disabled = donateButtonDisabled
}
// When a valid custom donation amount value is entered, enable the donation button.
document.querySelectorAll('input[name="donationAmount"]').forEach(function(element){
element.addEventListener('change', function(e){
var donateButtonDisabled = false
if (e.target.getAttribute('id') == 'tier8'){
// If it’s a custom amount, we’ll enable the donation button
// once the person has entered a valid amount in the other donation amount text field.
donateButtonDisabled = !isOtherDonationAmountValid()
// Focus the other donation amount text field to save the person another click.
document.getElementById('otherDonationAmount').focus()
handleCustomDonationTier()
} else {
if (!isOtherDonationAmountValid()) {
// Clear the other donation amount entry if it is not valid
document.getElementById('otherDonationAmount').value = ''
} else {
// Just disable it.
document.getElementById('otherDonationAmount').style.opacity = 0.5
}
document.getElementById('donateButton').disabled = false
}
document.getElementById('donateButton').disabled = donateButtonDisabled
})
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment