Implement progress indicator during checkout (#677)

* Implement progress indicator during checkout

* Do not extend bars to the edge

* Wording

* Add a bit more margin
This commit is contained in:
Raphael Michel
2017-11-16 21:24:55 +01:00
committed by GitHub
parent e4167380b9
commit d22427f578
7 changed files with 141 additions and 4 deletions

View File

@@ -40,6 +40,7 @@
</div>
</div>
<h2>{% trans "Checkout" %}</h2>
{% include "pretixpresale/event/fragment_checkoutflow.html" %}
{% block inner %}
{% endblock %}
{% endblock %}

View File

@@ -3,9 +3,10 @@
{% load bootstrap3 %}
{% load eventurl %}
{% load eventsignal %}
{% block title %}{% trans "Confirm order" %}{% endblock %}
{% block title %}{% trans "Review order" %}{% endblock %}
{% block content %}
<h2>{% trans "Confirm order" %}</h2>
<h2>{% trans "Review order" %}</h2>
{% include "pretixpresale/event/fragment_checkoutflow.html" %}
<p>{% trans "Please review the details below and confirm your order." %}</p>
<form method="post" data-asynctask>
{% csrf_token %}

View File

@@ -0,0 +1,25 @@
{% load i18n %}
<div class="checkout-flow">
{% for step in checkout_flow %}
<a {% if step.c_is_before %}href="{{ step.c_resolved_url }}"{% endif %} class="checkout-step {% if step.c_is_before %}step-done{% elif request.resolver_match.kwargs.step == step.identifier %}step-current{% endif %}">
<div class="checkout-step-bar-left"></div>
<div class="checkout-step-bar-right"></div>
<div class="checkout-step-icon">
<span class="fa {% if step.c_is_before %}fa-check{% elif step.icon %}fa-{{ step.icon }}{% else %}fa-pencil{% endif %}"></span>
</div>
<div class="checkout-step-label">
{{ step.label }}
</div>
</a>
{% endfor %}
<a class="checkout-step">
<div class="checkout-step-bar-left"></div>
<div class="checkout-step-bar-right"></div>
<div class="checkout-step-icon">
<span class="fa fa-ticket"></span>
</div>
<div class="checkout-step-label">
{% trans "Order confirmed" context "checkoutflow" %}
</div>
</a>
</div>