From 725a7f21c425de8a798f64e74d16ae229c81a24d Mon Sep 17 00:00:00 2001
From: Raphael Michel <mail@raphaelmichel.de>
Date: Mon, 11 Dec 2017 15:00:22 +0100
Subject: [PATCH] Checkout UX: Make whole panel head clickable in payment
 method selection

Thanks @breunigs for the suggestion
---
 .../pretixpresale/event/checkout_payment.html | 16 ++++++++--------
 .../static/pretixpresale/scss/_forms.scss     | 19 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_payment.html b/src/pretix/presale/templates/pretixpresale/event/checkout_payment.html
index d637ee93a..2dd2a09af 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_payment.html
+++ b/src/pretix/presale/templates/pretixpresale/event/checkout_payment.html
@@ -8,22 +8,22 @@
         <div class="panel-group" id="payment_accordion">
             {% for p in providers %}
                 <div class="panel panel-default" data-total="{{ p.total|floatformat:2 }}">
-                    <div class="panel-heading">
-                        <h4 class="panel-title">
-                            <label class="radio">
+                    <label class="accordion-radio">
+                        <div class="panel-heading">
+                            <h4 class="panel-title">
                                 {% if show_fees %}
                                     <strong class="pull-right">+ {{ p.fee|floatformat:2 }} {{ event.currency }}</strong>
                                 {% endif %}
                                 <input type="radio" name="payment" value="{{ p.provider.identifier }}"
                                         data-parent="#payment_accordion"
                                         {% if selected == p.provider.identifier %}checked="checked"{% endif %}
-                                        data-toggle="radiocollapse" data-target="#payment_{{ p.provider.identifier }}" />
+                                        data-toggle="radiocollapse" data-target="#payment_{{ p.provider.identifier }}"/>
                                 <strong>{{ p.provider.public_name }}</strong>
-                            </label>
-                        </h4>
-                    </div>
+                            </h4>
+                        </div>
+                    </label>
                     <div id="payment_{{ p.provider.identifier }}"
-                         class="panel-collapse collapsed {% if selected == p.provider.identifier %}in{% endif %}">
+                            class="panel-collapse collapsed {% if selected == p.provider.identifier %}in{% endif %}">
                         <div class="panel-body form-horizontal">
                             {{ p.form }}
                         </div>
diff --git a/src/pretix/static/pretixpresale/scss/_forms.scss b/src/pretix/static/pretixpresale/scss/_forms.scss
index 976805482..b6c813652 100644
--- a/src/pretix/static/pretixpresale/scss/_forms.scss
+++ b/src/pretix/static/pretixpresale/scss/_forms.scss
@@ -48,4 +48,21 @@
 .addon-list {
   padding: 0;
   list-style-type: none;
-}
\ No newline at end of file
+}
+.accordion-radio {
+  display: block;
+  margin: 0;
+}
+.panel-default>.accordion-radio>.panel-heading {
+  color: #333;
+  background-color: #f5f5f5;
+  border-color: #ddd;
+  padding: 12px 15px;
+
+  input[type=radio] {
+    margin-top: 0;
+    margin-right: 5px;
+    position: relative;
+    top: 2px;
+  }
+}