Use <details> und <summary> instead of panel-collapse

This commit is contained in:
Raphael Michel
2018-05-10 12:04:29 +02:00
parent bfff001752
commit 05daeb561c
17 changed files with 198 additions and 186 deletions

View File

@@ -25,9 +25,9 @@
<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.js" %}"></script>
<script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
<script type="text/javascript" src="{% static "pretixpresale/js/ui/main.js" %}"></script>
<script type="text/javascript" src="{% static "pretixpresale/js/ui/details.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/asynctask.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/asyncdownload.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/details.js" %}"></script>
<script type="text/javascript" src="{% static "pretixpresale/js/ui/cart.js" %}"></script>
<script type="text/javascript" src="{% static "lightbox/js/lightbox.min.js" %}"></script>
{% endcompress %}
@@ -37,7 +37,7 @@
<link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}">
{% block custom_header %}{% endblock %}
</head>
<body data-locale="{{ request.LANGUAGE_CODE }}" data-now="{% now "U.u" %}" data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}">
<body class="nojs" data-locale="{{ request.LANGUAGE_CODE }}" data-now="{% now "U.u" %}" data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}">
{% block above %}
{% endblock %}
<div class="container">

View File

@@ -9,19 +9,16 @@
{% csrf_token %}
<div class="panel-group" id="questions_group">
{% for form in forms %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default">
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#cp{{ form.cartpos.pk }}">
<strong>{{ form.item.name }}{% if form.variation %}
{{ form.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{{ form.item.name }}{% if form.variation %}
{{ form.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="cp{{ form.cartpos.pk }}"
class="panel-collapse collapsed in">
</summary>
<div id="cp{{ form.cartpos.pk }}">
<div class="panel-body">
{% for c in form.categories %}
<fieldset>
@@ -55,7 +52,7 @@
{% endfor %}
</div>
</div>
</div>
</details>
{% endfor %}
</div>
<div class="row checkout-button-row">

View File

@@ -3,28 +3,26 @@
{% load bootstrap3 %}
{% block title %}{% trans "Checkout" %}{% endblock %}
{% block content %}
<div class="panel panel-default cart">
<div class="panel-heading">
<details class="panel panel-default cart">
<summary class="panel-heading">
<h3 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#cart">
<span>
<i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
</a>
<span>
<i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
</h3>
</div>
<div class="panel-collapse collapse" id="cart">
</summary>
<div>
<div class="panel-body">
{% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event %}
<em id="cart-deadline" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
@@ -38,7 +36,7 @@
</em>
</div>
</div>
</div>
</details>
<h2>{% trans "Checkout" %}</h2>
{% include "pretixpresale/event/fragment_checkoutflow.html" %}
{% block inner %}

View File

@@ -11,64 +11,57 @@
<form class="form-horizontal" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="panel-group" id="questions_group">
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#contact">
<strong>{% trans "Contact information" %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{% trans "Contact information" %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="contact" class="panel-collapse collapse in">
</summary>
<div id="contact">
<div class="panel-body">
{% bootstrap_form contact_form layout="horizontal" %}
</div>
</div>
</div>
</details>
{% if event.settings.invoice_address_asked %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" {% if event.settings.invoice_address_required or event.settings.invoice_name_required %}open{% endif %}>
<summary class="panel-heading">
<h4 class="panel-title">
<a class="{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %} collapsed{% endif %}" data-toggle="collapse" href="#invoice">
<strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="invoice" class="panel-collapse collapse {% if event.settings.invoice_address_required or event.settings.invoice_name_required or "invoice" in request.GET %} in{% endif %}">
</summary>
<div id="invoice">
<div class="panel-body">
{% bootstrap_form invoice_form layout="horizontal" %}
</div>
</div>
</div>
</details>
{% endif %}
{% for pos, forms in formgroups %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#cp{{ pos.id }}">
<strong>{{ pos.item.name }}</strong>
{% if pos.variation %}
{{ pos.variation }}
{% endif %}
{% if forloop.counter > 1 %}
<span class="text-right">
<input type="button" data-id="{{ forloop.counter0 }}" name="copy" class="js-copy-answers btn btn-default btn-xs" value='{% trans "Copy answers from above" %}'>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
{% else %}
<strong>{{ pos.item.name }}</strong>
{% if pos.variation %}
{{ pos.variation }}
{% endif %}
{% if forloop.counter > 1 %}
<span class="text-right">
<input type="button" data-id="{{ forloop.counter0 }}" name="copy" class="js-copy-answers btn btn-default btn-xs" value='{% trans "Copy answers from above" %}'>
<i class="fa fa-angle-down collapse-indicator"></i>
{% endif %}
</a>
</span>
{% else %}
<i class="fa fa-angle-down collapse-indicator"></i>
{% endif %}
</h4>
</div>
<div id="cp{{ pos.id }}"
class="panel-collapse collapse in">
</summary>
<div>
<div class="panel-body" data-idx="{{ forloop.counter0 }}">
{% if pos.addons.all %}
<div class="form-group">
@@ -93,7 +86,7 @@
{% endfor %}
</div>
</div>
</div>
</details>
{% endfor %}
</div>
<div class="row checkout-button-row">

View File

@@ -16,28 +16,26 @@
</script>
{% endautoescape %}
{% if show_cart %}
<div class="panel panel-primary cart">
<div class="panel-heading">
<details class="panel panel-primary cart" open>
<summary class="panel-heading">
<h3 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#cart">
<span>
<i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
</a>
<span>
<i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</span>
</h3>
</div>
<div class="panel-collapse collapse in" id="cart">
</summary>
<div>
<div class="panel-body">
{% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event editable=True %}
<em id="cart-deadline" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
@@ -79,7 +77,7 @@
</div>
</div>
</div>
</div>
</details>
{% endif %}
{% if show_dates %}

View File

@@ -18,38 +18,33 @@
Please contact us if you need a new invoice.
{% endblocktrans %}
</div>
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#invoice" data-parent="#questions_accordion">
<strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="invoice" class="panel-collapse collapsed in">
</summary>
<div id="invoice" class="panel-collapse">
<div class="panel-body">
{% bootstrap_form invoice_form layout="horizontal" %}
</div>
</div>
</div>
</details>
{% endif %}
{% for pos, forms in formgroups %}
<div class="panel panel-default">
<div class="panel-heading">
<details class="panel panel-default" open>
<summary class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#cp{{ pos.id }}">
<strong>{{ pos.item.name }}{% if pos.variation %}
{{ pos.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</a>
<strong>{{ pos.item.name }}{% if pos.variation %}
{{ pos.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</div>
<div id="cp{{ pos.id }}"
class="panel-collapse collapsed in">
</summary>
<div id="cp{{ pos.id }}">
<div class="panel-body">
{% for form in forms %}
{% if form.pos.item != pos.item %}
@@ -60,7 +55,7 @@
{% endfor %}
</div>
</div>
</div>
</details>
{% endfor %}
</div>
<div class="row checkout-button-row">