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 a4bd50f7f134e61ed353c10cb4ab7e7e9f2bc1f6..c82fc9c6f272ca474d72f22bcde37ccec3e43638 100644 (file)
--- 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");
+                                               }
+                                       });
                                }
                        });