Commit 0f8a976f authored by Aral Balkan's avatar Aral Balkan

Rewrite for better state handling

parent d768e033
......@@ -58,7 +58,7 @@ input[name="donationAmount"]
height: 0;
}
#donationForm, #progressIndicator, #thankYouMessage, #errorMessage
#patronageForm, #progressIndicator, #thankYouMessage, #errorMessage
{
margin-left: auto;
margin-right: auto;
......@@ -77,7 +77,7 @@ input[name="donationAmount"]
.donationForm
.patronageForm
{
padding: 10px;
width: 300px;
......@@ -93,7 +93,7 @@ input[name="donationAmount"]
}
@media only screen and (min-width: 380px) {
.donationForm {
.patronageForm {
padding: 10px;
width: 358px;
}
......@@ -248,6 +248,7 @@ input[name="donationAmount"] + label
line-height: 30px;
padding: 0;
-webkit-appearance: none;
opacity: 0.5;
}
@media only screen and (min-width: 380px) {
......@@ -259,7 +260,7 @@ input[name="donationAmount"] + label
}
}
#donateButton
#submitButton
{
font-size: 16px;
margin-top: 4px;
......@@ -274,13 +275,13 @@ input[name="donationAmount"] + label
background-color: #E3F9A8;
}
#donateButton:hover
#submitButton:hover
{
background-color: #CBE89B;
/* border: 2px solid #A4C776; */
}
#donateButton:disabled
#submitButton:disabled
{
color: #ccc;
background-color: #eee;
......@@ -288,7 +289,7 @@ input[name="donationAmount"] + label
}
@media only screen and (min-width: 380px) {
#donateButton
#submitButton
{
font-size: 20px;
}
......
......@@ -30,7 +30,7 @@
</div>
<!-- Donation form -->
<div id='donationForm' class='donationForm'>
<form id='patronageForm' class='patronageForm'>
<fieldset>
<legend class='hidden'>Type of donation</legend>
......@@ -51,12 +51,12 @@
<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 unselectable' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='text' title='Custom donation amount'></input></label>
<input type='radio' name='donationAmount' value='-1' class='hidden selectButton' id='tier8'><label class='donationTierButtonLabel unselectable' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='string' pattern='[0-9]{1,6}' title='Custom donation amount'></input></label>
</fieldset>
<button id='donateButton'>Become a patron</button>
<button type='submit' id='submitButton'>Become a patron</button>
<small class='donation-currency'>Donations are in <a href='https://transferwise.com/gb/currency-converter/currencies/eur-euro'>Euros</a></small>
</div> <!-- end of donation form -->
</form> <!-- end of donation form -->
<script src='https://js.stripe.com/v3/'></script>
<script src='js/index.js'></script>
......
This diff is collapsed.
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