From: Michael Tremer <michael.tremer@ipfire.org>
Date: Mon, 22 Oct 2018 09:40:57 +0000 (+0100)
Subject: donate: Move custom input field into dropdown
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a61008963e4e4a843b8ef80f2f5a2c8419484bf3;p=ipfire.org.git

donate: Move custom input field into dropdown

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

diff --git a/src/templates/donate.html b/src/templates/donate.html
index a4bd50f7..c82fc9c6 100644
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -28,23 +28,7 @@
 							{% raw xsrf_form_html() %}
 
 							<div class="row mt-md-4">
-								<div class="col-12 col-lg-6 mb-3 mb-md-0">
-									<h6>Choose a currency</h6>
-
-									<div class="custom-control custom-radio custom-control-inline">
-										<input class="custom-control-input" type="radio" name="currency" id="EUR" value="EUR"
-											{% if currency == "EUR" %}checked{% end %}>
-										<label class="custom-control-label" for="EUR">{{ _("Euro") }}</label>
-									</div>
-
-									<div class="custom-control custom-radio custom-control-inline">
-										<input class="custom-control-input" type="radio" name="currency" id="USD" value="USD"
-											{% if currency == "USD" %}checked{% end %}>
-										<label class="custom-control-label" for="USD">{{ _("US Dollar") }}</label>
-									</div>
-								</div>
-
-								<div class="col-12 col-lg-6">
+								<div class="col-12">
 									<h6>Frequency</h6>
 
 									<div class="custom-control custom-radio custom-control-inline">
@@ -64,29 +48,49 @@
 							<div class="mt-5 mb-3 p-4 bg-light rounded">
 								<h6>{{ _("Choose an amount") }}</h6>
 
-								<input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>
+								<input type="hidden" name="currency" value="{{ currency }}">
 
-								<div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
+								<div class="btn-group-toggle flex-wrap text-center mb-3" data-toggle="buttons">
 									{% for a in amounts %}
 										<label class="btn btn-outline-primary btn-lg mb-2">
 											<input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
-												autocomplete="off"> <span class="USD">$</span>{{ a }} <span class="EUR">€</span>
+												autocomplete="off"> <span class="EUR">€</span><span class="USD">$</span>{{ a }}
 										</label>
 									{% end %}
 								</div>
 
-								<div class="form-group row mb-5">
-									<label class="col-sm-5 col-form-label col-form-label-lg">
-										or enter your own
-									</label>
+								<p class="text-center small">
+									<a data-toggle="collapse" href="#more" role="button">
+										{{ _("More Options") }}
+									</a>
+								</p>
+
+								<div class="collapse" id="more">
+									<div class="form-group row">
+										<label class="col-sm-5 col-form-label col-form-label-lg">
+											Enter your own
+										</label>
+
+										<div class="col-sm-7">
+											<div class="input-group input-group-lg">
+												<div class="input-group-prepend">
+													<span class="input-group-text EUR">€</span>
+													<span class="input-group-text USD">$</span>
+												</div>
 
-									<div class="col-sm-5">
-										<input type="number" class="form-control form-control-lg" name="amount-input" min="5" step="0.01"
-											{% if not amount in amounts %}value="{{ amount }}"{% end %}>
+												<input type="number" class="form-control form-control-lg" name="amount" min="5" step="0.01"
+													{% if amount %}value="{{ amount }}"{% end %}>
+											</div>
+										</div>
 									</div>
+
+									<p class="small text-right">
+										<a class="toggleCurrency EUR" href="#">{{ _("Prefer donating in US Dollar?") }}</a>
+										<a class="toggleCurrency USD" href="#">{{ _("Prefer donating in Euro?") }}</a>
+									</p>
 								</div>
 
-								<div class="row mb-5">
+								<div class="row my-5">
 									<div class="col d-flex flex-column">
 										<div class="form-row">
 											<div class="col">
@@ -392,24 +396,28 @@
 	<script type="text/javascript">
 		$(document).ready(function() {
 			var amount = $("input[name='amount']");
+			var currency = $("input[name='currency']");
 
 			// Adjust form to default currency
-			var currency = $("input[name='currency']:checked").val();
-			if (currency == "EUR") {
+			if (currency.val() == "EUR") {
 				$(".USD").hide();
-			} else if (currency == "USD") {
+			} else if (currency.val() == "USD") {
 				$(".EUR").hide();
 			}
 
-			$("input[name='currency']").on("change", function() {
-				var currency = $(this).val();
+			$(".toggleCurrency").click(function(event) {
+				event.preventDefault();
+
+				if (currency.val() == "EUR") {
+					currency.val("USD");
 
-				if (currency == "EUR") {
-					$(".EUR").show();
-					$(".USD").hide();
-				} else if (currency == "USD") {
 					$(".EUR").hide();
 					$(".USD").show();
+				} else if (currency.val() == "USD") {
+					currency.val("EUR");
+
+					$(".EUR").show();
+					$(".USD").hide();
 				}
 			});
 
@@ -418,20 +426,23 @@
 				var value = $(this).val();
 				if (value) {
 					amount.val(value);
-
-					// Clear input field
-					$("input[name='amount-input']").val("");
 				}
 			});
 
-			$("input[name='amount-input']").on("change", function() {
+			amount.on("change keyup mouseup", function() {
 				var value = $(this).val();
 				if (value) {
-					amount.val(value);
-
-					// Uncheck all radio buttons
-					$("input[name='amount-selector']").removeAttr("checked");
-					$("input[name='amount-selector']").prop("checked", false);
+					// Check matching elements
+					$("input[name='amount-selector']").each(function (i, selector) {
+						var s = $(selector);
+						var b = s.parent(".btn");
+
+						if (s.val() === value) {
+							b.addClass("active");
+						} else {
+							b.removeClass("active");
+						}
+					});
 				}
 			});