From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 19 Jul 2018 14:24:18 +0000 (+0100)
Subject: donation: Remove second step for address
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=d9d6d3c30c6f138a8275ceed3f829fa8af8f6524;p=ipfire.org.git

donation: Remove second step for address

It is better when the payment method is selected later. This keeps
the form cleaner and allows the user to change it later.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/templates/donate.html b/src/templates/donate.html
index 4393e263..8a240fac 100644
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -72,78 +72,6 @@
 										</div>
 
 										<div class="row mb-5">
-											<div class="col">
-												<h6>Choose payment</h6>
-
-												<div class="form-check form-check-inline">
-													<input class="form-check-input" type="radio"
-														name="payment" id="credit-card" value="credit-card" checked>
-													<label for="credit-card" class="form-check-label">
-														<picture>
-															<source srcset="{{ static_url("img/amex.png") }},
-																{{ static_url("img/amex@2x.png") }} 2x,
-																{{ static_url("img/amex@3x.png") }} 3x ">
-															<img src="{{ static_url("img/amex.png") }}"
-																srcset="{{ static_url("img/amex.png") }},
-																{{ static_url("img/amex@2x.png") }} 2x,
-																{{ static_url("img/amex@3x.png") }} 3x "
-																alt="Amex" class="m-xl-2">
-														</picture>
-
-														<picture>
-															<source srcset="{{ static_url("img/mastercard.png") }},
-																{{ static_url("img/mastercard@2x.png") }} 2x,
-																{{ static_url("img/mastercard@3x.png") }} 3x ">
-															<img src="{{ static_url("img/mastercard.png") }}"
-																srcset="{{ static_url("img/mastercard.png") }},
-																{{ static_url("img/mastercard@2x.png") }} 2x,
-																{{ static_url("img/mastercard@3x.png") }} 3x "
-																alt="Mastercard" class="m-xl-2">
-														</picture>
-
-														<picture>
-															<source srcset="{{ static_url("img/visa.png") }},
-																{{ static_url("img/visa@2x.png") }} 2x,
-																{{ static_url("img/visa@3x.png") }} 3x ">
-															<img src="{{ static_url("img/visa.png") }}"
-																srcset="{{ static_url("img/visa.png") }},
-																{{ static_url("img/visa@2x.png") }} 2x,
-																{{ static_url("img/visa@3x.png") }} 3x "
-																alt="Visa" class="m-xl-2">
-														</picture>
-													</label>
-												</div>
-
-												<div class="form-check form-check-inline">
-													<input class="form-check-input" type="radio" name="payment"
-														id="direct-debit" value="direct-debit">
-
-													<label for="direct-debit" class="form-check-label">
-														SEPA
-													</label>
-												</div>
-
-												<div class="form-check form-check-inline paypal">
-													<input class="form-check-input" type="radio" name="payment"
-														id="paypal" value="paypal">
-
-													<label for="paypal" class="form-check-label">
-														<picture>
-															<source srcset="{{ static_url("img/paypal.png") }},
-																{{ static_url("img/paypal@2x.png") }} 2x,
-																{{ static_url("img/paypal@3x.png") }} 3x ">
-															<img src="{{ static_url("img/paypal.png") }}"
-																srcset="{{ static_url("img/paypal.png") }},
-																{{ static_url("img/paypal@2x.png") }} 2x,
-																{{ static_url("img/paypal@3x.png") }} 3x "
-																alt="PayPal" class="m-xl-2">
-														</picture>
-													</label>
-												</div>
-											</div>
-										</div>
-
-										<div class="row collapse" id="address">
 											<div class="col d-flex flex-column">
 												<div class="form-row">
 													<div class="col">
@@ -230,16 +158,63 @@
 														</div>
 													</div>
 												</div>
+											</div>
+										</div>
 
-												<input type="submit" class="btn btn-primary btn-lg mx-auto"
+										<div class="row mb-5">
+											<div class="col text-center">
+												<input type="submit" class="btn btn-primary btn-lg"
 													id="donate" value="{{ _("Donate Now") }}">
 											</div>
 										</div>
 
 										<div class="row">
-											<div class="col text-center">
-												<button class="btn btn-primary btn-lg" id="next"
-													data-toggle="collapse" href="#address">{{ _("Next") }} &raquo;</button>
+											<div class="col d-flex justify-content-center">
+												<picture>
+													<source srcset="{{ static_url("img/amex.png") }},
+														{{ static_url("img/amex@2x.png") }} 2x,
+														{{ static_url("img/amex@3x.png") }} 3x">
+													<img src="{{ static_url("img/amex.png") }}"
+														srcset="{{ static_url("img/amex.png") }},
+														{{ static_url("img/amex@2x.png") }} 2x,
+														{{ static_url("img/amex@3x.png") }} 3x"
+														alt="Amex" class="m-xl-2">
+												</picture>
+
+												<picture>
+													<source srcset="{{ static_url("img/mastercard.png") }},
+														{{ static_url("img/mastercard@2x.png") }} 2x,
+														{{ static_url("img/mastercard@3x.png") }} 3x">
+													<img src="{{ static_url("img/mastercard.png") }}"
+														srcset="{{ static_url("img/mastercard.png") }},
+														{{ static_url("img/mastercard@2x.png") }} 2x,
+														{{ static_url("img/mastercard@3x.png") }} 3x"
+														alt="Mastercard" class="m-xl-2">
+												</picture>
+
+												<picture>
+													<source srcset="{{ static_url("img/visa.png") }},
+														{{ static_url("img/visa@2x.png") }} 2x,
+														{{ static_url("img/visa@3x.png") }} 3x">
+													<img src="{{ static_url("img/visa.png") }}"
+														srcset="{{ static_url("img/visa.png") }},
+														{{ static_url("img/visa@2x.png") }} 2x,
+														{{ static_url("img/visa@3x.png") }} 3x"
+														alt="Visa" class="m-xl-2">
+												</picture>
+
+												<!-- XXX insert SEPA logo -->
+
+												<picture>
+													<source srcset="{{ static_url("img/paypal.png") }},
+														{{ static_url("img/paypal@2x.png") }} 2x,
+														{{ static_url("img/paypal@3x.png") }} 3x">
+													<img src="{{ static_url("img/paypal.png") }}"
+														srcset="{{ static_url("img/paypal.png") }},
+														{{ static_url("img/paypal@2x.png") }} 2x,
+														{{ static_url("img/paypal@3x.png") }} 3x"
+														alt="PayPal" class="m-xl-2">
+												</picture>
 											</div>
 										</div>
 
@@ -358,16 +333,6 @@
 				}
 			});
 
-			$("input[name='frequency']").on("change", function() {
-				var frequency = $(this).val();
-
-				if (frequency == "monthly") {
-					$(".paypal").hide();
-				} else {
-					$(".paypal").show();
-				}
-			})
-
 			// Copy amount when clicking on a radio button
 			$("input[name='amount-selector']").on("change", function() {
 				var value = $(this).val();
@@ -390,12 +355,6 @@
 				}
 			});
 
-			$("#next").click(function (event) {
-				event.preventDefault();
-
-				$(this).hide();
-			});
-
 			$("#donate").click(function (event) {
 				var frequency = $("input[name='frequency']").val();