CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Checkout UX: Make whole panel head clickable in payment method selection

Browse Source 
Thanks @breunigs for the suggestion
This commit is contained in:
Raphael Michel
2017-12-11 15:00:22 +01:00
parent e24611fde9
commit 725a7f21c4
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pretix/presale/templates/pretixpresale/event/checkout_payment.html
View File

@@ -8,22 +8,22 @@
<div class="panel-group" id="payment_accordion"> <div class="panel-group" id="payment_accordion">
{% for p in providers %} {% for p in providers %}
<div class="panel panel-default" data-total="{{ p.total|floatformat:2 }}"> <div class="panel panel-default" data-total="{{ p.total|floatformat:2 }}">
<div class="panel-heading"> <label class="accordion-radio">
<h4 class="panel-title"> <div class="panel-heading">
<label class="radio"> <h4 class="panel-title">
{% if show_fees %} {% if show_fees %}
<strong class="pull-right">+ {{ p.fee|floatformat:2 }} {{ event.currency }}</strong> <strong class="pull-right">+ {{ p.fee|floatformat:2 }} {{ event.currency }}</strong>
{% endif %} {% endif %}
<input type="radio" name="payment" value="{{ p.provider.identifier }}" <input type="radio" name="payment" value="{{ p.provider.identifier }}"
data-parent="#payment_accordion" data-parent="#payment_accordion"
{% if selected == p.provider.identifier %}checked="checked"{% endif %} {% 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> <strong>{{ p.provider.public_name }}</strong>
</label> </h4>
</h4> </div>
</div> </label>
<div id="payment_{{ p.provider.identifier }}" <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"> <div class="panel-body form-horizontal">
{{ p.form }} {{ p.form }}
</div> </div>

19
src/pretix/static/pretixpresale/scss/_forms.scss
View File

@@ -48,4 +48,21 @@
.addon-list { .addon-list {
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
} }
.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;
}
}