CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-06 15:24:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI: Improve panel collapse visibility (Z#23132549) (#3709)

Browse Source 
* Move collapse indicator in panels before label

* only hide collapse indicator in panel titles

* remove unneeded collapse-indicators in pretix-control

* remove unneeded collapse-indicators in presale

* move collapse-indicator to left in variants-toggle-button

* remove chevron and use default collapse-indicator in control-variants
This commit is contained in:
Richard Schreiber
2023-11-13 14:23:28 +01:00
committed by GitHub
parent c2ababb9d6
commit 69c2a1b3c2
13 changed files with 75 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html
View File

@@ -5,7 +5,6 @@
<summary class="panel-heading">
<h4 class="panel-title">
<strong>{% trans title %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</summary>
<div id="{{ pid }}">

2
src/pretix/control/templates/pretixcontrol/item/include_variations.html
View File

@@ -17,7 +17,6 @@
<div class="row">
<div class="col-md-4 col-xs-12">
<strong class="panel-title">
<span class="fa fa-fw chevron"></span>
<span class="fa fa-warning text-danger hidden variation-error"></span>
<span class="variation-name">
Variation name
@@ -125,7 +124,6 @@
<div class="row">
<div class="col-md-4 col-xs-12">
<strong class="panel-title">
<span class="fa fa-fw chevron"></span>
<span class="fa fa-warning text-danger hidden variation-error"></span>
<span class="variation-name">
{% trans "New variation" %}

2
src/pretix/control/templates/pretixcontrol/order/change_questions.html
View File

@@ -25,7 +25,6 @@
<strong>{% trans "Invoice information" %} {% if not request.event.settings.invoice_address_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</summary>
<div id="invoice">
@@ -42,7 +41,6 @@
<strong>{{ pos.item }}{% if pos.variation %}
– {{ pos.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator"></i>
</h4>
</summary>
<div id="cp{{ pos.id }}">

1
src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
View File

@@ -21,7 +21,6 @@
<strong>{{ form.item.name }}{% if form.variation %}
– {{ form.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h3>
</summary>
<div id="cp{{ form.pos.pk }}">

1
src/pretix/presale/templates/pretixpresale/event/checkout_base.html
View File

@@ -28,7 +28,6 @@
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</span>
</h2>
</summary>

1
src/pretix/presale/templates/pretixpresale/event/checkout_membership.html
View File

@@ -13,7 +13,6 @@
<strong>{{ form.position.item.name }}{% if form.position.variation %}
– {{ form.position.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h4>
</summary>
<div>

6
src/pretix/presale/templates/pretixpresale/event/checkout_questions.html
View File

@@ -21,7 +21,6 @@
<summary class="panel-heading">
<h3 class="panel-title">
<strong>{% trans "Contact information" %}</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h3>
</summary>
<div id="contact">
@@ -40,8 +39,6 @@
<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" aria-hidden="true"></i>
</h3>
</summary>
{% if addresses_data %}
@@ -88,10 +85,7 @@
<button type="button" data-id="{{ forloop.counter0 }}" name="copy"
class="js-copy-answers btn btn-default btn-xs">{% trans "Copy answers from above" %}</button>
{% endif %}
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</span>
{% else %}
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
{% endif %}
</h3>
</summary>

2
src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
View File

@@ -97,8 +97,8 @@
data-label-alt="{% trans "Hide variants" %}"
aria-expanded="false"
aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{item}}{% endblocktrans %}">
<span>{% trans "Show variants" %}</span>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
<span>{% trans "Show variants" %}</span>
</button>
{% endif %}
</div>

17
src/pretix/presale/templates/pretixpresale/event/fragment_cart_box.html
View File

@@ -10,16 +10,13 @@
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span aria-hidden="true">
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}" aria-hidden="true">
{% 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" aria-hidden="true"></i>
</span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}" aria-hidden="true">
{% 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>
</h2>
</summary>
<div>

2
src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
View File

@@ -89,8 +89,8 @@
data-label-alt="{% trans "Hide variants" %}"
aria-expanded="false"
aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{ item }}{% endblocktrans %}">
<span>{% trans "Show variants" %}</span>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
<span>{% trans "Show variants" %}</span>
</button>
{% endif %}
</div>

2
src/pretix/presale/templates/pretixpresale/event/order_modify.html
View File

@@ -33,7 +33,6 @@
{% trans "Contact information" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h4>
</summary>
<div id="invoice" class="panel-collapse">
@@ -55,7 +54,6 @@
<strong>{{ pos.item.name }}{% if pos.variation %}
– {{ pos.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h4>
</summary>
<div id="cp{{ pos.id }}">

33
src/pretix/static/pretixcontrol/scss/main.scss
View File

@@ -482,7 +482,7 @@ td > .dl-horizontal {
transform: rotate(180deg);
}
.panel-title a[data-toggle="collapse"], details h3.panel-title, details h4.panel-title {
.panel-title a[data-toggle="collapse"], details .panel-title {
display: flex;
padding: 10px 15px;
margin: -10px -15px;
@@ -490,6 +490,37 @@ td > .dl-horizontal {
justify-content: space-between;
outline: 0;
text-decoration: none;
position: relative;
padding-left: 30px;
}
details strong.panel-title {
display: inline-block;
}
.panel-title a[data-toggle="collapse"] .collapse-indicator,
details .panel-title .collapse-indicator {
/* hide old collapse indicators until they are all removed from HTML */
display: none;
}
.panel-title a[data-toggle="collapse"]::before,
details .panel-title::before {
position: absolute;
top: 50%;
left: 10px;
margin-top: -.5em;
content: "";
width: 1em;
height: 1em;
font: normal normal normal 14px/1 FontAwesome;
display: inline-block;
text-align: center;
transform: rotate(-90deg);
transition: transform 150ms ease-in 0s;
}
.panel-title a:not(.collapsed)::before,
details.details-open .panel-title::before {
transform: rotate(0deg);
}
.panel-title a[data-toggle="collapse"]:hover {

48
src/pretix/static/pretixpresale/scss/main.scss
View File

@@ -342,13 +342,6 @@ body.loading .container {
transition: all 150ms ease-in 0s;
}
.panel-title a:not(.collapsed) .collapse-indicator {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.panel-title a[data-toggle="collapse"], details .panel-title {
display: flex;
padding: 0.75*$line-height-computed;
@@ -357,6 +350,34 @@ body.loading .container {
justify-content: space-between;
outline: 0;
text-decoration: none;
position: relative;
padding-left: 30px;
}
.panel-title a[data-toggle="collapse"] .collapse-indicator,
details .panel-title .collapse-indicator {
/* hide old collapse indicators until they are all removed from HTML */
display: none;
}
.panel-title a[data-toggle="collapse"]::before,
details .panel-title::before {
position: absolute;
top: 50%;
left: 10px;
margin-top: -.5em;
content: "";
width: 1em;
height: 1em;
font: normal normal normal 14px/1 FontAwesome;
display: inline-block;
text-align: center;
transform: rotate(-90deg);
transition: transform 150ms ease-in 0s;
}
.panel-title a:not(.collapsed)::before,
details.details-open .panel-title::before {
transform: rotate(0deg);
}
.panel-default .panel-title a[data-toggle="collapse"]:hover {
@@ -389,13 +410,12 @@ details summary {
-webkit-user-select: none;
user-select: none;
}
.nojs details[open] .panel-heading .collapse-indicator,
details.details-open .panel-heading .collapse-indicator,
[aria-expanded=true]>.collapse-indicator {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
.nojs details:not([open], .details-open) .panel-heading .collapse-indicator,
[aria-expanded=false]>.collapse-indicator {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}
details.sneak-peek {