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

@@ -42,6 +42,7 @@
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/mail.js" %}"></script> <script type="text/javascript" src="{% static "pretixcontrol/js/ui/mail.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/typeahead.js" %}"></script> <script type="text/javascript" src="{% static "pretixcontrol/js/ui/typeahead.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/quicksetup.js" %}"></script> <script type="text/javascript" src="{% static "pretixcontrol/js/ui/quicksetup.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/details.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/asynctask.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/asyncdownload.js" %}"></script>
<script type="text/javascript" src="{% static "colorpicker/bootstrap-colorpicker.js" %}"></script> <script type="text/javascript" src="{% static "colorpicker/bootstrap-colorpicker.js" %}"></script>
@@ -53,7 +54,10 @@
<link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}"> <link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}">
{% block custom_header %}{% endblock %} {% block custom_header %}{% endblock %}
</head> </head>
<body data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}" data-payment-weekdays-disabled="{{ js_payment_weekdays_disabled }}" data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}"> <body data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}"
data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}"
data-payment-weekdays-disabled="{{ js_payment_weekdays_disabled }}"
data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}" class="nojs">
<div id="wrapper"> <div id="wrapper">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header"> <div class="navbar-header">

View File

@@ -1,16 +1,14 @@
{% load i18n %} {% load i18n %}
{% load bootstrap3 %} {% load bootstrap3 %}
{% load mail_settings_preview %} {% load mail_settings_preview %}
<div class="panel panel-default"> <details class="panel panel-default">
<div class="panel-heading"> <summary class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#{{ pid }}">
<strong>{% trans title %}</strong> <strong>{% trans title %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
</a>
</h4> </h4>
</div> </summary>
<div id="{{ pid }}" class="panel-collapse collapse"> <div id="{{ pid }}">
<div class="panel-body"> <div class="panel-body">
{% with exclude|split as exclusion %} {% with exclude|split as exclusion %}
{% with items|split as item_list %} {% with items|split as item_list %}
@@ -51,4 +49,4 @@
{% endwith %} {% endwith %}
</div> </div>
</div> </div>
</div> </details>

View File

@@ -21,16 +21,15 @@
{% bootstrap_field form.name layout="control" %} {% bootstrap_field form.name layout="control" %}
{% bootstrap_field form.rate addon_after="%" layout="control" %} {% bootstrap_field form.rate addon_after="%" layout="control" %}
<div class="panel panel-default"> <details class="panel panel-default"
<div class="panel-heading"> {% if rule.eu_reverse_charge or rule.has_custom_rules or form.errors %}open{% endif %}>
<summary class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" href="#advanced">
<strong>{% trans "Advanced settings" %}</strong> <strong>{% trans "Advanced settings" %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
</a>
</h4> </h4>
</div> </summary>
<div id="advanced" class="panel-collapse collapsed {% if rule.eu_reverse_charge or rule.has_custom_rules or form.errors %}in{% endif %}"> <div id="advanced">
<div class="panel-body"> <div class="panel-body">
<legend>{% trans "Advanced settings" %}</legend> <legend>{% trans "Advanced settings" %}</legend>
<div class="alert alert-legal"> <div class="alert alert-legal">
@@ -111,7 +110,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </details>
<div class="form-group submit-group"> <div class="form-group submit-group">

View File

@@ -19,38 +19,33 @@
{% csrf_token %} {% csrf_token %}
<div class="panel-group" id="questions_accordion"> <div class="panel-group" id="questions_accordion">
{% if request.event.settings.invoice_address_asked %} {% if request.event.settings.invoice_address_asked %}
<div class="panel panel-default"> <details class="panel panel-default" open>
<div class="panel-heading"> <summary class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" href="#invoice" data-parent="#questions_accordion">
<strong>{% trans "Invoice information" %} {% if not request.event.settings.invoice_address_required %} <strong>{% trans "Invoice information" %} {% if not request.event.settings.invoice_address_required %}
{% trans "(optional)" %} {% trans "(optional)" %}
{% endif %}</strong> {% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
</a>
</h4> </h4>
</div> </summary>
<div id="invoice" class="panel-collapse collapsed in"> <div id="invoice">
<div class="panel-body"> <div class="panel-body">
{% bootstrap_form invoice_form layout="horizontal" %} {% bootstrap_form invoice_form layout="horizontal" %}
</div> </div>
</div> </div>
</div> </details>
{% endif %} {% endif %}
{% for pos, forms in formgroups %} {% for pos, forms in formgroups %}
<div class="panel panel-default"> <details class="panel panel-default" open>
<div class="panel-heading"> <summary class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" href="#cp{{ pos.id }}">
<strong>{{ pos.item.name }}{% if pos.variation %} <strong>{{ pos.item.name }}{% if pos.variation %}
{{ pos.variation }} {{ pos.variation }}
{% endif %}</strong> {% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
</a>
</h4> </h4>
</div> </summary>
<div id="cp{{ pos.id }}" <div id="cp{{ pos.id }}">
class="panel-collapse collapsed in">
<div class="panel-body"> <div class="panel-body">
{% for form in forms %} {% for form in forms %}
{% if form.pos.item != pos.item %} {% if form.pos.item != pos.item %}
@@ -61,7 +56,7 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div> </details>
{% endfor %} {% endfor %}
</div> </div>
<div class="form-group submit-group"> <div class="form-group submit-group">

View File

@@ -11,17 +11,14 @@
{% endif %} {% endif %}
</h1> </h1>
{% for e in exporters %} {% for e in exporters %}
<div class="panel panel-default"> <details class="panel panel-default" {% if "identifier" in request.GET %}open{% endif %}>
<div class="panel-heading"> <summary class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#{{ e.identifier }}">
{{ e.verbose_name }} {{ e.verbose_name }}
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
</a>
</h3> </h3>
</div> </summary>
<div id="{{ e.identifier }}" class="panel-collapse collapse {% if "identifier" in request.GET %}in <div id="{{ e.identifier }}">
{% endif %}">
<div class="panel-body"> <div class="panel-body">
<form action="{% url "control:event.orders.export.do" event=request.event.slug organizer=request.organizer.slug %}" <form action="{% url "control:event.orders.export.do" event=request.event.slug organizer=request.organizer.slug %}"
method="post" class="form-horizontal" data-asynctask data-asynctask-download method="post" class="form-horizontal" data-asynctask data-asynctask-download
@@ -35,6 +32,6 @@
</form> </form>
</div> </div>
</div> </div>
</div> </details>
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}

View File

@@ -25,9 +25,9 @@
<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.js" %}"></script> <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 "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/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/asynctask.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/asyncdownload.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 "pretixpresale/js/ui/cart.js" %}"></script>
<script type="text/javascript" src="{% static "lightbox/js/lightbox.min.js" %}"></script> <script type="text/javascript" src="{% static "lightbox/js/lightbox.min.js" %}"></script>
{% endcompress %} {% endcompress %}
@@ -37,7 +37,7 @@
<link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}"> <link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}">
{% block custom_header %}{% endblock %} {% block custom_header %}{% endblock %}
</head> </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 %} {% block above %}
{% endblock %} {% endblock %}
<div class="container"> <div class="container">

View File

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

View File

@@ -3,10 +3,9 @@
{% load bootstrap3 %} {% load bootstrap3 %}
{% block title %}{% trans "Checkout" %}{% endblock %} {% block title %}{% trans "Checkout" %}{% endblock %}
{% block content %} {% block content %}
<div class="panel panel-default cart"> <details class="panel panel-default cart">
<div class="panel-heading"> <summary class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#cart">
<span> <span>
<i class="fa fa-shopping-cart"></i> <i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong> <strong>{% trans "Your cart" %}</strong>
@@ -21,10 +20,9 @@
</strong> </strong>
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
</span> </span>
</a>
</h3> </h3>
</div> </summary>
<div class="panel-collapse collapse" id="cart"> <div>
<div class="panel-body"> <div class="panel-body">
{% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event %} {% 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" }}"> <em id="cart-deadline" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
@@ -38,7 +36,7 @@
</em> </em>
</div> </div>
</div> </div>
</div> </details>
<h2>{% trans "Checkout" %}</h2> <h2>{% trans "Checkout" %}</h2>
{% include "pretixpresale/event/fragment_checkoutflow.html" %} {% include "pretixpresale/event/fragment_checkoutflow.html" %}
{% block inner %} {% block inner %}

View File

@@ -11,47 +11,42 @@
<form class="form-horizontal" method="post" enctype="multipart/form-data"> <form class="form-horizontal" method="post" enctype="multipart/form-data">
{% csrf_token %} {% csrf_token %}
<div class="panel-group" id="questions_group"> <div class="panel-group" id="questions_group">
<div class="panel panel-default"> <details class="panel panel-default" open>
<div class="panel-heading"> <summary class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" href="#contact">
<strong>{% trans "Contact information" %}</strong> <strong>{% trans "Contact information" %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
</a>
</h4> </h4>
</div> </summary>
<div id="contact" class="panel-collapse collapse in"> <div id="contact">
<div class="panel-body"> <div class="panel-body">
{% bootstrap_form contact_form layout="horizontal" %} {% bootstrap_form contact_form layout="horizontal" %}
</div> </div>
</div> </div>
</div> </details>
{% if event.settings.invoice_address_asked %} {% if event.settings.invoice_address_asked %}
<div class="panel panel-default"> <details class="panel panel-default" {% if event.settings.invoice_address_required or event.settings.invoice_name_required %}open{% endif %}>
<div class="panel-heading"> <summary class="panel-heading">
<h4 class="panel-title"> <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 %} <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
{% trans "(optional)" %} {% trans "(optional)" %}
{% endif %}</strong> {% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
</a>
</h4> </h4>
</div> </summary>
<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 %}"> <div id="invoice">
<div class="panel-body"> <div class="panel-body">
{% bootstrap_form invoice_form layout="horizontal" %} {% bootstrap_form invoice_form layout="horizontal" %}
</div> </div>
</div> </div>
</div> </details>
{% endif %} {% endif %}
{% for pos, forms in formgroups %} {% for pos, forms in formgroups %}
<div class="panel panel-default"> <details class="panel panel-default" open>
<div class="panel-heading"> <summary class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" href="#cp{{ pos.id }}">
<strong>{{ pos.item.name }}</strong> <strong>{{ pos.item.name }}</strong>
{% if pos.variation %} {% if pos.variation %}
{{ pos.variation }} {{ pos.variation }}
@@ -64,11 +59,9 @@
{% else %} {% else %}
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
{% endif %} {% endif %}
</a>
</h4> </h4>
</div> </summary>
<div id="cp{{ pos.id }}" <div>
class="panel-collapse collapse in">
<div class="panel-body" data-idx="{{ forloop.counter0 }}"> <div class="panel-body" data-idx="{{ forloop.counter0 }}">
{% if pos.addons.all %} {% if pos.addons.all %}
<div class="form-group"> <div class="form-group">
@@ -93,7 +86,7 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div> </details>
{% endfor %} {% endfor %}
</div> </div>
<div class="row checkout-button-row"> <div class="row checkout-button-row">

View File

@@ -16,10 +16,9 @@
</script> </script>
{% endautoescape %} {% endautoescape %}
{% if show_cart %} {% if show_cart %}
<div class="panel panel-primary cart"> <details class="panel panel-primary cart" open>
<div class="panel-heading"> <summary class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#cart">
<span> <span>
<i class="fa fa-shopping-cart"></i> <i class="fa fa-shopping-cart"></i>
<strong>{% trans "Your cart" %}</strong> <strong>{% trans "Your cart" %}</strong>
@@ -34,10 +33,9 @@
</strong> </strong>
<i class="fa fa-angle-down collapse-indicator"></i> <i class="fa fa-angle-down collapse-indicator"></i>
</span> </span>
</a>
</h3> </h3>
</div> </summary>
<div class="panel-collapse collapse in" id="cart"> <div>
<div class="panel-body"> <div class="panel-body">
{% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event editable=True %} {% 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" }}"> <em id="cart-deadline" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
@@ -79,7 +77,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </details>
{% endif %} {% endif %}
{% if show_dates %} {% if show_dates %}

View File

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

View File

@@ -14,12 +14,14 @@ $(function () {
return false; return false;
} }
if (isOpen) { if (isOpen) {
$details.removeClass("details-open");
$detailsNotSummary.stop().show().slideUp(500, function () { $detailsNotSummary.stop().show().slideUp(500, function () {
$details.prop("open", false); $details.prop("open", false);
}); });
} else { } else {
$detailsNotSummary.stop().hide(); $detailsNotSummary.stop().hide();
$details.prop("open", true); $details.prop("open", true);
$details.addClass("details-open");
$detailsNotSummary.slideDown(); $detailsNotSummary.slideDown();
} }
e.preventDefault(); e.preventDefault();
@@ -40,6 +42,8 @@ $(function () {
$details.prop('open', typeof $details.attr('open') == 'string'); $details.prop('open', typeof $details.attr('open') == 'string');
if (!$details.prop('open')) { if (!$details.prop('open')) {
$detailsNotSummary.hide(); $detailsNotSummary.hide();
} else {
$details.addClass("details-open");
} }
$detailsSummary.attr({ $detailsSummary.attr({
'role': 'button', 'role': 'button',

View File

@@ -367,6 +367,8 @@ var form_handlers = function (el) {
$(function () { $(function () {
"use strict"; "use strict";
$("body").removeClass("nojs");
$("[data-formset]").formset( $("[data-formset]").formset(
{ {
animateForms: true, animateForms: true,

View File

@@ -406,7 +406,7 @@ body.loading #wrapper {
transform: rotate(180deg); transform: rotate(180deg);
} }
.panel-title a[data-toggle="collapse"] { .panel-title a[data-toggle="collapse"], details h3.panel-title, details h4.panel-title {
display: flex; display: flex;
padding: 10px 15px; padding: 10px 15px;
margin: -10px -15px; margin: -10px -15px;
@@ -570,3 +570,25 @@ ul.pagination {
.table-payment-providers > tbody > tr > td { .table-payment-providers > tbody > tr > td {
vertical-align: middle; vertical-align: middle;
} }
details {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details summary {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.nojs details[open] .collapse-indicator, details.details-open .collapse-indicator {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}

View File

@@ -97,6 +97,8 @@ var form_handlers = function (el) {
$(function () { $(function () {
"use strict"; "use strict";
$("body").removeClass("nojs");
$("input[data-toggle=radiocollapse]").change(function () { $("input[data-toggle=radiocollapse]").change(function () {
$($(this).attr("data-parent")).find(".collapse.in").collapse('hide'); $($(this).attr("data-parent")).find(".collapse.in").collapse('hide');
$($(this).attr("data-target")).collapse('show'); $($(this).attr("data-target")).collapse('show');

View File

@@ -65,19 +65,6 @@
line-height: inherit; line-height: inherit;
} }
} }
details.item-with-variations {
list-style: none;
}
details.item-with-variations > summary::-webkit-details-marker {
display: none;
}
details summary {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.radio .variation-description { .radio .variation-description {
padding-left: 20px; padding-left: 20px;

View File

@@ -201,7 +201,7 @@ body.loading .container {
transform: rotate(180deg); transform: rotate(180deg);
} }
.panel-title a[data-toggle="collapse"] { .panel-title a[data-toggle="collapse"], details h3.panel-title, details h4.panel-title {
display: flex; display: flex;
padding: 10px 15px; padding: 10px 15px;
margin: -10px -15px; margin: -10px -15px;
@@ -219,5 +219,26 @@ body.loading .container {
background-color: darken($btn-primary-bg, 10%); background-color: darken($btn-primary-bg, 10%);
} }
details {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details summary {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.nojs details[open] .collapse-indicator, details.details-open .collapse-indicator {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
@import "_iframe.scss"; @import "_iframe.scss";
@import "_a11y.scss"; @import "_a11y.scss";